7.4 Elliptical Arc

An arc command begins with the A abbreviation for absolute coordinates or a for relative coordinates, and is followed by seven parameters:

M x,y A rx-radius, ry-radius, x-axis-angle, large-arc-flag, sweep-flag, x, y

  1. The x- and y-radius of the ellipse on which the points lie.
  2. The large-arc-flag, which is 0 if the arc's measure is less than 180 degrees, or 1 if the arc's measure is greater than or equal to 180 degrees.
  3. The sweep-flag, which is 0 if the arc is to be drawn in the negative angle (anticlockwise) direction, or one if the arc is to be drawn in the positive angle direction (clockwise)
  4. The ending x- and y- coordinates of the ending point.
    (The starting point M is determined by the last point drawn or the last moveto command.)
Claude Opus 4.6 notes about where are the centers of ellipses located
How are the ellipse centers located?

Given two points P₁ (start) and P₂ (end) with radii rx, ry:

  1. Draw an ellipse of radii (rx, ry) centered on P₁.
  2. Draw an ellipse of radii (rx, ry) centered on P₂.
  3. The two intersection points of those ellipses are the two possible centers.
  4. This gives two ellipses, and each ellipse has two arcs (large and small) — so 4 arcs total, selected by large-arc-flag and sweep-flag.

For circles (rx = ry = r), the construction simplifies to: draw a circle of radius r around each point; the two intersections are the two possible centers.

What if the two ellipses do not intersect?

If the points are too far apart for the given radii, no ellipse of that size can pass through both points. In that case, the SVG spec says the browser scales up rx and ry uniformly (keeping their ratio) until the ellipse is just barely large enough to reach both points. At that minimum size:

  • The two construction ellipses touch at exactly one point — the single possible center.
  • The two points are at opposite ends of a diameter of that ellipse.
  • The large-arc-flag becomes meaningless (both arcs are exactly 180°).

So SVG never fails to draw an arc — if the radii are too small, it silently enlarges them.

What does x-axis-rotation do?

The x-axis-rotation parameter rotates the ellipse around its own center. It defines the tilt of the ellipse's axes relative to the SVG coordinate system's x-axis:

  • At 0°, the ellipse's major axis is horizontal.
  • At 20°, the ellipse's major axis is tilted 20° clockwise from horizontal.

More precisely (see Example 5):

  1. The browser first finds the two possible ellipse centers (using the same geometric method as before — intersecting two ellipses centered on P₁ and P₂).
  2. But now those "construction ellipses" are rotated by 20° before finding intersections.
  3. Each resulting ellipse is tilted 20° from the horizontal around its own center.

Example 1. $\text{x-axis-angle}=0^{\circ} \text{ arc} \lt 180^{\circ}$ anticlockwise

M(60,30)

"d=M 60 30 A 40 20 0 0 0 100 50"

<svg width="320" height="160" viewBox="0 0 160 80" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <marker id="ex1_arrow" markerWidth="6" markerHeight="6" refX="6" refY="3" orient="auto">
        <path d="M 0 0 L 6 3 L 0 6 z" style="fill: red;"/>
      </marker>
    </defs>
    <rect x="0" y="0" width="160" height="80" style="stroke:#ddd; fill:none;"/>
    <use x="0" y="0" href="grids.svg#grid_160x80"/>
    <rect x ="60" y="30" width="40" height="20" style="stroke:#aaa; fill:none;"/>
    <!-- ellipse 1 -->
    <ellipse cx="60" cy="50" rx="40" ry="20"
    style="stroke:#aaa; fill:none;"/>
    <!-- ellipse 2 --> 
    <ellipse cx="100" cy="30" rx="40" ry="20"
    style="stroke:#aaa; fill:none;"/>
    <!-- large-arc-flag = 0 , sweep-flag = 0-->
    <path d="M 60 30 A 40 20 0 0 0 100 50"
			style="stroke:red; fill:none; marker-end:url(#ex1_arrow)"/>
     <text x="59" y="29" style="font-size: 5pt; text-anchor: end;">M(60,30)</text>
 </svg>

Example 2. $\text{x-axis-angle}=0^{\circ}\text{ arc} \lt 180^{\circ}$ clockwise

M(60,30)
d="M 60 30 A 40 20 0 0 1 100 50"
<svg width="320" height="160" viewBox="0 0 160 80" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <marker id="ex2_arrow" markerWidth="6" markerHeight="6" refX="0" refY="3" orient="auto">
        <path d="M 6 0 L 0 3 L 6 6 z" style="fill: red;"/>
      </marker>
    </defs>
   <use x="0" y="0" href="grids.svg#grid_160x80"/>
    <rect x ="60" y="30" width="40" height="20" style="stroke:#aaa; fill:none;"/>
    <!-- ellipse 1 -->
    <ellipse cx="60" cy="50" rx="40" ry="20"
		style="stroke:#ddd; fill:none;"/>
    <!-- ellipse 2 -->
    <ellipse cx="100" cy="30" rx="40" ry="20"
		style="stroke:#ddd; fill:none;"/>
    <!-- large-arc-flag = 0 , sweep-flag = 0-->
    <path d="M 60 30 A 40 20 0 0 1 100 50"
		style="stroke:red; fill:none; marker-start:url(#ex2_arrow)"/>
    <text x="59" y="29" style="font-size: 5pt; text-anchor: end;">M(60,30)</text>
