Interactive
SVG Animations

0. Foundations

SVG is a markup language, just like HTML. But while HTML has elements for describing documents like p and h1, SVG has elements for describing images like rect and circle.

<circle cx="30" cy="30" r="15">
<rect x="25" y="35" width="40" height="30">

Try changing the positions of the circle and rectangle on the canvas and notice how it changes the values in the code!

In this chapter, we'll dive deeper into how to draw various things with SVGs and take a look at how its coordinate system works.

1. Your First Animation

Many SVG attributes are also CSS properties, which means you can animate them the same way you would any other CSS property. There are just a few little quirks you need to be mindful of.

.lid {
  transform: rotate(30deg);
  transform-origin: 55px 30px;
}

In this chapter, we'll make our first SVG animation by taking a closer look at how CSS interacts with SVG and a few techniques for chaining animations together.

2. Animating the Unanimatable

CSS doesn't let you animate every single SVG attribute. To animate those attributes that CSS doesn't support, we'll use SMIL—the "built-in" way of animating SVGs.

<polyline
  points="10,50 30,70 50,30 70,50"
  fill="none"
  stroke="currentColor"
  stroke-linejoin="round"
  stroke-linecap="round"
>
  <animate
    attributeName="points"
    to="10,50 30,30 50,70 70,50"
    dur="1s"
  />
</polyline>

In this chapter, we'll explore how to use SMIL and how we can integrate it in modern codebases.

3. Paths and Path Animations

The SVG path element is the most powerful element in SVG. Using its mysterious d attribute, the path element can mold into every other SVG shape and everything in between.

In this chapter, we'll take apart the d attribute, explore the world of path commands and, of course, take a look at how to animate them.

4. Advanced SVG Details

SVGs start to really shine when you dive into its weirder features. In this chapter, we'll take a look at gradients, masks, and the downright magical world of SVG filters, before looking at ways to animate SVGs when SMIL falls short.

<defs>
  <mask id="circle-mask">
    <circle cx="25" cy="25" r="15" />
    <circle cx="55" cy="55" r="15" />
  </mask>
</defs>
<rect mask="url(#circle-mask)" fill="gray" />