SVG Ellipse
Last Updated :
30 Nov, 2023
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:
Share your thoughts in the comments
Please Login to comment...