Animating SVG for Fun (and profit?)

In 2024, I made a lot SVG animations like the one below for Hello Interview, a software engineering interview prep platform. A few people have since asked me how I created those animations, so I decided to write a guide, which I've split into two parts.

In Part 1 (this part), we'll get a feel for the the types of animations we can create with SVG. We'll showcase what's possible and the components involved in creating an animation, without diving into any code.

We'll cover the code in Part 2 [coming soon!], as well as best practices for structuring React components to create multi-step animations like the one above.

The Very Basics of SVG

SVG is a markup language for drawing shapes on web pages. You tell the browser what shapes to draw, where to draw them, along with other optional details like the color, size, and opacity - and the browser goes off and does it for you.

Here's an example of SVG code that draws a rectangle. We specify the location and appearance of the rectangle via attributes, which are listed as key="value" pairs. The attributes with white backgrounds are interactive, so please tinker with them to see what they do.

Note that the background grid lines are not part of the SVG definition - they're just there to help you visualize the coordinate system.

<svg width="500" height="500">
    <rect
        x="100"
        y="100"
        rx="3"
        width=""
        height=""
        fill="#a2a77f#8ea77F#a7987f"
        stroke="#8a9063#739063#908063"
        stroke-width=""
    />
</svg>

To learn more about the cool things you can create with SVG, check out MDN's SVG tutorial.

Our First Animation

We can create our first SVG animation by changing the value of an attribute over time. For example, by gradually increasing the width attribute, we can animate a growing rectangle.

<svg width="600" height="600">
  <rect
    fill="#B8746C"
    x="50"
    y="170"
    width="260"
    height="260"
    stroke-width="4"
    stroke="#A35A4D"
    rx="4"
  />
</svg>

Towards More Realistic Animations

In the above animation, the width attribute increases at a constant, linear rate, which we can see from its plot above.

But motion in real life isn't linear. To create a more realistic animation, we want something that starts off slow, gradually picks up speed in the middle, and slows down again near the end. We can achieve that affect by using easings.

In the animation below, we apply a cubic easing function to the width attribute. Note how the shape of the curve in the plot below the rectangle matches our description of how more realistic motion behaves.

<svg width="600" height="600">
  <rect
    fill="#B8746C"
    x="50"
    y="170"
    width="260"
    height="260"
    stroke-width="4"
    stroke="#A35A4D"
    rx="4"
  />
</svg>

Here's the linear and the cubic easing functions shown side by side for easier comparison.

To learn more about easing functions, check out this resource.

Animating Movement

Easing functions are a lot of fun!

In the animation below, we make the rectangle move from left to right by changing its x attribute.

We've also injected some personality by applying an elastic easing function. This particular easing function causes the rectangle to oscillate slightly backwards in the beginning, as if it's gathering momentum before moving forward, e.g. someone crouching as they prepare to sprint. It also causes the rectangle to overshoot its final position before stopping, making it feel like its coming to a sudden stop.

<svg width="600" height="600">
  <rect
    fill="#B8746C"
    x="75"
    y="200"
    width="100"
    height="200"
    stroke-width="4"
    stroke="#A35A4D"
    rx="4"
  />
</svg>

The <g> Element

When creating SVG animations, you'll make frequent use of the <g> or grouping element, which is used to group SVG elements together. Any attributes applied to a <g> element are inherited by its children, which provides a convenient way to animate multiple elements at once.

In the animation below, we use a grouping element to group a <rect> and <text> together. By animating the opacity attribute of that <g> element, we can make the rectangle and text fade in together.

<svg width="600" height="600">
  <g
    opacity="0"
    transform="translate(150,150)"
  >
    <rect
      fill="#B8746C"
      x="0"
      y="0"
      width="300"
      height="300"
      stroke-width="4"
      stroke="#A35A4D"
      rx="4"
    />
    <text
      x="150"
      y="150"
      font-size="134"
      fill="white"
      dominant-baseline="middle"
      text-anchor="middle"
      fontFamily="monospace"
    >
      3
    </text>
  </g>
</svg>

Changing Values

Let's say we want to animate a value change, such as turning the 3 below into a 5.

To do so, we can have an SVG element for both the new (5) and the old (3) value. The opacity of the new element goes from 0 to 1, while the opacity of the old element goes from 1 to 0.

<svg width="600" height="600">
  <g
    transform="translate(150,150)"
    font-size="134"
    fill="white"
    dominant-baseline="middle"
    text-anchor="middle"
    fontFamily="monospace"
  >
    <rect ... />
    <text
      opacity="0"
      x="150"
      y="150"
    >
      5
    </text>
    <text
      opacity="1"
      x="150"
      y="150"
    >
      3
    </text>
  </g>
</svg>