SVG Ellipse Element

The SVG <ellipse> element is used to create an ellipse. The difference between circle and ellipse 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:

Syntax:

<ellipse
 cx="x-axis co-ordinate"
 cy="y-axis co-ordinate"
 
 rx="length" 
 ry="length" > 
</ellipse>

Attributes:

• cx: x-axis co-ordinate of the center.
• cy: y-axis co-ordinate of the center.
• rx: x-axis radius of the ellipse.
• ry: y-axis radius of the ellipse.

Example:

Output:

Example: Change the opacity.

Output: