Chapter 6: SVG Ellipse

What is an Ellipse really?

An ellipse is basically a squashed or stretched circle.

• A circle = special case of ellipse where horizontal radius = vertical radius
• An ellipse = circle that has been stretched or compressed in one direction (or both)

So <ellipse> is more general than <circle>. You can make circles with <ellipse>, but you cannot make true ellipses with <circle>.

The 4 core attributes of <ellipse>

Key points:

• rx controls horizontal stretch/squash
• ry controls vertical stretch/squash
• If rx = ry → you get a perfect circle (same as <circle r=”…”>)
• Center is still (cx, cy) — very convenient!

Here is how the ellipse is built from center + two radii:

(If you see a diagram with arrows showing rx horizontal and ry vertical from center — that’s exactly it.)

Example 1 – Basic ellipse (horizontal oval)

Result: Wide, flattened orange oval — like a horizontal egg or a rugby ball lying flat.

Example 2 – Vertical ellipse (tall oval)

Result: Tall, narrow blue oval — like a standing egg or portrait orientation balloon.

Example 3 – Circle made with ellipse (just to prove the point)

So yes — <ellipse rx=”r” ry=”r”> = <circle r=”r”>

Example 4 – Ellipse with stroke, different fill & stroke opacity

Example 5 – Many ellipses — bubbles / eggs / abstract art feel

Example 6 – Rounded rectangle using <ellipse> (creative trick)

You can fake soft rounded corners or capsule shapes by overlapping ellipses + rectangles — but most people just use <rect rx ry> for that nowadays.

Still, fun to see:

(Modern advice: prefer <rect rx=”50″ ry=”50″> — cleaner code.)

Quick comparison table: <circle> vs <ellipse>

When should you choose <ellipse> over <circle>?

• You need an oval / egg / stretched shape → <ellipse>
• You need a perfect round shape → <circle> (shorter, clearer)
• You’re making eyes in a cartoon character → often <ellipse> for realistic almond shape
• You’re making horizontal/vertical pills → <ellipse> or <rect rx ry>

Common beginner mistakes with <ellipse>

• Forgetting rxorry → shape doesn’t appear
• Setting rx=0 or ry=0 → degenerates to a line (or nothing)
• Thinking rx is diameter (no — it’s radius — half the width)
• Placing cx, cy wrong → ellipse gets cut off at edge

Okay — mini practice for you:

1. Make a yellow egg shape (slightly taller than wide)
2. Make three nested ellipses with decreasing size and different colors (like a target)
3. Create a simple smiling face using one big ellipse (face) + two small tilted ellipses (eyes)

Paste your code anytime — I’ll give feedback like we’re pair-programming together 😄

Any part still confusing? Just say the word — we’ll zoom in until it’s super clear! 🚀