Drawing a Circle

Learn how to draw an SVG circle.

We'll cover the following

SVG circle

Let’s explore another important SVG element, the circle. The circle is represented by the <circle> tag in D3.js.

Drawing the circle in D3.js is very easy. Let’s draw an SVG circle in the following code.

Code for drawing circle
Explanation


Let’s dive into an explanation of the above code to better understand how to draw a circle.


    

  • 

    From line 1 to line 5 in the JavaScript tab, we defined the SVG canvas of size 300 by 300 pixels with the red boundary.
    

    • 

  • 

    From line 7 to line 11 in the JavaScript tab, we have created a circle.
    

    • 



We have used the following attributes in defining the circle. Let’s discuss them one by one:


cx: The x-coordinate of the center of the circle relative to the origin.


cy: The y-coordinate of the center of the circle relative to the origin.


r: The radius of the circle.


fill: The function used to give color to the graphical element.


The following illustration will help you in understanding different attributes of the circle and will show the relative position of circle to the origin.