(click anywhere to close)
OPEN MENU

[SVG] Circles & Ellipses

category: Website | course: SVG | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Ellipses

After the rectangle, the friendly circles and ellipses are the obvious basic shapes.

To create a circle, use

<circle cx=”xPos” cy=”yPos” r=”radius” />

Instead of positioning a circle using its top left corner, it’s much more convenient to position it using the centre or midpoint. That’s why we don’t use regular x and y attributes, but cx and cy attributes that define the position of the circle's centre. Furthermore, width and height are the same, which means we use the r attribute instead, to set the radius of the circle. To remind you, the radius is half the width or height.

<svg>
    <circle cx="30" cy="30" r="25"/>
</svg>

Ellipses

To create an ellipse, use

<ellipse cx=”xPos” cy=”yPos” rx=”xRadius” ry=”yRadius” />

As you can see, the only difference is that the radius has been split into two seperate ones: rx, which is the radius in the x-direction, and ry, the radius in the y-direction.

<svg>
    <ellipse cx="40" cy="25" rx="30" ry="15" />
</svg>
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)