Skip to content
Related Articles

Related Articles

HTML SVG <Ellipse>
  • Last Updated : 19 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

The SVG <ellipse> element is used to create an ellipse. The difference between circle and ellipse is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:

Syntax:

<ellipse
   cx="x-axis co-ordinate"
   cy="y-axis co-ordinate"
   
   rx="length" 
   ry="length" >    
</ellipse>

Attributes:

  • cx: x-axis co-ordinate of the center.
  • cy: y-axis co-ordinate of the center.
  • rx: x-axis radius of the ellipse.
  • ry: y-axis radius of the ellipse.

Example:




<html>
   <title>SVG Ellipse</title>
   <body>
      <svg width="400" height="400">
            <ellipse cx="100" cy="100" rx="90" ry="50" 
            stroke="black" stroke-width="2" fill="grey">
                  
            </ellipse>
      </svg>
     
   </body>
</html>

Output:



Example: Change the opacity.




<html>
   <title>SVG Ellipse</title>
   <body>
      <svg width="400" height="400">
            <ellipse cx="100" cy="100" rx="90" ry="50" 
            stroke="black" stroke-width="2" fill="grey"
            opacity="0.5">
                  
            </ellipse>
      </svg>
     
   </body>
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :