Introduction

Before reading further, read the following articles.
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:
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
Simple circle
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
Circle with different strokes
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
Circle with different strokes only
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
Circle with different dashed strokes only
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
Circle with different
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
Circle with different opacity
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
Circles with different overlaps
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
Circles with half overlapping
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
Output
Want to read more...
Thank you, keep learning and sharing.