Animation

Code

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <circle cx="20" cy="50" r="15" fill="red">
    <animate attributeName="cx" from="20" to="180" dur="2s" repeatCount="indefinite"/>
  </circle>
  <rect x="50" y="20" width="40" height="40" fill="blue">
    <animateTransform attributeName="transform" type="rotate"
                      from="0 70 40" to="360 70 40" dur="3s" repeatCount="indefinite"/>
  </rect>
  <rect x="10" y="70" width="20" height="20" fill="green">
    <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite"/>
  </rect>
</svg>

Explanation

SVG supports declarative SMIL animation through the animate, animateTransform, and animateMotion elements. The animate element interpolates a single attribute over time, while animateTransform animates the transform list. The values list and keyTimes enable multi-step animations, and repeatCount controls looping.

More SVG Snippets