SVG Path: Elliptical Arc

By Xah Lee. Date:

This page is a tutorial on SVG path element's elliptical arc command A and a.

Basic Parameters

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 30 20, 0, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>
Ellipse with major and minor axes 30 20.

Note:

Rotation

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 30, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>
Ellipse, rotated 30 degrees.
<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 61, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>
Ellipse, rotated 61 degrees.
<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 91, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>
Ellipse, rotated 91 degrees.
<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 181, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>
Ellipse, rotated 181 degrees.
Ellipse with major and minor radius {10,5}, and rotations of 0, 30, 60, 90 degrees.
Ellipse with major and minor radius {100,50}, and rotations of 0, 30, 60, 90 degrees.

For math detail, see Ellipse

Large Arc Flag and Sweep Flag

When a line cuts ellipse into 2 arcs, there's a larger arc and a smaller arc. The parameter large_arc_flag specifies which arc to use.

The sweep_flag specifies which side of the path the curve is drawn.

arcs02

Understand the Parameters in Depth

The Elliptical Arc command is not intuitive. Here's how to think about it.

Reference

Paths – SVG 1.1 (Second Edition)#PathDataEllipticalArcCommands

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.