SVG Circle

SVG circle

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.

Name Description
cx x-coordinate of circle there is center of the circle.
cy y-coordinate of circle.
r r is radius of circle

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.

Name Description
stroke use to change the border with.
fill use to change the fill color
stroke-width use to modified border width
stroke-dasharray use to modified border shape

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>
  </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> 
  </circle>
  <circle stroke-dasharray="2 3" cx="160" cy="190"  r="120" stroke="#2196f3" stroke-width="3.8" fill="none">
   <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="7s" repeatCount="indefinite"></animate>
  </circle>
  <circle stroke-dasharray="2 3" cx="160" cy="190" r="120" stroke="hotpink" stroke-width="5.8" fill="none">
  <animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="10s" 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>

© 2019, regularcodes.com, All rights reserved