SVG: Circular arc

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°.

Example of the circular arc from start angle 30° to the end angle 60°.

There is a tool available to create circular arc at

This entry was posted in workday and tagged . Bookmark the permalink.

Leave a Reply