Introduction

Before reading further, read the following articles.
Now let’s discuss SVG Ellipse.

SVG Ellipse

The tag <ellipse> is used here to create an ellipse with a center point and two radii. As we can see that an ellipse is closely related to a circle as it also has a center point and a radius, but there are some differences that an ellipse has two radii x and y that differs from each other while circle has both radii x and y equal or considered as only one radius due to equality.
In other words, an ellipse is a circle that does not have equal height and width, as well as its radius in x and y directions, are different.
Syntax:
  1. <svg height="200" width="300">
  2. <ellipse cx="150" cy="70" rx="80" ry="40" style="fill:red" />
  3. </svg>
Now let’s take a simple example to understand it properly.
Example 1
Regular ellipse:
  1. <html>
  2. <body>
  3. <svg height="150" width="550">
  4. <ellipse cx="110" cy="80" rx="100" ry="50" style="fill:cyan;" />
  5. <ellipse cx="300" cy="80" rx="80" ry="40" style="fill:lime;" />
  6. <ellipse cx="450" cy="80" rx="60" ry="30" style="fill:pink;" />
  7. </svg>
  8. </body>
  9. </html>
Output:
ellipse is centered
As we can see that the ellipse is centered in cx, cy like the circle. But the radius in the x and y directions are specified by two attributes, not by only one rx or ry attribute. As we can also see that, the rx attribute has a higher value than the ry attribute, making the ellipse wider than it is tall. Setting the rx and ry attributes the same number would result in a regular circle.
Example 2
Vertical ellipse.
  1. <html>
  2. <body>
  3. <svg height="300" width="500">
  4. <ellipse cx="60" cy="130" rx="30" ry="70" style="fill:grey;" />
  5. <ellipse cx="160" cy="130" rx="40" ry="90" style="fill:tomato;" />
  6. <ellipse cx="280" cy="130" rx="50" ry="110" style="fill:lightgreen;" />
  7. </svg>
  8. </body>
  9. </html>
Output:
attribute
Here, the ry attribute has a higher value than the rx attribute, making the ellipse taller than it is wide.
Example 3
Ellipse having different strokes/dashed strokes.
Ellipse having simple and different stroke values:
  1. <html>
  2. <body>
  3. <svg height="150" width="550">
  4. <ellipse cx="110" cy="80" rx="100" ry="50" style="fill:red; stroke:black; stroke-width:2" />
  5. <ellipse cx="300" cy="80" rx="80" ry="40" style="fill:orange; stroke:blue; stroke-width:4" />
  6. <ellipse cx="450" cy="80" rx="60" ry="30" style="fill:yellow; stroke:purple; stroke-width:7" />
  7. </svg>
  8. </body>
  9. </html>
Output:
strokes
Ellipse having dashed strokes with different stroke values:
  1. <html>
  2. <body>
  3. <svg height="150" width="550">
  4. <ellipse cx="110" cy="80" rx="100" ry="50" style="fill:lightgreen; stroke:green; stroke-width:2; stroke-dasharray: 10 2;" />
  5. <ellipse cx="300" cy="80" rx="80" ry="40" style="fill:lightblue; stroke:blue; stroke-width:4; stroke-dasharray: 10 4;" />
  6. <ellipse cx="455" cy="80" rx="60" ry="30" style="fill:tomato; stroke:red; stroke-width:7; stroke-dasharray: 10 6;" />
  7. </svg>
  8. </body>
  9. </html>
Output:
height
  1. <html>
  2. <body>
  3. <svg height="300" width="300">
  4. <ellipse cx="110" cy="220" rx="50" ry="15" style="fill:tomato; stroke:red; stroke-width:3;" />
  5. <ellipse cx="110" cy="180" rx="100" ry="40" style="fill:tomato; stroke:red; stroke-width:3;" />
  6. <ellipse cx="110" cy="100" rx="20" ry="80" style="fill:yellow; stroke:orange; stroke-width:6; stroke-dasharray: 10 5;" />
  7. </svg>
  8. </body>
  9. </html>
Output:
filling
Example 4
Ellipse with no filling.
  1. <html>
  2. <body>
  3. <svg height="300" width="600">
  4. <ellipse cx="60" cy="110" rx="30" ry="100" style="fill:none; stroke:red; stroke-width:6;stroke-dasharray: 10 5;" />
  5. <ellipse cx="200" cy="110" rx="80" ry="30" style="fill:none; stroke:black; stroke-width:4;" />
  6. <ellipse cx="340" cy="110" rx="30" ry="80" style="fill:none; stroke:blue; stroke-width:3; stroke-dasharray: 10 5;" />
  7. </svg>
  8. </body>
  9. </html>
