(click anywhere to close)

# [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)