SVG Drawing Ellipse

Table Of Contents

SVG Drawing Ellipse

In our previous post we have learnt What SVG is and how we can add SVG to HTML. If you didn’t read that post click on the above Previous button or simply click here. Now today we will draw some stunning graphics on a web page by using SVG element.

Drawing Ellipse

To draw an ellipse on our web page, we use svg and ellipse elements. Ellipse pretty much looks like a circle, the difference is that the radius of ellipse x and y differs from each other, while a circle has equal x and y radius.

Below in an example, let’s write a code to create an ellipse. We also gonna make our ellipse stylish by filling it with a color.

Example

<!DOCTYPE html>
<html>
<head>
  <title> Draw Ellipse </title>
</head>
<body>

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:green;stroke:black;stroke-width:3" />
</svg>

</body>
</html>

Copy the Code and Run it Here

Code Explanation

The cx and cy attributes define the x and y coordinates of the center of the ellipse. The attributes rx and ry defines the horizontal and vertical radius respectively. Attribute style is used to style an ellipse, we can fill it with any color and style the border of an ellipse. In an above example we have fill an ellipse with green color and style it’s border with black color.

You can also change the color of an ellipse or create any new graphic on our Free Online HTML Editor.

Drawing Multiple Ellipse

Let’s make our coding journey more interesting by creating multiple ellipses. Like this:

Draw Multiple Ellipses

In an example below, there is a code to create multiple ellipse as shown above.

<!DOCTYPE html>
<html>
<head> 
  <title> Draw Multiple Ellipses </title>
</head> 
<body>

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:orange" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:powderblue" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

</body>
</html>

Copy the Code and Run it Here

Next

Related Posts

What is SVG

SVG Circle HTML

HTML Canvas

Add JavaScript to HTML

SVG | Drawing Ellipse – crus4