Output:
Ellipse with no filling
Example 5
Ellipse with overlapping.
  1. <html>
  2. <body>
  3. <svg height="400" width="1000">
  4. <ellipse cx="180" cy="120" rx="150" ry="30" style="fill:lime; stroke:green; stroke-width:3;" />
  5. <ellipse cx="150" cy="90" rx="120" ry="25" style="fill:tomato" />
  6. <ellipse cx="120" cy="65" rx="90" ry="20" style="fill:cyan; stroke:blue; stroke-width:3; stroke-dasharray:10 5;" />
  7. <ellipse cx="100" cy="45" rx="70" ry="15" style="fill:grey" />
  8. <ellipse cx="80" cy="25" rx="50" ry="10" style="fill:orange; stroke:red; stroke-width:3;" />
  9. <ellipse cx="500" cy="120" rx="150" ry="30" style="fill:orange; stroke:red; stroke-width:3;" />
  10. <ellipse cx="500" cy="90" rx="120" ry="25" style="fill:grey" />
  11. <ellipse cx="500" cy="65" rx="90" ry="20" style="fill:cyan; stroke:blue; stroke-width:3; stroke-dasharray:10 5;" />
  12. <ellipse cx="500" cy="45" rx="70" ry="15" style="fill:tomato" />
  13. <ellipse cx="500" cy="25" rx="50" ry="10" style="fill:lime; stroke:green; stroke-width:3;" />
  14. </svg>
  15. </body>
  16. </html>
Output:
overlapping
  1. <html>
  2. <body>
  3. <svg height="400" width="1000">
  4. <ellipse cx="70" cy="50" rx="50" ry="30" style="stroke:green; stroke-width: 3; fill:lightgreen;"/>
  5. <ellipse cx="80" cy="60" rx="50" ry="30" style="stroke: #ffff00; stroke-width: 5; stroke-dasharray:10 5; fill: none;"/>
  6. <ellipse cx="320" cy="60" rx="50" ry="40" style="fill:lightblue; stroke:blue; stroke-width:3;" />
  7. <ellipse cx="200" cy="60" rx="50" ry="30" style="fill:none; stroke:red; stroke-width:3;" />
  8. <ellipse cx="250" cy="60" rx="50" ry="30" style="fill:none; stroke:green; stroke-width:3; stroke-dasharray:10 5;" />
  9. <ellipse cx="390" cy="60" rx="50" ry="35" style="fill:none; stroke:orange; stroke-width:3; stroke-dasharray:10 5;" />
  10. <ellipse cx="440" cy="60" rx="50" ry="30" style="fill:none; stroke:cyan; stroke-width:3;" />
  11. </svg>
  12. </body>
  13. </html>
Output:
Ellipse
Example 6
Ellipse with opacity.
  1. <html>
  2. <body>
  3. <svg height="400" width="600">
  4. <ellipse cx="100" cy="80" rx="80" ry="40" style="fill:blue; stroke:blue; stroke-width:3; fill-opacity:0.3; stroke-dasharray:10 5;" />
  5. <ellipse cx="240" cy="80" rx="30" ry="70" style="fill:red; stroke:black; stroke-width:3; fill-opacity:0.5; stroke-opacity:0.5;" />
  6. <ellipse cx="380" cy="80" rx="80" ry="40" style="fill:green; stroke:green; stroke-width:3; stroke-dasharray:10 5; fill-opacity:0.7;" />
  7. </svg>
  8. </body>
  9. </html>
Output:
Ellipse with opacity
Example 7
Two or more ellipse with different centers and radii.
  1. <html>
  2. <body>
  3. <svg height="400" width="1000">
  4. <ellipse cx="180" cy="100" rx="150" ry="80" style="fill:blue; stroke:blue; stroke-width:3; fill-opacity:0.3; stroke-dasharray:10 5;" />
  5. <ellipse cx="155" cy="100" rx="120" ry="50" style="fill:red; stroke:black; stroke-width:3; fill-opacity:0.5; stroke-opacity:0.5;" />
  6. <ellipse cx="190" cy="100" rx="80" ry="40" style="fill:lime; stroke:blue; stroke-width:3; stroke-dasharray:10 5;" />
  7. <ellipse cx="200" cy="100" rx="50" ry="20" style="fill:orange; stroke:red; stroke-width:3; stroke-dasharray:10 5; fill-opacity:0.7;" />
  8. <ellipse cx="520" cy="100" rx="180" ry="70" style="fill:lime; stroke:blue; stroke-width:3; fill-opacity:0.3; stroke-dasharray:10 5;" />
  9. <ellipse cx="500" cy="100" rx="160" ry="60" style="fill:tomato; stroke:black; stroke-width:3; fill-opacity:0.5; stroke-opacity:0.5;" />
  10. <ellipse cx="480" cy="100" rx="140" ry="40" style="fill:cyan; stroke:black; stroke-width:3; fill-opacity:0.7;" />
  11. <ellipse cx="440" cy="100" rx="100" ry="30" style="fill:yellow; stroke:red; stroke-width:3; fill-opacity:0.7;" />
  12. </svg>
  13. </body>
  14. </html>
Output:
Output
Want to read more.
Thank you, keep learning and sharing.