Circle gauge

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/gauges/gauge-circle.html
  Desc   : Circular percentage gauge driven by a range slider (JS)
  ============================================================
-->
<div class="sg-gauge-circle" style="--sg-color:#7F77DD; --sg-size:130px;">
  <svg viewBox="0 0 100 100" role="img" aria-label="Percentage gauge">
    <title>Percentage gauge</title>
    <circle class="sg-gauge-circle-track" cx="50" cy="50" r="44" pathLength="100" />
    <circle class="sg-gauge-circle-arc" cx="50" cy="50" r="44" pathLength="100" />
    <text class="sg-gauge-circle-value" x="50" y="57">67%</text>
  </svg>
  <input class="sg-gauge-circle-slider" type="range" min="0" max="100" value="67" aria-label="Gauge value" />
</div>
<script>
  document.querySelectorAll('.sg-gauge-circle:not([data-sg-init])').forEach(function (root) {
    root.setAttribute('data-sg-init', '');
    var arc = root.querySelector('.sg-gauge-circle-arc');
    var label = root.querySelector('.sg-gauge-circle-value');
    var slider = root.querySelector('.sg-gauge-circle-slider');
    function render() {
      arc.style.strokeDashoffset = 100 - slider.value;
      label.textContent = slider.value + '%';
    }
    slider.addEventListener('input', render);
    render();
  });
</script>
<style>
  .sg-gauge-circle {
    width: var(--sg-size);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
  }
  .sg-gauge-circle svg {
    width: 100%;
    display: block;
  }
  .sg-gauge-circle-track,
  .sg-gauge-circle-arc {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
  .sg-gauge-circle-track {
    stroke: var(--sg-color);
    opacity: 0.15;
  }
  .sg-gauge-circle-arc {
    stroke: var(--sg-color);
    stroke-dasharray: 100;
    stroke-dashoffset: 33;
    transition: stroke-dashoffset 0.45s ease;
  }
  .sg-gauge-circle-value {
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    fill: currentColor;
    text-anchor: middle;
  }
  .sg-gauge-circle-slider {
    width: 90%;
    accent-color: var(--sg-color);
  }
</style>