Scalable Vector Graphics - Circle

This article explains SVG circles in detail with some simple examples.

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

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.