SVG Animation

SVG has several build-in approaches to add animation to a drawing, the <animate> and <animateMotion> elements.

The <animate> Element

The <animate> element is used to animate the attributes of an element over time. It must be declared as a child of the element it will animate, i.e.:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" height="200">
  <circle cx="50" cy="50" r="50" fill="cornflowerblue">
    <animate attributeName="r" values="10;50;20;50;10" dur="10s" repeatCount="indefinite"/>
  </circle>
</svg>

Here we have a 10 second duration repeating animation that alters the radius of a circle between a number of different values. We can combine multiple <animate> elements in one parent:

The <animateMotion> Element

The <animateMotion> element moves an element along a path (using the same rules to define a path as the <path> element):

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" height="200">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>