HTML 5

Scalable Vector Graphics - Circle

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.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs