SVG Circle Arc

by Hooman Askari

HTML

<svg>
  <path id="arc1" fill="orange" />
</svg>
<div id="path"></div>

CSS

svg {
    height: 200px;
    width: 200px;
}

JavaScript

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 d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y,
        "L", x,y,
        "L", start.x, start.y
    ].join(" ");
    
    console.log(d);

    return d;       
}

var arc = describeArc(100, 100, 100, 0, 180);

document.getElementById("arc1").setAttribute("d", arc);
document.getElementById("path").innerHTML = arc;