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 element, which has the following attributes:

• 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>