SVG Circle

An SVG circle is a graphic element in the SVG (Scalable Vector Graphics) format that represents a circle shape. It can be used to create simple or complex graphics, including logos, icons, and illustrations.

To create an SVG circle, you can use the <circle> element and specify the attributes for its position, radius, fill, and stroke. Here's an example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" />
</svg>

In this example, the circle is positioned at coordinates (50,50) with a radius of 40 units. The fill attribute sets the color of the circle to red, while the stroke and stroke-width attributes define the color and width of the circle's border.

You can adjust these attributes to create different sizes, colors, and styles of SVG circles, and combine them with other SVG shapes and elements to create more complex graphics.

A <circle> element are used to draw a circle. if we are draw a circle we are need three components x-coordinate, y-coordinate and radius of circle. in similarly way svg used to draw a circle using this attributes (cx,cy,r).

<circle cx="x-coordinate"
        cy="y-coordinate" 
        r="radius">
</circle>

Main attributes.

For example

<?xml version="1.0"?>
<svg width="300" height="200" 
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="160" cy="90"  r="70" stroke="red" stroke-width="5.8" fill="none">
  </circle>
</svg>

Other attributes.

Example

<?xml version="1.0"?>
<?xml version="1.0"?>
<svg width="300" height="200"  
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle stroke-dasharray="2 3" cx="160" cy="90"  r="70" stroke="#ff5722" stroke-width="5.8" fill="pink"></circle>
</svg>

SVG Circle Animation

<?xml version="1.0"?>
<svg width="300" height="340"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle stroke-dasharray="2 3" cx="160" cy="190"  r="120" stroke="blue" stroke-width="5.8" fill="none">
   <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="5s" repeatCount="indefinite"></animate>
    <animate attributeType="XML" attributeName="stroke-dasharray" from="10" to="120"
        dur="5s" repeatCount="indefinite"></animate>
  </circle>
   <circle stroke-dasharray="2 3" cx="160" cy="190" r="120" stroke="chartreuse" stroke-width="5.8" fill="none">
  <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="6s" repeatCount="indefinite"></animate> 
     <animate attributeType="XML" attributeName="stroke-dasharray" from="10" to="120"
        dur="5s" repeatCount="indefinite"></animate>
  </circle>
  <circle stroke-dasharray="2 3" cx="160" cy="190"  r="120" stroke="salmon" stroke-width="6 " fill="none">
   <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="7s" repeatCount="indefinite"></animate>
    <animate attributeType="XML" attributeName="stroke-dasharray" from="10" to="120"
        dur="15s" repeatCount="indefinite"></animate>
  </circle>
  <circle stroke-dasharray="2 3" cx="160" cy="190" r="120" stroke="hotpink" stroke-width="7" fill="none">
  <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="120s" repeatCount="indefinite"></animate>
    
  </circle>
</svg>

Another example

<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle stroke-dasharray="30" cx="140" cy="80" r="30" fill="none" stroke="#9C27B0" stroke-width="5">  <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 140 80"
            to="360 140 80"
            dur="8s"
            repeatCount="indefinite"></animateTransform></circle>
  
  <circle stroke-dasharray="50" cx="140" cy="80" r="50" fill="none" stroke="hotpink" stroke-width="5">  <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 140 80"
            to="0 140 80"
            dur="18s"hotpink
            repeatCount="indefinite"></animateTransform></circle>
    <circle stroke-dasharray="20" cx="140" cy="80" r="20" fill="none" stroke="sandybrown" stroke-width="5">  <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 140 80"
            to="0 140 80"
            dur="60s"
            repeatCount="indefinite"></animateTransform></circle>
  
      <circle  cx="140" cy="80" r="5" fill="none" stroke="darkgray" stroke-width="5">  </circle>
</svg>

Divide SVG Circle Into N equal parts

Some time we are need to separate a circle into N equal parts, we can divide circle into N parts by using lines. Here assume that max partition of circle are 360 and minimum is 2.

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
  <input type="number" max="360" min="2" value="5" id="quantity" name="quantity">
  <br>
<?xml version="1.0"?>
<svg width="300" height="200" 
     xmlns="http://www.w3.org/2000/svg">
  <circle  cx="160" cy="90"  r="70" stroke="skyblue" stroke-width="5.8" fill="whitesmoke">
  </circle>
  <text x=20 y=20 id="chartFlow1"></text> 

  <g id="Container"></g>
  
       <!-- JQuery-->
    <script type="text/JavaScript">
      <![CDATA[
     regularCodes=[]   
     regularCodes.makeSVG=function (tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs) {
        el.setAttribute(k, attrs[k]);
    }
    return el;
}

        
     $(function(){
        divide();
     });
      function divide(){
          var size=$("#quantity").val();
        $("#Container").text("");
        if(size>360 ||size<2) return;
        var angle=360/size,
            element,
            midx=160,
            midy=90;
      
        for(var i=1; i<=size;i++){
          console.log(i);
            element=regularCodes.makeSVG("line",{
              x1:160,
              y1:90,
              x2:160,
              y2:20,
              "stroke":"gray",
              "transform":"rotate("+(angle*i)+" "+midx+" "+midy+")"
              
            });
           $("#Container").append(element);
         }
    
   
      }
    $("#quantity").on("keyup mouseup",function(){
        divide();
       });
      ]]>

    </script>
</svg>
 
  </body>
</html>