From the course: Learning SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Draw a circle

Draw a circle - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Draw a circle

“

- [Instructor] To create circles we use the circle element. In the circle element we first define the coordinates of the circle center using the cx and cy attributes. And then we set the radius of the circle, the radius is the space from the center point of the circle to the edge so radius of 20 for instance will create a circle that has a diameter of 40. In the exercise files for this movie I've added in the same exact code and once again we're using the stroke and fill classes so you can see both the stroke and the fill behind. And when we run this in the browser we get a circle now the circle element is only used for perfect circles like this, and that's because it doesn't have any additional features. If you want a circle that is stretched in some fashion so basically an ellipses you would use the ellipsis element instead. If you want to move the circle around inside the SVG you would change the cx or cy values, so if I change this one to 30 you'll see the circle move to the left…

Contents