Draw an Ellipse with SVG Path Arc Commands
Create ellipses of any size and rotation using arc (A) path commands. Understand the relationship between rx, ry, and x-rotation parameters.
Detailed Explanation
Drawing an Ellipse with Path Arcs
Like a circle, an ellipse requires two arc commands because a single arc cannot close a full 360-degree shape when start and end points are identical.
The Path
M 50,10 A 40,25 0 1,1 50,60 A 40,25 0 1,1 50,10 Z
This draws an ellipse centered approximately at (50, 35) with horizontal radius 40 and vertical radius 25.
Parameter Breakdown
A rx,ry x-rotation large-arc-flag sweep-flag x,y
A 40,25 0 1 1 50,60
| Param | Value | Meaning |
|---|---|---|
| rx | 40 | Horizontal radius |
| ry | 25 | Vertical radius |
| x-rotation | 0 | No tilt |
| large-arc | 1 | Use the larger arc |
| sweep | 1 | Clockwise direction |
Rotated Ellipses
Set x-rotation to tilt the ellipse:
M 50,10 A 40,25 30 1,1 50,60 A 40,25 30 1,1 50,10 Z
A rotation of 30 degrees tilts the ellipse clockwise. This is useful for:
- Orbital paths in space illustrations
- Perspective effects on circular objects
- Decorative design elements
Ellipse vs. Circle
An ellipse is simply a circle with different horizontal and vertical radii. When rx === ry, the arc draws a perfect circle. This means the circle path pattern is a special case of the ellipse pattern.
Responsive Scaling
When placed in an SVG with a viewBox, the ellipse scales proportionally with the container. The ratio between rx and ry is preserved regardless of the rendered size.
Computing the Center
Given the two-arc construction, the center of the ellipse is the midpoint of the start and end points of either arc:
centerX = (startX + endX) / 2 = (50 + 50) / 2 = 50
centerY = (startY + endY) / 2 = (10 + 60) / 2 = 35
Use Case
Ellipse paths are used for loading spinners, orbit animations, oval picture frames, eye shapes in character illustrations, and any design that requires non-circular rounded forms.