Как реализовать дугу со значением?

input.oninput = (event) => {
  const value = input.value / 100;
  const [cx, cy, r] = [50, 50, 30];
  const [px, py] = [cx + r * Math.sin(2 * Math.PI * value) - ~~(value) * 1e-3, cy - r * Math.cos(2 * Math.PI * value)];
  document.querySelector('.progress .fill').setAttribute('d', `M 50 20 A 30 30 0 ${Math.round(value)} 1 ${px} ${py}`);
};
input.oninput();

#input {
  font-size: 3em;
  position: fixed;
  top: 5rem;
  right: 1rem;
}

.progress {
  width: 80vw;
  height: 80vh;
  display: inline-block;
  position: relative;
}

.progress .base {
  fill: transparent;
  stroke: #aaa;
  stroke-width: 3px;
}

.progress .fill {
  fill: transparent;
  stroke: #33f;
  stroke-width: 3px;
}

<input id="input" type="number" min="0" max="100" value="54">
<svg class="progress" viewBox="0 0 100 100">
        <path class="base" d=" M 50 20 a 30 30 0 1 1 -0.1 0 Z" />
        <path class="fill" d=" M 50 20 A 30 30 0 0 1 50 20 Z" />
      </svg>