</svg>

Example 3. $\text{x-axis-angle}=0^{\circ}\text{ arc} \ge 180^{\circ}$ anticlockwise

M(60,30)
d="M 60 30 A 40 20 0 1 0 100 50"
 <svg width="320" height="160" viewBox="0 0 160 80" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <marker id="ex3_arrow" markerWidth="6" markerHeight="6" refX="6" refY="3" orient="auto">
         <path d="M 0 0 L 6 3 L 0 6 z" style="fill: red;"/>
       </marker>
     </defs>
     <rect x="0" y="0" width="160" height="80" style="stroke:#ddd; fill:none;"/>
     <use x="0" y="0" href="grids.svg#grid_160x80"/>
     <rect x ="60" y="30" width="40" height="20" style="stroke:#aaa; fill:none;"/>
     <!-- ellipse 1 -->
     <ellipse cx="60" cy="50" rx="40" ry="20"
     style="stroke:#ddd; fill:none;"/>
     <!-- ellipse 2 -->
     <ellipse cx="100" cy="30" rx="40" ry="20"
     style="stroke:#ddd; fill:none;"/>
     <!-- large-arc-flag = 0 , sweep-flag = 0-->
     <path d="M 60 30 A 40 20 0 1 0 100 50"
     style="stroke:red; fill:none;"/>
     <text x="59" y="29" style="font-size: 5pt; text-anchor: end;">M(60,30)</text>
     <!-- invisible path to place arrow marker at (70,70) -->
     <path d="M 40 70 L 70 70 L 100 70" style="stroke:none; fill:none; marker-mid:url(#ex3_arrow)"/>
  </svg>

Example 4. $\text{x-axis-angle}=0^{\circ}\text{ arc} \ge 180^{\circ}$ clockwise

M(60,30)
d="M 60 30 A 40 20 0 1 1 100 50"
<svg width="320" height="160" viewBox="0 0 160 80" xmlns="http://www.w3.org/2000/svg">
    <defs>
       <marker id="ex4_arrow" markerWidth="6" markerHeight="6" refX="6" refY="3" orient="auto">
         <path d="M 0 0 L 6 3 L 0 6 z" style="fill: red;"/>
       </marker>
     </defs>
     <rect x="0" y="0" width="160" height="80" style="stroke:#ddd; fill:none;"/>
	<use x="0" y="0" href="grids.svg#grid_160x80"/>
     <rect x ="60" y="30" width="40" height="20" style="stroke:#aaa; fill:none;"/>
     <!-- ellipse 1 -->
     <ellipse cx="60" cy="50" rx="40" ry="20"
			style="stroke:#ddd; fill:none;"/>
     <!-- ellipse 2 -->
     <ellipse cx="100" cy="30" rx="40" ry="20"
			style="stroke:#ddd; fill:none;"/>
     <!-- large-arc-flag = 0 , sweep-flag = 0-->
     <path d="M 60 30 A 40 20 0 1 1 100 50"
			style="stroke:red; fill:none"/>
     <text x="59" y="29" style="font-size: 5pt; text-anchor: end;" >M(60,30)</text>
      <!-- invisible path to place arrow marker at (70,70) -->
     <path d="M 60 10 L 100 10 L 140 10" style="stroke:none; fill:none; marker-mid:url(#ex4_arrow)"/>
</svg>

Example 5. $\text{x-axis-angle}=20^{\circ}\text{ arc} \ge 180^{\circ}$ clockwise

d="M 60 30 A 40 20 20 1 1 100 50"
<svg width="320" height="160" viewBox="0 0 160 80" xmlns="http://www.w3.org/2000/svg">
   <rect x="0" y="0" width="160" height="80" style="stroke:#ddd; fill:none;"/>
    <use x="0" y="0" href="grids.svg#grid_160x80"/>
    <!-- ellipse 1 -->
    <ellipse cx="60" cy="50" rx="40" ry="20"
    style="stroke:#ddd; fill:none;"/>
    <!-- ellipse 2 -->
    <ellipse cx="100" cy="30" rx="40" ry="20"
    style="stroke:#ddd; fill:none;"/>
    <!-- large-arc-flag = 0 , sweep-flag = 0-->
    <path d="M 60 30 A 40 20 20 1 1 100 50"
    style="stroke:red; fill:none"/>
</svg>

Example 6. Korean flag

 <svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 <!-- top part-->
   <path d="M 10 50 A 20 20 0 1 0 50 50 A 20 20 0 1 1 90 50 A 40 40 0 1 0 10 50"
   style="fill:#aa0000"/>
   <!-- bottom part-->
   <path d="M 10 50 A 20 20 0 1 0 50 50 A 20 20 0 1 1 90 50 A 40 40 0 1 1 10 50"
   style="fill:navy"/>
</svg>