Scalable Vector Graphics - Circle

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:
  • 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
  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.