D3 and React Hooks: Move element along an arc - svg

Question

I am creating a gauge with a small marker which is a triangle, I already have it working here: https://codesandbox.io/s/blazing-sun-teo9oe?file=/src/Gauge.tsx
Except for the marker transition, I need it to move along the gauge arc, so when the component prop changes from 40 to 80 for example, the marker will move from 40 to 80, right now it always starts at 50 or the middle of the arc and then moves to the final value.
Feel free to change the Gauge prop value in the index.tsx file to see the problem. Transition duration is 10 seconds to see the problem easier.

Answer 1

D3 and React = 300 kB (minified!)
You can do it in native JavaScript:
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>