The arc command (a or A) of the element <path> is used to define an elliptical path. The special case is the circular path. Contrary to the element <circle>, where the center of the circle and radius has to be defined, the circular (actually elliptical) command defines start and end points of the path, radius and flag with value 0 or 1 depending on angle lower or greater than 180°.
Let’s say SVG viewBox is centered at 0,0 coordinates and we would like to create a circular path with center at 0,0 with radius r from start angle to the end angle:
x1 = r * cos(startAngle) y1 = - r * sin(startAngle)
x2 = r * cos(endAngle) y2 = - r * sin(endAngle)
With radius 100 from start angle 30° to end angle 60° coordinates looks like: x1 = 100 * cos(30°) y1 = - 100 * sin(30°)
x2 = 100 * cos(60°) y2 = - 100 * sin(60°)
Here are an examples with absolute and relative commands:
<path d=”M50,-86.6025 A100,100 0 0,1 86.6025,-50″ />
<path d=”M0,0 m50,-86.6025 a100,100 0 0,1 36.6025,36.6025 ” />
With rotation angle always 0 and sweep flag 1, both in blue, it could be described like this with red variables:
<path id=”absolute_path” d=”Mx1,y1 Ar,r 0,largeFlag,1 x2,y2” />
Let’s say path is already at point x1,y1:
<path id=”relative_path” d=”ar,r 0,largeFlag,1 x2-x1,y2-y” />
Large arc flag has value 0 for arc angle less than 180° and value 1 for angle greater than 180°.
There is a tool available to create circular arc at https://tools.minetlab.com/svg/circular-arc/