Post

# Scalable Vector Graphics - Circle

Now let's move forward to our current topic.

SVG Circle

The tag <circle> is used to draw the circle with a center point and radius.

It includes cx, cy and r as main attributes that are described as:

• The cx and cy attributes defines the x and y coordinates of the center of the circle. The default center value is (0, 0).
• The r attribute defines the radius of the circle.

Let's see a few examples to understand SVG Circle.

Example 1: Simple circle

1. <html>
2.     <body>
3.         <svg height="500" width="500">
4.             <circle cx="80" cy="80" r="40" fill="#0f0fff";/>
5.             <circle cx="200" cy="80" r="60" fill="#0fffff";/>
6.             <circle cx="350" cy="80" r="80" fill="#ffff00";/>
7.         </svg>
8.     </body>
9. </html>
Output

Example 2: Circle with multiple strokes.
1. <html>
2.     <body>
3.         <svg height="500" width="500">
4.             <circle cx="80" cy="80" r="60" fill="tomato" stroke="#0f0fff" stroke-width="3"/>
5.             <circle cx="210" cy="80" r="60" fill="tomato" stroke="#0f0fff" stroke-width="5"/>
6.             <circle cx="340" cy="80" r="60" fill="tomato" stroke="#0f0fff" stroke-width="8"/>
7.         </svg>
8.     </body>
9. </html>
Output

Example 3: Circle with multiple dashed strokes.
1. <html>
2.     <body>
3.         <svg height="500" width="500">
4.             <circle cx="80" cy="80" r="60" fill="#0fff0f" stroke="#0f000f" stroke-width="3" stroke-dasharray="10 3";/>
5.             <circle cx="210" cy="80" r="60" fill="#0fff0f" stroke="#0f000f" stroke-width="5" stroke-dasharray="10 5";/>
6.             <circle cx="340" cy="80" r="60" fill="#0fff0f" stroke="#0f000f" stroke-width="8" stroke-dasharray="10 7";/>
7.         </svg>
8.     </body>
9. </html>
Output

Example 4: Circle with multiple strokes only.
1. <html>
2.     <body>
3.         <svg height="500" width="500">
4.             <circle cx="80" cy="90" r="40" fill="none" stroke="#0f0f0f" stroke-width="3";/>
5.             <circle cx="190" cy="90" r="60" fill="none" stroke="#00ff00" stroke-width="5";/>
6.             <circle cx="340" cy="90" r="80" fill="none" stroke="tomato" stroke-width="8";/>
7.         </svg>
8.     </body>
9. </html>
Output

The following produces a circle with multiple dashed strokes only.
1. <html>
2.     <body>
3.         <svg height="500" width="500">
4.             <circle cx="80" cy="90" r="40" fill="none" stroke="#00cc00" stroke-width="3" stroke-dasharray="10 2";/>
5.             <circle cx="190" cy="90" r="60" fill="none" stroke="#cc0000" stroke-width="5" stroke-dasharray="10 5";/>
6.             <circle cx="340" cy="90" r="80" fill="none" stroke="#0c0c0c" stroke-width="8" stroke-dasharray="10 8";/>
7.         </svg>
8.     </body>
9. </html>
Output

The following produces a circle overlapped with multiple strokes/dashed strokes only.
1. <html>
2.     <body>
3.         <svg height="500" width="500">
4.             <circle cx="100" cy="100" r="30" fill="none" stroke="#c0ff00" stroke-width="3";/>
5.             <circle cx="100" cy="100" r="60" fill="none" stroke="#0000cc" stroke-width="5";/>
6.             <circle cx="100" cy="100" r="90" fill="none" stroke="#066600" stroke-width="8";/>
7.             <circle cx="300" cy="100" r="30" fill="none" stroke="#00cc00" stroke-width="3" stroke-dasharray="10 2";/>
8.             <circle cx="300" cy="100" r="60" fill="none" stroke="#cc0000" stroke-width="5" stroke-dasharray="10 5";/>
9.             <circle cx="300" cy="100" r="90" fill="none" stroke="#660066" stroke-width="8" stroke-dasharray="10 8";/>
10.         </svg>
11.     </body>
12. </html>
Output

