Scalable Vector Graphics

Introduction

Before reading further, read the following articles.

Now let's move forward to our current topic.

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 define 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

Output

Example 2: Circle with multiple strokes.

<html>
<body>
<svg height="500" width="500">
<circle cx="80" cy="80" r="60" fill="tomato" stroke="#0f0fff" stroke-width="3"/>
<circle cx="210" cy="80" r="60" fill="tomato" stroke="#0f0fff" stroke-width="5"/>
<circle cx="340" cy="80" r="60" fill="tomato" stroke="#0f0fff" stroke-width="8"/>
</svg>
</body>
</html>

Output

Example 3: Circle with multiple dashed strokes.

<html>
<body>
<svg height="500" width="500">
<circle cx="80" cy="80" r="60" fill="#0fff0f" stroke="#0f000f" stroke-width="3" stroke-dasharray="10 3";/>
<circle cx="210" cy="80" r="60" fill="#0fff0f" stroke="#0f000f" stroke-width="5" stroke-dasharray="10 5";/>
<circle cx="340" cy="80" r="60" fill="#0fff0f" stroke="#0f000f" stroke-width="8" stroke-dasharray="10 7";/>
</svg>
</body>
</html>

Output

Example 4: Circle with multiple strokes only.

<html>
<body>
<svg height="500" width="500">
<circle cx="80" cy="90" r="40" fill="none" stroke="#0f0f0f" stroke-width="3";/>
<circle cx="190" cy="90" r="60" fill="none" stroke="#00ff00" stroke-width="5";/>
<circle cx="340" cy="90" r="80" fill="none" stroke="tomato" stroke-width="8";/>
</svg>
</body>
</html>

Output

The following produces a circle with multiple dashed strokes only.

<html>
<body>
<svg height="500" width="500">
<circle cx="80" cy="90" r="40" fill="none" stroke="#00cc00" stroke-width="3" stroke-dasharray="10 2";/>
<circle cx="190" cy="90" r="60" fill="none" stroke="#cc0000" stroke-width="5" stroke-dasharray="10 5";/>
<circle cx="340" cy="90" r="80" fill="none" stroke="#0c0c0c" stroke-width="8" stroke-dasharray="10 8";/>
</svg>
</body>
</html>

Output

The following produces a circle overlapped with multiple strokes/dashed strokes only.

<html>
<body>
<svg height="500" width="500">
<circle cx="100" cy="100" r="30" fill="none" stroke="#c0ff00" stroke-width="3";/>
<circle cx="100" cy="100" r="60" fill="none" stroke="#0000cc" stroke-width="5";/>
<circle cx="100" cy="100" r="90" fill="none" stroke="#066600" stroke-width="8";/>
<circle cx="300" cy="100" r="30" fill="none" stroke="#00cc00" stroke-width="3" stroke-dasharray="10 2";/>
<circle cx="300" cy="100" r="60" fill="none" stroke="#cc0000" stroke-width="5" stroke-dasharray="10 5";/>
<circle cx="300" cy="100" r="90" fill="none" stroke="#660066" stroke-width="8" stroke-dasharray="10 8";/>
</svg>
</body>
</html>

Output

Example 5: Circle with different opacity.

<html>
<body>
<svg height="600" width="600">
<circle cx="80" cy="80" r="60" fill="red" stroke="green" stroke-width="5" fill-opacity="0.5"/>
<text x="10" y="160" fill="black">With fill-opacity</text>
<circle cx="220" cy="80" r="60" fill="red" stroke="green" stroke-width="5" stroke-opacity="0.5"/>
<text x="150" y="160" fill="black">With stroke-opacity</text>
<circle cx="360" cy="80" r="60" fill="red" stroke="green" stroke-width="5" fill-opacity="0.5" stroke-opacity="0.5"/>
<text x="300" y="160" fill="black">With fill-opacity & stroke-opacity</text>
</svg>
</body>
</html>

Output

Example 6: Circles with multiple overlaps.

Circles with complete overlapping.

