D3和React =300 kB（缩小！）
你可以在原生JavaScript中实现：

<svg-gauge value="35" color="red"></svg-gauge>
    <svg-gauge value="50" color="hotpink"></svg-gauge>
    <svg-gauge value="75" color="blue"></svg-gauge>

字符串
x1c 0d1x的数据

customElements.define("svg-gauge", class extends HTMLElement {
    connectedCallback() {
      let arc = "m20 45a35 35 0 1170 0";
      let col = this.getAttribute("color")||"green";
      this.innerHTML = 
      `<input type="range" min="0" max="100" step="5" value="0"`+ // delete 2 lines
      ` oninput="this.parentNode.percent=this.value" /><br>`+ // just for demo
      `<svg viewbox="0 0 100 100">
         <path d="${arc}" stroke="grey" stroke-width="6" fill="none" 
               stroke-linecap="round"></path>
         <path id="P" d="${arc}" stroke="${col}" stroke-width="8" pathLength="100" 
               fill="none" stroke-linecap="round" stroke-dasharray="75 35"></path>
         <circle cx="0" cy="0" fill="#fff" r="4" stroke="${col}" stroke-width="3">
           <animateMotion dur="0.5s" keyPoints="0;0.75" 
                          fill="freeze" keyTimes="0;1" calcMode="linear" path="${arc}">
           </animateMotion></circle>
         <text x="55%" y="40%" text-anchor="middle"/>
       </svg>`;
      this.style.display='inline-block';
      this.percent = this.getAttribute("value") || "50";
    }
    set percent(val = 0) {
      this.setAttribute("value", val);
      let dash = val + " " + (105 - val);
      this.querySelector("#P").setAttribute('stroke-dasharray', dash);
      this.querySelector("animateMotion").setAttribute('keyPoints', '0;'+val/100);
      this.querySelector("text").innerHTML =`${val} %`;
      this.querySelector("animateMotion").beginElement();
      this.querySelector("input").value = val;
    }
  })

svg-gauge { width:180px }

<h3>Drag sliders:</h3>
<svg-gauge value="35" color="red"></svg-gauge>
<svg-gauge value="50" color="hotpink"></svg-gauge>
<svg-gauge value="75" color="blue"></svg-gauge>