SVG `<path>` arc explained

Start and End Point

in a 100x100 viewbox, 20,50 to 80,50

A symmetric ellipse (same x and y radius) forms a uniform circle, where the sweep parameter defines the side (clockwise or counterclockwise drawing direction).

Because a symmetric ellipse is a circle changing the rotation along the circle makes no difference, and there are no small and large ellipse parts.

For an asymmetric ellipse the rotation parameter makes a difference:

Because the ellipse is symmetric on the points connecting line the large-part parameter has no influence.

When the ellipse is not symmetric on the points axis, there are four possible arcs:

---

transition (on hover)

animation