Chapter 7: SVG Ellipse
SVG Ellipse means using the <ellipse> tag inside SVG to draw an oval shape (not perfectly round like a circle, but stretched or squished). It’s the big brother/sister of <circle> — everything you learned about circles works here, but with two different radii: one for horizontal (x) and one for vertical (y).
1. Quick Difference: <circle> vs <ellipse>
| Feature | <circle> | <ellipse> |
|---|---|---|
| Shape | Perfect circle (round) | Oval / stretched circle |
| Radius | One value: r (same all around) | Two values: rx (horizontal) + ry (vertical) |
| When to use | Balls, dots, eyes, buttons | Eggs, eyes (almond shape), leaves, stadiums, tilted rings |
| Code similarity | Almost same attributes | Same styling + animation tricks |
If rx = ry, then <ellipse> becomes exactly like <circle>! So ellipse can do everything a circle can — and more.
2. Basic Syntax of <ellipse>
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ellipse cx="..." <!-- Center X (horizontal position) --> cy="..." <!-- Center Y (vertical position) --> rx="..." <!-- Horizontal radius (x-direction) – REQUIRED --> ry="..." <!-- Vertical radius (y-direction) – REQUIRED --> fill="..." <!-- Inside color --> stroke="..." <!-- Border color --> stroke-width="..." /> |
- Self-closing tag (/>)
- Must be inside <svg>…</svg>
- rx and ry are required — forget them = no ellipse shows!
- cx and cy default to 0 (top-left corner)
- All units are in the SVG coordinate system (usually pixels if viewBox matches)
3. Your First SVG Ellipse (Copy-Paste This Now!)
Save as ellipse.html:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Ellipse Basics</title> </head> <body> <h1>Simple Blue Oval</h1> <svg width="400" height="300" viewBox="0 0 400 300" style="border:1px solid gray;"> <!-- Basic ellipse centered --> <ellipse cx="200" cy="150" rx="150" ry="80" fill="skyblue" stroke="darkblue" stroke-width="10" /> </svg> </body> </html> |
What you see: A wide, flattened blue oval (like a horizontal egg) with thick dark border.
Breakdown:
- cx=”200″ cy=”150″ → center in middle of 400×300 SVG
- rx=”150″ → stretches 150 units left + right (total width = 300)
- ry=”80″ → only 80 units up + down (total height = 160) → makes it oval
- fill = inside color, stroke = outline
Zoom in — still perfectly sharp!
4. All Important Attributes (Full Notes Style)
| Attribute | Meaning | Required? | Default | Example values | Notes |
|---|---|---|---|---|---|
| cx | Center horizontal position | No | 0 | 100, 50%, 200 | Like circle’s cx |
| cy | Center vertical position | No | 0 | 120, 150 | Like circle’s cy |
| rx | Horizontal radius (left-right stretch) | Yes | — | 100, 50, 120px | If rx=0 → flat line |
| ry | Vertical radius (up-down stretch) | Yes | — | 60, 90 | If ry=0 → flat line |
| fill | Inside color | No | black | lime, #ff69b4, none | none = see-through |
| stroke | Outline color | No | none | black, purple | No outline if missing |
| stroke-width | Outline thickness | No | 1 | 8, 5 | In user units |
| opacity | Transparency (0–1) | No | 1 | 0.7 | Whole shape |
| stroke-dasharray | Dashed outline pattern | No | — | “10 5” | Dash-gap pattern |
5. More Real-World Examples (Try Them!)
Example 1: Vertical Oval (Tall & Thin)
|
0 1 2 3 4 5 6 |
<ellipse cx="100" cy="100" rx="40" ry="90" fill="pink" stroke="red" stroke-width="6"/> |
→ Like a vertical egg or almond eye
Example 2: Almost Circle (rx ≈ ry)
|
0 1 2 3 4 5 6 |
<ellipse cx="120" cy="120" rx="70" ry="68" fill="yellow" stroke="orange" stroke-width="4"/> |
→ Looks like circle, but tiny difference makes it slightly oval
Example 3: Dashed Border Ring
|
0 1 2 3 4 5 6 7 8 |
<svg viewBox="0 0 200 200" width="200" height="200"> <ellipse cx="100" cy="100" rx="90" ry="60" fill="none" stroke="green" stroke-width="12" stroke-dasharray="15 10"/> </svg> |
→ Hollow dashed oval (great for highlights or paths)
Example 4: Gradient + Hover (Fun One!)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> .my-ellipse:hover { fill: orange; ry: 100; } /* grows taller on hover */ </style> <svg width="300" height="200" viewBox="0 0 300 200"> <defs> <linearGradient id="grad"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="purple"/> </linearGradient> </defs> <ellipse class="my-ellipse" cx="150" cy="100" rx="120" ry="70" fill="url(#grad)" stroke="black" stroke-width="5"/> </svg> |
Hover → color changes + stretches vertically!
6. Teacher’s Tips (Hyderabad Exam/Freelance Style 😄)
- Use <ellipse> when shape needs different width vs height (eyes in cartoon faces, leaves, stadium top-view, tilted rings)
- For perfect circles → better use <circle> (simpler, one r instead of two)
- Always add viewBox → makes ellipse responsive on mobile/website
- Common mistake: Forget rx or ry → invisible! Or set one to 0 → becomes flat line
- In animations (CSS/JS): animate rx/ry to make pulsing/breathing effect
- Job tip: Many UI designers use ellipses for profile pics masks, badge backgrounds, or custom loaders
Understood ellipse completely? Now tell me — want to see an eye made with ellipse + circle? Or animated oval loader? Or tilted ellipse (with transform rotate)? Or full comparison with rounded rect? Just say the word — we keep going! 🚀
