function getPathArc(center, start, end, radius) {
if (end == start) end += 360;
var degree = end - start;
degree = degree < 0 ? (degree + 360) : degree;
var points = [];
points.push( getLocationFromAngle(start, radius, center) );
points.push( getLocationFromAngle(start+degree/3, radius, center) );
points.push( getLocationFromAngle(start+degree*2/3, radius, center) );
points.push( getLocationFromAngle(end, radius, center) );
return this.getCirclePath(points, radius, (degree < 180) ? 0 : 1);
}
function getCirclePath(points, radius, clockWise) {
return ['M', points[0].x, points[0].y,
'A', radius, radius, 0, 0, clockWise, points[1].x, points[1].y,
'A', radius, radius, 0, 0, clockWise, points[2].x, points[2].y,
'A', radius, radius, 0, 0, clockWise, points[3].x, points[3].y
].join(' ');
}
function getLocationFromAngle(degree, radius, center) {
var radian = (degree * Math.PI) / 180;
return {
x : Math.cos(radian) * radius + center.x,
y : Math.sin(radian) * radius + center.y
}
}
document.getElementById("arc1").setAttribute("d", getPathArc({x:250,y:250}, 90, 90, 200));
document.getElementById("arc2").setAttribute("d", getPathArc({x:250,y:250}, 70, 70, 200));
<svg width="500" height="500">
<path id="arc1" fill="none" stroke="green" stroke-width="8" />
<path id="arc2" fill="none" stroke="red" stroke-width="3" />
</svg>