What do cx, cy, rx, and ry mean in an SVG ellipse?

cx and cy define the center coordinates. rx is the horizontal radius (x-axis) and ry is the vertical radius (y-axis). If rx or ry is missing or 0, the ellipse won't render.

What’s the difference between and ?

A circle has one radius (r) and is perfectly round. An ellipse has two radii: rx and ry, so it can be stretched wider or taller.

SVG Ellipse

Q: How do I draw an ellipse in SVG?

Use the element inside an . Set cx and cy for the center point, rx for the horizontal radius, and ry for the vertical radius. Example: .

Q: Can I style an SVG ellipse with CSS?

Yes. You can use fill, stroke, and stroke-width as attributes or via CSS selectors. CSS also enables hover states, transitions, and animations.

Q: Why is my SVG ellipse not visible?

Common causes: rx or ry is 0/missing, the ellipse is outside the viewBox, fill is set to none without a stroke, or the parent SVG has zero width/height.

Beginner

⏱️ 5 min read

📚 Updated: Aug 2025

🎯 1 Code Example

Basic Shape

SVG Ellipse tutorial illustration showing the cx, cy, rx, and ry attributes

What You’ll Learn

How to create and customize SVG ellipses in HTML using the <ellipse> element. Ellipses are like stretched circles and are useful for smooth, rounded visuals in icons, diagrams, and data visualisations.

You’ll learn the syntax, the four core attributes (cx, cy, rx, ry), styling with fill, stroke, and stroke-width, plus a complete example, live preview, and best practices.

⚡ Quick Reference — SVG Ellipse Attributes

cx number

x-coordinate of the centre

cy number

y-coordinate of the centre

rx number

Horizontal radius (x-axis)

ry number

Vertical radius (y-axis)

fill color

Inside fill colour

stroke color

Outline colour

stroke-width number

Outline thickness in pixels

Basic Syntax

<svg>
  <ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius" />
</svg>

Complete HTML Example

This example draws a green ellipse with a black border, centered at (100, 75) with radii rx=80 and ry=50 inside a 200×150 SVG canvas:

index.html

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="150">
  <ellipse cx="100" cy="75" rx="80" ry="50" fill="green" stroke="black" stroke-width="2" />
</svg>

</body>
</html>

Try It Yourself

👀 Live Preview — Ellipse Variations

See how changing rx and ry (and styling) affects the shape:

Wide ellipse

Tall ellipse

Stroke only

Fill + stroke

Semi-transparent

Dashed border

🧠 How It Works

Create an SVG canvas

Place the ellipse inside an <svg>. Use width/height or a viewBox so the browser knows the coordinate space.

SVG canvas

Position the center (cx, cy)

cx and cy set the centre point. Like all SVG coordinates, (0, 0) is at the top-left.

Position

Set two radii (rx, ry)

rx defines half the width and ry defines half the height. If either value is missing or 0, the ellipse won’t render.

Size

Style with fill and stroke

Use fill for the inside and stroke/stroke-width for the outline. Set fill=\"none\" for outline-only ellipses.

Styling

A smooth, scalable ellipse

Ellipses are vector shapes, so they scale cleanly for icons, UI, and illustrations without pixelation.

✅

Use Cases

Ellipses are especially useful when you need a circle-like shape that is stretched horizontally or vertically:

📊 Charts

Scatterplot points, bubbles, and decorative markers.

🎯 UI Pills

Tag and badge shapes (often used as backgrounds).

👀 Highlights

Glow and highlight layers behind icons/text.

🎨 Illustrations

Shadows, faces/eyes, and soft rounded elements.

⏳ Loading UI

Elliptical rings and progress frames.

🧮 Education

Geometry diagrams and coordinate-space demos.

💡 Best Practices

Do

Use a viewBox for responsive SVGs
Add role=\"img\" and aria-label for meaningful graphics
Keep rx and ry inside the canvas to avoid clipping
Use CSS classes for consistent styling across multiple ellipses
Prefer fill=\"none\" with a stroke for outline-only visuals

Don’t

Omit rx or ry — the ellipse becomes invisible
Assume an ellipse is a circle (a circle needs <circle> with r)
Place the center too close to the edge if you want the full ellipse visible
Use fixed pixel sizes when you need a responsive icon
Set fill=\"none\" without a stroke

Key Takeaways

An ellipse uses two radii

rx ry

Position it with cx and cy

Style it with fill and stroke settings

If rx or ry is 0, nothing renders

Use a viewBox for scalable graphics

❓ Frequently Asked Questions

How do I draw an ellipse in SVG?

Use <ellipse> inside an <svg>. Set cx and cy for the centre and rx/ry for the radii. Example: <ellipse cx="100" cy="75" rx="80" ry="50" />.

What do cx, cy, rx, and ry mean?

cx/cy set the centre point. rx is the horizontal radius and ry is the vertical radius. If either radius is missing or 0, the ellipse won’t render.

What’s the difference between <circle> and <ellipse>?

A <circle> uses one radius (r) and is always round. An <ellipse> uses two radii (rx, ry) so it can be stretched wider or taller.

Can I style an SVG ellipse with CSS?

Yes. Use fill, stroke, and stroke-width directly on the element or via CSS selectors. CSS also enables hover states and animations.

Why is my SVG ellipse not visible?

Check that rx and ry are not 0, your ellipse is within the SVG bounds (or viewBox), and you’re not using fill="none" without a stroke. Also ensure the parent <svg> has a visible size.

Level Up Your SVG Skills!

Next, explore filters to add shadows, blur, and pro-level effects to your shapes.

SVG Filters →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

7 people found this page helpful

SVG Circle SVG Filters