create svg circle with path and angle

it has start point and end point

by Hooman Askari

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="320" height="320">
    <rect fill="rgba(0,0,0,0.1)" width="100%" height="100%" />
    <path id="path" fill="#000" />
</svg>

JavaScript

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {

  let angleInRadians = (angleInDegrees - 90) * Math.PI / 180;
  
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
  
}

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

	let start = polarToCartesian(x, y, radius, endAngle);
  let end = polarToCartesian(x, y, radius, startAngle);
  
  let largeArcFlag = (endAngle - startAngle) <= 180 ? '0' : '1';
  
  let d = [
  	'M', start.x, start.y, 
    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y
	].join(' ');
	
  return d;
  
}

// console.log(describeArc(255, 255, 220, 134, 136));
document.querySelector('#path').setAttribute('d', describeArc(300, 350, 500, 1500, 180));