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/