JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg" width="1000" height="500">			
			<circle cx="200" cy="200" r="150" stroke="#ccc" stroke-width="1" fill="none" />
			<circle cx="200" cy="200" r="135" stroke="#ccc" stroke-width="1" fill="#777" />
			<text x="180" y="200" fill="white">Power</text>
			<path id="arc1" fill="none" stroke="#0f0" stroke-width="30" />
</svg>

JavaScript

var svg = document.getElementById("svg");
				
			function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
				var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

				return {
				x: centerX + (radius * Math.cos(angleInRadians)),
				y: centerY + (radius * Math.sin(angleInRadians))
				};
			}

			function describeArc(x, y, radius, startAngle, endAngle){

				var start = polarToCartesian(x, y, radius, endAngle);
				var end = polarToCartesian(x, y, radius, startAngle);

				//var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
				var arcSweep = 1;
				var d = [
				"M", start.x, start.y, 
				"A", radius, radius, 0, arcSweep, 0, end.x, end.y
				].join(" ");
				return d;       
			}			
			document.getElementById("arc1").setAttribute("d", describeArc(200, 200, 120, -150, 150));