SVG <ellipse>
SVG Ellipse - <ellipse>
The <ellipse> element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
The <ellipse> element has four basic attributes to position and set the
size of the ellipse:
| Attribute | Description |
|---|---|
| rx | Required. The x radius of the ellipse |
| ry | Required. The y radius of the ellipse |
| cx | The x-axis center of the ellipse. Default is 0 |
| cy | The y-axis center of the ellipse. Default is 0 |
An SVG Ellipse
The following example creates an ellipse:
Here is the SVG code:
Example
<svg height="140" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse rx="100" ry="50" cx="120" cy="80"
style="fill:yellow;stroke:green;stroke-width:3" />
</svg>
Try it Yourself »
Code explanation:
- The
rxattribute defines the x (horizontal) radius - The
ryattribute defines the y (vertical) radius - The
cxattribute defines the x-axis center of the ellipse - The
cyattribute defines the y-axis center of the ellipse
Three Ellipses
The following example creates three ellipses on top of each other:
Here is the SVG code:
Example
<svg height="150" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
<ellipse
cx="210" cy="45" rx="170" ry="15" fill="yellow" />
</svg>
Try it Yourself »
Two Ellipses
The following example combines two ellipses (one yellow and one white):
Here is the SVG code:
Example
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="220" ry="30"
fill="yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20"
fill="white" />
</svg>
Try it Yourself »
