Javascript example

HTML

<svg width="500" height="500">
	<path id="arc1" fill="none" stroke="green" stroke-width="2" />
  <path id="arc2" fill="none" stroke="red" stroke-width="2" />
</svg>

JavaScript

function getPathArc(center, start, end, radius) {
				end -= this.isCompleteAngle(start, end) ? 0.0001 : 0;
				var degree = end - start;
				degree = degree < 0 ? (degree + 360) : degree;
				return this.getCirclePath(
					center, getLocationFromAngle(start, radius, center),
					getLocationFromAngle(end, radius, center), radius, (degree < 180) ? 0 : 1
				);
			}
			
			function getCirclePath(center, start, end, radius, clockWise) {
				return 'M ' + start.x + ' ' + start.y + ' A ' + radius + ' ' +
					radius + ' 0 ' + clockWise + ' 1 ' + end.x + ' ' + end.y;
			}
			
			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
				}
			}
			
			function isCompleteAngle(startAngle, endAngle) {
				var totalAngle = endAngle - startAngle;
				totalAngle = totalAngle <= 0 ? (totalAngle + 360) : totalAngle;
				return Math.floor(totalAngle / 360) !== 0;
			}
			
			window.onload = function() {
				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));
			};