Example 5: Circle with different opacity.
1. <html>
2.     <body>
3.         <svg height="600" width="600">
4.             <circle cx="80" cy="80" r="60" fill="red" stroke="green" stroke-width="5" fill-opacity="0.5"/>
5.             <text x="10" y="160" fill="black">With fill-opacity</text>
6.             <circle cx="220" cy="80" r="60" fill="red" stroke="green" stroke-width="5" stroke-opacity="0.5"/>
7.             <text x="150" y="160" fill="black">With stroke-opacity</text>
8.             <circle cx="360" cy="80" r="60" fill="red" stroke="green" stroke-width="5" fill-opacity="0.5" stroke-opacity="0.5"/>
9.             <text x="300" y="160" fill="black">With fill-opacity & stroke-opacity</text>
10.         </svg>
11.     </body>
12. </html>
Output

Example 6: Circles with multiple overlaps.

Circles with complete overlapping.
1. <html>
2.     <body>
3.         <svg height="500" width="500">
4.             <circle cx="100" cy="100" r="90" fill="tomato" stroke="blue" stroke-width="2";/>
5.             <circle cx="100" cy="100" r="60" fill="lightblue" stroke="green" stroke-width="5";/>
6.             <circle cx="100" cy="100" r="30" fill="yellow" stroke="black" stroke-width="8";/>
7.             <circle cx="300" cy="100" r="90" fill="cyan" stroke="grey" stroke-width="2" stroke-dasharray="10 2";/>
8.             <circle cx="300" cy="100" r="60" fill="tomato" stroke="#cc0000" stroke-width="5" stroke-dasharray="10 5";/>
9.             <circle cx="300" cy="100" r="30" fill="green" stroke="#660066" stroke-width="8" stroke-dasharray="10 8";/>
10.         </svg>
11.     </body>
12. </html>
Output

The following produces circles that half overlap.
1. <html>
2.     <body>
3.         <svg height="500" width="500">
4.             <circle cx="80" cy="100" r="50" fill="tomato" stroke="blue" stroke-width="3";/>
5.             <circle cx="150" cy="100" r="50" fill="lightblue" stroke="green" stroke-width="5";/>
6.             <circle cx="230" cy="100" r="50" fill="yellow" stroke="black" stroke-width="8";/>
7.         </svg>
8.         <br>
9.             <svg>
10.                 <circle cx="150" cy="60" r="50" fill="cyan" stroke="grey" stroke-width="5" stroke-dasharray="10 5";/>
11.                 <circle cx="80" cy="60" r="50" fill="tomato" stroke="#cc0000" stroke-width="3" stroke-dasharray="10 2";/>
12.                 <circle cx="230" cy="60" r="50" fill="green" stroke="#660066" stroke-width="8" stroke-dasharray="10 8";/>
13.             </svg>
14.         </br>
15.     </body>
16. </html>
Output

Example 7
1. <html>
2.     <body>
3.         <svg height="1200" width="1200">
4.             <circle cx="50" cy="50" r="20" fill="tomato" stroke="blue" stroke-width="1";/>
5.             <circle cx="470" cy="50" r="20" fill="tomato" stroke="blue" stroke-width="1";/>
6.             <circle cx="70" cy="70" r="30" fill="lightblue" stroke="green" stroke-width="2";/>
7.             <circle cx="450" cy="70" r="30" fill="lightblue" stroke="green" stroke-width="2";/>
8.             <circle cx="100" cy="100" r="40" fill="yellow" stroke="black" stroke-width="3";/>
9.             <circle cx="140" cy="130" r="50" fill="lightgreen" stroke="blue" stroke-width="4";/>
10.             <circle cx="420" cy="100" r="40" fill="yellow" stroke="black" stroke-width="3";/>
11.             <circle cx="190" cy="170" r="60" fill="cyan" stroke="black" stroke-width="5";/>
12.             <circle cx="380" cy="130" r="50" fill="lightgreen" stroke="blue" stroke-width="4";/>
13.             <circle cx="330" cy="175" r="60" fill="cyan" stroke="black" stroke-width="5";/>
14.             <circle cx="260" cy="200" r="70" fill="pink" stroke="black" stroke-width="6";/>
15.         </svg>
16.     </body>
17. </html>
Output

Thank you, keep learning and sharing.

Similar Articles
"