<ellipse />

Objective: Learn to draw, position and style an ellipse.

4.1 The ellipse element

<ellipse cx="0" cy="0" rx="40" ry="80"></ellipse>

<ellipse> ... </ellipse> The full ellipse element with open and closing tags.

<ellipse /> Because this does not contain any content it can also be  used as a self-closing element.

4.2 Construction Attributes

The ellipse has four layout attributes you must know and remember:

cx Ellipse center position on the x-axis

cy Ellipse center position on the y-axis

rx The x radius of the ellipse (left and right radius)

ry The y radius of the ellipse (up and down radius)

4.3 Style Attributes

This lesson introduces new style properties:

fill-opacity="0.5" Makes the object fill transparent. The value can be any number between 0 and 1. 0 is fully transparent, 1 is no transparency.

stroke-opacity="0.7" Makes the object strock transparent using the same 0-1 value system as above.

Example 1 ellipse XML

This first example has a larger ry value (vertical radius) making the ellipse vertical. The ry radius is set to 190px giving a total diameter of 380px. The viewBox is 400px tall and the stroke-width adds 5px to the height (2.5px top and bottom). If you change the value of ry to 200px you will see the ellipse is clipped top and bottom.

<ellipse 
    cx="200" 
    cy="200" 
    rx="100" 
    ry="190"
    stroke="black" 
    stroke-width="5" 
    fill="none">
</ellipse>

This second example has a larger rx value (horizontal radius) making the ellipse horizontal.

<ellipse 
    cx="200" 
    cy="200" 
    rx="190"
    ry="100" 
    stroke="red" 
    stroke-width="5" 
    fill="none">
</ellipse>

 SVG Editor

4.4  Exercises

1. Create a single ellipse in the center of the viewBox with 150px rx radius and 100px ry radius.
2. Create a single ellipse in the center of the viewBox with 100px x radius and 150px y radius. (Change the radius's to see and learn how the two radius properties work with each other)
3. Create four ellipses, one in each quadrant of the viewBox with different x and y radius's. Give each ellipse different fill-opacity.
4. Create a set of ellipses from the center with radius's increasing by 20px from 100px to 200px (5 ellipses). Try changing the height and width of the ellipses as well. Make the stroke of each ellipse a different colour.
5. Create an  ellipse centered on the 0,0 coordinate. Note only a quarter of the ellipse will be able to be seen as the remainder goes out of the viewbox. Change the ry and rx values to 400 and 200 to understand their controlling behaviour.
6. Experiment with the stroke, stroke-opacity, stroke-width, fill and fill-opacity attributes.

For Cheaters

Here is the example SVG for those who are too lazy to type the SVG. View SVG Markup

<!--1. Ellipse with 150x and 100y radius-->
<ellipse cx="200" cy="200" rx="150" ry="100" style="stroke:rgb(0, 255, 0); stroke-width:4; fill:rgb(255, 255, 255);"></ellipse>
<!--2. Ellipse with 150x and 100y radius-->
<ellipse cx="200" cy="200" rx="100" ry="150" style="stroke:rgb(0, 0, 255); stroke-width:4; fill:rgb(255, 255, 255);"></ellipse>
<!--3. ellipse each quadrant different sizes-->
<ellipse cx="100" cy="100" rx="60" ry="90" stroke="rgb(0, 150, 100)" stroke-width="10" stroke-opacity="0.2" fill="rgb(0,100,150)" fill-opacity="0.8"></ellipse>
<ellipse cx="300" cy="100" rx="90" ry="60" stroke="rgb(0, 150, 100)" stroke-width="4"  stroke-opacity="0.4" fill="rgb(0,100,150)" fill-opacity="0.6"></ellipse>
<ellipse cx="100" cy="300" rx="90" ry="40" stroke="rgb(0, 150, 100)" stroke-width="4"  stroke-opacity="0.6" fill="rgb(0,100,150)" fill-opacity="0.4"></ellipse>
<ellipse cx="300" cy="300" rx="40" ry="80" stroke="rgb(0, 150, 100)" stroke-width="4"  stroke-opacity="0.8" fill="rgb(0,100,150)" fill-opacity="0.2"></ellipse>
<!--4. Concentric Ellipses-->
<ellipse cx="200" cy="200" rx="40" ry="100" style="stroke:rgb(0, 0, 0); stroke-width:1; fill:none;"></ellipse>
<ellipse cx="200" cy="200" rx="60" ry="120" style="stroke:rgb(0, 0, 0); stroke-width:2; fill:none;"></ellipse>
<ellipse cx="200" cy="200" rx="80" ry="140" style="stroke:rgb(0, 0, 0); stroke-width:3; fill:none;"></ellipse>
<ellipse cx="200" cy="200" rx="100" ry="160" style="stroke:rgb(0, 0, 0); stroke-width:4; fill:none;"></ellipse>
<ellipse cx="200" cy="200" rx="120" ry="180" style="stroke:rgb(0, 0, 0); stroke-width:5; fill:none;"></ellipse>
<ellipse cx="200" cy="200" rx="140" ry="200" style="stroke:rgb(0, 0, 0); stroke-width:6; fill:none;"></ellipse>
<!--5. Ellipse Centered on zero -->
<ellipse cx="0" cy="0" ry="400" rx="200" style="stroke:magenta; 
    stroke-width:4; fill:none;"></ellipse>