SVG ellipse
An SVG (Scalable Vector Graphics) ellipse is a graphical element that can be defined using SVG markup language. It is a 2D geometric shape that represents an oval with a fixed aspect ratio.
To create an SVG ellipse, you need to use the
- cx and cy: The x and y coordinates of the ellipse's center.
- rx and ry: The radii of the ellipse, where rx is the horizontal radius and ry is the vertical radius.

A <ellipse> element are used to draw a ellipse.
<ellipse cx="x-coordinates"
cy="y-coordinates"
rx="radius"
ry="height"></ellipse>
For example 1

<svg height="160" width="300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<ellipse cx="150" cy="50" rx="100" ry="25" stroke-width="3" stroke="#673ab775" fill="#00968875"></ellipse>
</svg>
Example 2

<svg height="260" width="300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<ellipse cx="150" cy="150" rx="100" ry="25" stroke="#673ab775" fill="#00968875"></ellipse>
<ellipse cx="150" cy="150" rx="25" ry="100" stroke="#3f51b596" fill="#ff5722a8"></ellipse>
<ellipse transform="rotate(45 150 150)" cx="150" cy="150" rx="25" ry="100" stroke="#00968875" fill="#673ab775"></ellipse>
<ellipse transform="rotate(135 150 150)" cx="150" cy="150" rx="25" ry="100" stroke="#ff5722a8" fill="#b53f7285"></ellipse>
</svg>
SVG Ellipse Animation
hear given few basic example to animation of SVG ellipse
Example 1

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height='120'>
<ellipse cx="50" cy="70" rx="15" ry="20" fill="GRAY">
<animate attributeName="ry" values="50;1;50" begin="0s" dur="2s" repeatCount="indefinite"/>
<animate attributeName="fill" values="navajowhite;brown;#ff08b3;#245dff;#9c27b0" begin="0s" dur="2s" repeatCount="indefinite"/>
</ellipse>
</svg>
Example 2

<svg height="260" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<ellipse stroke-dasharray="100" transform="rotate(135 150 150)" cx="150" cy="150" rx="25" ry="100" stroke="#ff5722a8" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s" repeatCount="10"></animate>
</ellipse>
<ellipse stroke-dasharray="100" cx="150" cy="150" rx="100" ry="25" stroke="#673ab775" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s" repeatCount="10"></animate>
</ellipse>
<ellipse stroke-dasharray="100" cx="150" cy="150" rx="25" ry="100" stroke="#3f51b596" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s" repeatCount="10"></animate>
</ellipse>
<ellipse stroke-dasharray="100" transform="rotate(45 150 150)" cx="150" cy="150" rx="25" ry="100" stroke="#00968875" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s" repeatCount="10"></animate>
</ellipse>
<ellipse stroke-dasharray="10 10" cx="150" cy="150" rx="25" ry="25" stroke="#00968875" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="19s" repeatCount="10"></animate>
</ellipse>
</svg>
Example 3

<svg height="260" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g stroke-width="2px">
<ellipse stroke-dasharray="100" transform="rotate(135 150 150)" cx="150" cy="150" rx="25" ry="100" stroke="#ff5722a8" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s" repeatCount="indefinite"></animate>
</ellipse>
<ellipse stroke-dasharray="100" cx="150" cy="150" rx="100" ry="25" stroke="#673ab775" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s" repeatCount="indefinite"></animate>
</ellipse>
<ellipse stroke-dasharray="100" cx="150" cy="150" rx="25" ry="100" stroke="#3f51b596" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s" repeatCount="indefinite"></animate>
</ellipse>
<ellipse stroke-dasharray="100" transform="rotate(45 150 150)" cx="150" cy="150" rx="25" ry="100" stroke="#00968875" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s" repeatCount="indefinite"></animate>
</ellipse>
<ellipse stroke-dasharray="10 10" cx="150" cy="150" rx="25" ry="25" stroke="#00968875" fill="none">
<animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="19s" repeatCount="indefinite"></animate>
</ellipse>
<animateTransform
attributeName="transform"
type="rotate"
from="0 150 150"
to="360 150 150"
dur="12s"
repeatCount="indefinite"></animateTransform>
</g>
</svg>
Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.
New Comment