SVG Ellipse
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;" > w3wiki </ 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;"> w3wiki </ 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;"> w3wiki </ 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:
Contact Us