Skip to main content

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.
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 ellipse
<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 Multi-ellipse
<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 ellipse animation
<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 ellipse animation
<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 ellipse animate

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





Comment

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