SVG Ellipse - Coding

SVG Ellipse enables the creation of an ellipse with the help of the <ellipse> element. The <ellipse> element is generally wrapped inside the <SVG> element. While an ellipse looks like a circle, it has different rx and ry values, whereas a circle has a radius that is equal to all its sides or angles. For this, we generally use the stroke width for the stroke width. The cx and cy define the x-axis and y-axis coordinates of the center, respectively.

Example 1: In this example, we will see how to create the ellipse.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>SVG Ellipse</title> 
</head> 
  
<body> 
    <h1 style="color: green; margin-left:50px;"> 
      GeeksforGeeks 
      </h1> 
    <svg width="500" height="500"> 
        <ellipse cx="150" cy="150" 
                 rx="100" ry="50"> 
        </ellipse> 
    </svg> 
</body> 
  
</html>

Output:

Example 2: This example shows how to create an ellipse with a stroke color green and a stroke width with a fill ellipse.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>SVG Ellipse</title> 
</head> 
  
<body> 
    <h1 style="color: green;  
               margin-left:50px;"> 
      GeeksforGeeks 
      </h1> 
  
    <svg width="500" 
         height="500"> 
        <ellipse cx="150" 
                 cy="150"
                 rx="100" 
                 ry="50" 
                 stroke="green" 
                 stroke-width="3" 
                 fill="greenyellow"> 
        </ellipse> 
    </svg> 
</body> 
  
</html>

Output:

Example 3: This example shows how to create two ellipses one above.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>SVG Ellipse</title> 
</head> 
  
<body> 
    <h1 style="color: green; 
               margin-left:50px;"> 
      GeeksforGeeks 
      </h1> 
    <svg width="500" 
         height="500"> 
        <ellipse cx="150" 
                 cy="150"
                 rx="100" 
                 ry="50" 
                 stroke="green" 
                 stroke-width="3" 
                 fill="greenyellow"> 
        </ellipse> 
  
        <ellipse cx="150"
                 cy="100"
                 rx="100" 
                 ry="50"
                 stroke="blue" 
                 stroke-width="3" 
                 fill="blueviolet"> 
        </ellipse> 
    </svg> 
</body> 
  
</html>

Output:

Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML Colors
JavaScript Online Compiler (Editor)
HTML Registration Form
HTML Login Form
HTML h1 to h6 Tag

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	11