Vachmi

The <ellipse> element is a basic SVG shape to draw ellipses based on the coordinates of centre and both radii.

Here is the SVG code to draw an ellipse.

<svg width="200" height="150">
  <ellipse cx="70" cy="50" rx="60" ry="40" style="fill:rgb(100,190,200);" />
</svg>

Code Explanation

• The position of the ellipse is determined by cx and cy attributes. These represent the centre of the ellipse.

• This position is relative to the position of its parent element.

• The rx and ry attribute defines the two radii of the ellipse.

• The CSS fill property defines the fill color of the rectangle

Attributes

cx - The x-axis coordinate of the center of the ellipse

It can accept a length or a percentage as its value. Default Value: 0


cy - The y-axis coordinate of the center of the circle

It can accept a length or a percentage as its value. Default Value: 0


rx - The radius of the ellipse on the x-axis

It can accept a length or percentage as its value. A value less than or equal to zero does not result in any image.


ry - The radius of the ellipse on the y-axis

It can accept a length or percentage as its value. A value less than or equal to zero does not result in any image.