SVG ellipse

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