In previous tutorial we learned how to create a rectangle shape using SVG. In this tutorial, we are going learn how to create a circle using SVG element.
So let’s get started.
To create a circle, first, we create a blank SVG document - this is going to be our canvas to draw things on it.
Next, we provide
height to the SVG element. I am setting the
Our, SVG element is ready however we do not see anything in the output above. Let’s give SVG element a background color just to make it visible on the screen.
Awesome, our SVG element is ready and we are ready to create circle shape inside it.
SVG comes with basic shape elements and
circle is one of them.
circle accepts following geometry properties:
Let’s use the
circle shape element along with
r properties to create a circle shape
cx="100"will shift the circle to right on x-axis
cy="100"will shift the circle from top on y-axis
r="50"will set the radius of circle
Wow, we can see the circle element in the output above with the default fill color of black. If we want the circle to have the same size as of SVG element, we can adjust the
height properties accordingly.
I don’t like the black background color so let’s change that.
To change the background color of the rectangle shape we need to use
How about giving it a slight green color
Circle looks great!!
I hope you enjoyed the tutorial.
circleshape can be used to create circle
circleradius can be set using
circleposition on canvas can be set using
circleelement background color can be changed by setting