SVG Circle Rotation Animation

Simplest possible SVG animation

by Muthuraman B

HTML

<svg> 
  <g>
    <circle cx="0" cy="0" r="40" style="fill:rgba(0,0,0,0);stroke:black; stroke-width:30; stroke-dasharray:18, 18;">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="5s" repeatCount="indefinite" />
    </circle>
  </g>
</svg>

CSS

body, svg {width:100%;height:100px;}