JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<svg id="gauge" width="200" height="150" viewBox="-1 -1 202 152">
  <clipPath id="clip">
    <use xlink:href="#meter" />
  </clipPath>
  <g clip-path="url(#clip)">
    <path id="bar" style="fill:red; transform: rotate(-180deg); transform-origin:100px 100px; transition: all 1s" opacity="0.5" d="M0,100 A 100 100 0 0 1 200 100 Z"></path>
  </g>
  <path id="meter" stroke="gray" stroke-width="1" fill="transparent" d="M0,100 A 100 100 0 0 1 200 100 L 175 100 A 75 75 0 0 0 25 100 Z"></path>
  <path id="hand" style="transform: rotate(-180deg);transform-origin:100px 100px; transition: transform 1s" d="M100,100 L 200 100" stroke="gray"></path>
  <text font-family="Helvetica-Bold, Helvetica" font-size="32" font-weight="bold">
    <tspan id="value" text-anchor="end" x="122" y="132" style="fill: gray; transition: all 1s">0.0</tspan>
    <tspan x="115.375" y="132" font-family="Helvetica-Light, Helvetica" font-weight="300" fill="#6E6E6E">/</tspan>
    <tspan x="124.271" y="132" font-family="Helvetica-Light, Helvetica" font-size="24" font-weight="300" fill="#6E6E6E">10</tspan>
  </text>
</svg>

<div>Click gauge to change value</div>

JavaScript

gauge.addEventListener("click", function() {
  let level = Math.random() * 10;
  let angle = -Math.PI / 10 * level + Math.PI;
  let deg = -360 / (2 * Math.PI) * angle;

  bar.style.transform = hand.style.transform = `rotate(${deg}deg)`;
  bar.style.fill = value.style.fill = `hsl(${120/10*level}, 100%, 50%)`;
  value.textContent = level.toFixed(1);
  
});