SVG Ellipse
Learn how the <ellipse> element draws an oval shape from a center point (cx, cy) and two independent radii, rx and ry.
Drawing Ovals with <ellipse>
The <ellipse> element is nearly identical to <circle>, except it replaces the single radius r with two independent radii: rx for the horizontal reach and ry for the vertical reach. This lets you draw ovals, not just perfectly round circles.
Two Radii: rx and ry
rx controls how far the ellipse extends to the left and right of its center, while ry controls how far it extends up and down. When rx and ry are equal, the ellipse is visually indistinguishable from a circle with that same radius.
When to Use Ellipse vs. Circle
Reach for <ellipse> whenever a shape needs to be wider than it is tall, or taller than it is wide: soft drop shadows under an object, eyes and pupils in an illustration, speech-bubble bodies, or a squashed circle used to fake perspective on a flat surface.
- cx and cy default to 0 if they are omitted
- Setting rx and ry to the same value produces a perfect circle
- rx controls the horizontal reach; ry controls the vertical reach, independently of each other
- Ellipses are ideal for shadows, speech bubbles, eyes, and squashed or stretched circular shapes
- Like other shapes, <ellipse> accepts fill, stroke, and opacity attributes
Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160'>
<ellipse cx='120' cy='80' rx='100' ry='60' fill='#06b6d4' />
</svg>
</body>
</html>Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160'>
<ellipse cx='120' cy='130' rx='80' ry='15' fill='#000000' fill-opacity='0.2' />
<rect x='90' y='30' width='60' height='80' fill='#f97316' />
</svg>
</body>
</html>Example
<!DOCTYPE html>
<html>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'>
<ellipse cx='100' cy='60' rx='90' ry='50' fill='#ffffff' stroke='#1e293b' stroke-width='4' />
<circle cx='100' cy='60' r='25' fill='#1e293b' />
</svg>
</body>
</html>Exercise: SVG Ellipse
What structurally distinguishes <ellipse> from <circle>?
