Sector Arc for SVG Path

sectorArcPath.js

let sectorArcPath = function(x,y,r,startAngle,endAngle){
    endAngle = startAngle + ((endAngle-startAngle)%360);
    let startX, startY, endX, endY;
    startX = x+r*Math.sin(startAngle*Math.PI/180);
    startY = y-r*Math.cos(startAngle*Math.PI/180);
    endX = x+r*Math.sin(endAngle*Math.PI/180);
    endY = y-r*Math.cos(endAngle*Math.PI/180);
    let b= startY < endY ? 1 : 0;
    let obtuse = Math.abs(startAngle-endAngle)>180?1:0;
    let startSmaller = startAngle<endAngle ? 1 : 0;
    return `M ${startX} ${startY} A ${r} ${r} 0 ${obtuse} ${startSmaller} ${endX} ${endY}`;
}

zExample.js

let div = document.createElement("div");
document.body.appendChild(div); 
div.innerHTML=`<svg width=100 height=100>
  <path id="sector-arc" fill="none" stroke="black"></path>
</svg>`;
const animation = ()=>{
  
  document.getElementById('sector-arc').setAttribute('d',sectorArcPath(50,50,20,parseFloat(startAngle.value),parseFloat(endAngle.value)));
  
  window.requestAnimationFrame(animation);
};

div.insertAdjacentHTML('afterend',`<input id="startAngle" type="range" min=-180 max="360" value=0 />`);
div.insertAdjacentHTML('afterend',`<input id="endAngle" type="range" min=-180 max=360 value=180 />`);
let startAngle=document.getElementById("startAngle");
let endAngle=document.getElementById("endAngle");

animation();

play with it here https://jsfiddle.net/jf96aynk/1/