How to create shape-shifting SVG animations

Learn simple shape-shifting techniques for animating SVGs! These animations can be used to create dynamic apps, like this Svelte site of our favorite winter soups.

When building websites, I love using SVGs for their unwavering crispness and smaller file sizes. Since SVG code can also be easily updated, SVGs are also great for creating dynamic animated experiences.

In this tutorial, we’ll walk through my approach to creating shape-shifting SVG animations — starting with simple JS + CSS animation to manipulating complex shapes as seen in a soupy Svelte application example.

Shifting Circles with JS + CSS

Coding an SVG circle

Coding simple SVGs from scratch can help us understand options for modification, & thus animation.

If you’re new to SVGs, check out the code for this simple circle. Click “HTML” in the upper left to see the rendered code:

With some simple SVG code, we’ve created a circle with a defined position, radius, and blue fill color. It looks nice, but can we liven it up a bit?

Manipulating our circle with CSS & JS

Let’s play around with how this circle looks! Try adjusting the circle’s color and size using the fill and r (radius) properties.

In the example below, I’ve changed the fill from blue to red and the r property (radius) from 100 to 50.

Annnddd….. it’s a smaller red circle! Now that we know we can manipulate these values, let’s use JavaScript to make them come alive.

The following JavaScript code iterates over the “circleInfo” array and updates our SVG circle with the next set of radius & fill values each second (1000ms).

let index = 0;
// Circle properties to loop through
let circleInfo = [
  {
    radius: 100,
    fill: "blue",
  },
  {
    radius: 75,
    fill: "purple",
  },
  {
    radius: 50,
    fill: "red",
  }
];
// On a 1 second (1000ms) interval, update the circle to use the next properties
setInterval(() => {
  index = (index + 1)%(circleInfo.length)
  const newCircleProps = circleInfo[index];
  document.getElementById("circle").setAttribute("fill", newCircleProps.fill)
  document.getElementById("circle").setAttribute("r", newCircleProps.radius)
}, 1000)

By adding “transition: all 0.2s ease;” to the circle in the CSS file, we can make the color and radius transition smooth. Woohoo! See the full animated results below:

Animating more complex shapes (paths)

Hopefully you now feel confident in manipulating simple shapes like circles! But what if you have more complex SVG designs that you’d like to animate?

We can use the same principles — updating an SVG’s properties and using CSS to make the transition smooth — to animate more complex SVG shapes.

Design tools like Figma, Sketch (both paid), or Boxy (free) allow you to create and export SVG images. In the examples below, I’m using Sketch, but any tool that allows you to export your designs as SVGs will work.

Animating SVG paths

Using an SVG-capable design application, create a graphic using the “vector” tool. Try utilizing different “point” (vertex) types, such as straight or curved:

There are likely good rules for this written somewhere, but through trial and error I found that SVGs with the same number of points and the same order of point types could be animated smoothly from one to the other. The location and size/direction of the curve (if curved type) can change.

Here are a couple examples of changes that will / will not allow smooth animation. My general recommendation is to just create an image, then move the points (& curve directions/sizes of curved points) around without deleting any points or changing a point’s type (e.g. from curved to straight).

If you export your SVG images and take a look at the code, you’ll see that you’ve generated a path with a long d property — the numeric version of your points, with their positions & curves! Just like we did with the circle, we can iterate through a list of path data (in this case d and fill) to change the shape and color of our SVG:

Using these techniques in a website

Now that you know these techniques, you can apply them to any creative endeavor that your heart desires and that can use some SVG animations! 🙂

I used both the circle and path update techniques to create a soup website in Svelte, displaying favorite winter soups for each of my coworkers.

We’ll explore a couple components below, but you can view the full repository here: https://github.com/emikjackson/we-like-soup

SVG path animation on an interval in Svelte (morphing soup spoons)

Code for soup spoon SVG animation

Just like the path animation technique shown in the clouds example above, we can create an array of path properties ( d and fill for both spoon & the spoon’s inner shadow) to rotate through on a timed interval.

Since we’re using Svelte, we can simply pass the currently indexed properties to our SVG directly, rather than using a function to find the elements and calling an update for each property.

SVG circle and path animation through changing props (soup bowl + spoon)

Code for soup bowl SVG animation

For the shape-shifting soup bowl, broth, and spoon in the scrolling section of the site, I use both the circle and path update techniques.

Instead of updating on a timed interval, we can accept the information about each SVG’s color & fill as component properties. These are passed from the parent component SoupScroller.svelte , which determines the soup information to pass based on the current scroll index.

The swirling toppings don’t have any inner-SVG shape-shifting applied, but are animated by rotating and adjusting the scale and opacity when created or removed.

Try it yourself!

I hope this tutorial has been helpful in understanding a few fun animation possibilities with SVGs. Happy SVG-ing! 🙂