<svg viewBox="-250 -250 500 250" width="280">
  <g class="figure" transform="rotate(-90)">
    <circle r="20" cy="-20" />
    <path d="M-20,-20 0,-150 20,-20" />
  </g>

  <g class="scale">
    <circle r="200" cx="0" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="10 60" />
    <circle r="210" cx="0" fill="none" stroke-width="10" stroke="green" />
    <circle r="210" cx="0" fill="none" stroke-width="10" stroke="red" stroke-dasharray="220 600" stroke-dashoffset="-300" />
    <circle r="210" cx="0" fill="none" stroke-width="10" stroke="yellow" stroke-dasharray="220 600" stroke-dashoffset="-80" />
  </g>

  <g class="data">
    <path d="m-220 0 a120 -120 0 0 1 440 0" fill="none" stroke="blue" stroke-width="0" id="path" />
    <text dx="25">
      <textPath href="#path">40</textPath>
    </text>
    <text dx="95">
      <textPath href="#path">60</textPath>
    </text>
    <text dx="155">
      <textPath href="#path">80</textPath>
    </text>
    <text dx="210">
      <textPath href="#path">120</textPath>
    </text>
    <text dx="280">
      <textPath href="#path">160</textPath>
    </text>
    <text dx="370">
      <textPath href="#path">200</textPath>
    </text>
    <text dx="420">
      <textPath href="#path">260</textPath>
    </text>
    <text dx="480">
      <textPath href="#path">280</textPath>
    </text>
    <text dx="550">
      <textPath href="#path">300</textPath>
    </text>
    <text dx="610">
      <textPath href="#path">320</textPath>
    </text>
  </g>

  <text id="num" text-anchor="middle" aligment-baseline="central" y="-100" style="font-size: 50px; font-family: sans-serif;">0</text>
</svg>

<br>
<br>
<br>

<input type="range" min="-100" max="90" value="-90" id="range">
.figure {
  transform-origin: 0 -20px;
  transition: 0.34s ease;
}

#num {
  transition: 0.34s linear;
}

.data text {
  font-size: 26px;
  font-family: sans-serif;
}
range.addEventListener("input", function () {
  document.querySelector(".figure").style.transform = `rotate(${this.value}deg`;
  num.innerHTML = parseInt((320 * (Number(this.value) + 100)) / 180);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.