SVG Circle Rotation Animation

Simplest possible SVG animation

HTML

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800px" height="800px" viewBox="0 0 800 800"
     version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Note that this is required in order to use xlink in the <use> element. -->
  <title>SVG Circle Animation example</title>
  <desc>Declarative SVG animation for rotating a circle.</desc>
  <g transform="translate(100, 100)"> <!-- Create a Cartesian coordinate system (with the y-axis flipped) for the animated square. That is, place the origin at the center of the 800 x 800 SVG viewport. --> 
    <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>
    <line x1="-20" y1="0" x2="20" y2="0" style="stroke: black;" /> <!-- Represents the x-axis. -->
    <line x1="0" y1="-20" x2="0" y2="20" style="stroke: black;" /> <!-- Represents the y-axis (although up is negative and down is positive). -->  
  </g>
</svg>