<html>
<body>
<svg height="500" width="500">
<circle cx="100" cy="100" r="90" fill="tomato" stroke="blue" stroke-width="2";/>
<circle cx="100" cy="100" r="60" fill="lightblue" stroke="green" stroke-width="5";/>
<circle cx="100" cy="100" r="30" fill="yellow" stroke="black" stroke-width="8";/>
<circle cx="300" cy="100" r="90" fill="cyan" stroke="grey" stroke-width="2" stroke-dasharray="10 2";/>
<circle cx="300" cy="100" r="60" fill="tomato" stroke="#cc0000" stroke-width="5" stroke-dasharray="10 5";/>
<circle cx="300" cy="100" r="30" fill="green" stroke="#660066" stroke-width="8" stroke-dasharray="10 8";/>
</svg>
</body>
</html>

Output

The following produces circles that half overlap.

<html>
<body>
<svg height="500" width="500">
<circle cx="80" cy="100" r="50" fill="tomato" stroke="blue" stroke-width="3";/>
<circle cx="150" cy="100" r="50" fill="lightblue" stroke="green" stroke-width="5";/>
<circle cx="230" cy="100" r="50" fill="yellow" stroke="black" stroke-width="8";/>
</svg>
<br>
<svg>
<circle cx="150" cy="60" r="50" fill="cyan" stroke="grey" stroke-width="5" stroke-dasharray="10 5";/>
<circle cx="80" cy="60" r="50" fill="tomato" stroke="#cc0000" stroke-width="3" stroke-dasharray="10 2";/>
<circle cx="230" cy="60" r="50" fill="green" stroke="#660066" stroke-width="8" stroke-dasharray="10 8";/>
</svg>
</br>
</body>
</html>

Output

Example 7

<html>
<body>
<svg height="1200" width="1200">
<circle cx="50" cy="50" r="20" fill="tomato" stroke="blue" stroke-width="1";/>
<circle cx="470" cy="50" r="20" fill="tomato" stroke="blue" stroke-width="1";/>
<circle cx="70" cy="70" r="30" fill="lightblue" stroke="green" stroke-width="2";/>
<circle cx="450" cy="70" r="30" fill="lightblue" stroke="green" stroke-width="2";/>
<circle cx="100" cy="100" r="40" fill="yellow" stroke="black" stroke-width="3";/>
<circle cx="140" cy="130" r="50" fill="lightgreen" stroke="blue" stroke-width="4";/>
<circle cx="420" cy="100" r="40" fill="yellow" stroke="black" stroke-width="3";/>
<circle cx="190" cy="170" r="60" fill="cyan" stroke="black" stroke-width="5";/>
<circle cx="380" cy="130" r="50" fill="lightgreen" stroke="blue" stroke-width="4";/>
<circle cx="330" cy="175" r="60" fill="cyan" stroke="black" stroke-width="5";/>
<circle cx="260" cy="200" r="70" fill="pink" stroke="black" stroke-width="6";/>
</svg>
</body>
</html>

Output

Want to read more...

Thank you, keep learning and sharing.

18 Comments

Join the conversation! Your thoughts help the community grow.

Gopi Chand11y ago
Thank you so much every one :)
Gowtham Rajamanickam11y ago
great
- Gopi Chand11y ago
  Thank you :)
Gowtham Rajamanickam11y ago
wow..
- Gopi Chand11y ago
  Thanks
Sibeesh Venu11y ago
Nice Share
- Gopi Chand11y ago
  Thanks Sibeesh Venu
Debasis Saha11y ago
Nice article..
- Gopi Chand11y ago
  Thank you Debasis Saha
Gopi Chand11y ago
Very glad to here...but please don't call me sir as I am not senior among you all... :)
Rakesh11y ago
Good Explain Sir
- Gopi Chand11y ago
  Thank you Rakesh
Nilesh Jadav11y ago
This is very nice article sir, Thank you for sharing
- Gopi Chand11y ago
  Thanks and welcome dear
Pankaj Kumar Choudhary11y ago
Really Nice Article Sir.........
- Gopi Chand11y ago
  Thanks a lot Pankaj
Sharad11y ago
really cool...
- Gopi Chand11y ago
  Thanks Sharad :)