Circular SVG Pomodoro Timer

<div class="circle-timer-box">
  <svg viewBox="0 0 180 180">
    <circle class="circle-bg" cx="90" cy="90" r="75" />
    <circle class="circle-bar" id="pomoSvgBar" cx="90" cy="90" r="75" />
  </svg>
  <div class="circle-inner-label">
    <span id="pomoTimeTxt">25:00</span>
  </div>
</div>

.circle-timer-box {
  position: relative;
  width: 180px;
  height: 180px;
}
.circle-timer-box svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 10;
}
.circle-bar {
  fill: none;
  stroke: #00f0ff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 471; /* 2 * PI * 75 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

let total = 25 * 60;
let remaining = total;
let timer = null;
const circ = 2 * Math.PI * 75; // 471

function update() {
  const pct = remaining / total;
  const offset = circ * (1 - pct);
  document.getElementById('pomoSvgBar').style.strokeDashoffset = offset;
  const m = Math.floor(remaining / 60);
  const s = remaining % 60;
  document.getElementById('pomoTimeTxt').textContent = 
    `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
}

document.getElementById('pomoStartBtn').addEventListener('click', () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  } else {
    timer = setInterval(() => {
      if (remaining > 0) {
        remaining--;
        update();
      }
    }, 1000);
  }
});