SVG Ellipse

Last Updated:

How to Draw an Ellipse?

The <ellipse> SVG element that draws ellipses based on a center coordinate, and both their x and y radius.

In this example, we will draw an ellipse with x-axis radius of 100 and y-axis radius of 50 by using <ellipse> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg ellipse{ fill:green; stroke:red; stroke-width:3; } </style> </head> <body> <svg height="140" width="500"> <ellipse cx="120" cy="60" rx="100" ry="50" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
cx Specifies the x position of the ellipse.
cy Specifies the y position of the ellipse.
rx Specifies the radius of the ellipse on the x axis.
ry Specifies the radius of the ellipse on the y axis.

Share this Page

Meet the Author