My new ebook  Design Systems for Developers  is here! Start reading

Svg

Introduction to Scalable Vector Graphics (SVG): Animations

Last Updated: 2018-12-18

In the previous article, I walked through creating a basic SVG. In this article, I will pick up where we left off and explore SVG animations.

Whereas bitmap/raster graphics are composed of individual pixels, vector graphics are composed of individual shapes.

This provides for the ability for vector graphics to scale without loss of quality as they can render clearly at any resolution.

There is another benefit, however, to SVGs being composed of individual shapes. Each shape can be styled as we desire.

Since each shape in a SVG can be styled, this gives us the ability to create animated graphics on the web.

Animating SVGs: A Basic Example

scalable-vector-graphics-svg-animations

I’m going to be modifying the SVG we created in the former article.

Currently, we have the follow markup that creates our SVG:

<svg  
  viewBox="0 0 400 400"  
  xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"  
/>  
  <circle cx="50%" cy="50%" r=25% />  
  <circle cx="50%" cy="50%" r=10% />  
</svg>

We are styling the circle elements in our CSS:

svg {  
  height: 400px;  
  width: 400px;  
}
circle {  
  &:first-child {  
    fill: #FDC56B;  
    stroke: #3E829B;  
    stroke-width: 20;  
  }  
    
  &:last-child {  
    fill: #D45F5B;  
  }  
}

Let’s try animating these circles using CSS animations.

First, we can define our keyframes animation:

[@keyframes](http://twitter.com/keyframes) fade-in {  
  from {  
    fill-opacity: 0;  
  } to {  
    fill-opacity: 1;  
  }  
}

Whenever this animation is assigned, the fill will go from an opacity of 0 to an opacity of 1 (we could omit the to since fill-opacity: 1 is the implicit default).

Let’s assign this animation to the outer circle:

circle {  
  &:first-child {  
    fill: #FDC56B;  
    stroke: #3E829B;  
    stroke-width: 20;  
    animation: fade-in 2s ease-out infinite;  
  }  
    
  &:last-child {  
    fill: #D45F5B;  
  }  
    
  [@keyframes](http://twitter.com/keyframes) fade-in {  
    from {  
      fill-opacity: 0;  
    }  
      
    to {  
      fill-opacity: 1;  
    }  
  }  
}

scalable-vector-graphics-svg-animations

We’ve animated fill, but we can also animate any SVG attribute.

Let’s try animating the stroke-width as well:

[@keyframes](http://twitter.com/keyframes) fade-in {  
  from {  
    fill-opacity: 0;  
    stroke-width: 0;  
  }  
   
  to {  
    fill-opacity: 1;  
    stroke-width: 20;  
  }  
}

scalable-vector-graphics-svg-animations

Finally, we can apply this animation to the innermost circle with slightly different timing:

circle {  
  &:first-child {  
    fill: #FDC56B;  
    stroke: #3E829B;  
    stroke-width: 20;  
    animation: fade-in 2s ease-out infinite;  
  }  
    
  &:last-child {  
    fill: #D45F5B;  
    animation: fade-in 2s ease-in infinite;  
  }  
    
  [@keyframes](http://twitter.com/keyframes) fade-in {  
    from {  
      fill-opacity: 0;  
      stroke-width: 0;  
    }  
      
    to {  
      fill-opacity: 1;  
      stroke-width: 20;  
    }  
  }  
}

scalable-vector-graphics-svg-animations

That’s it! You can view the final pen here. 🚀

Practical Application

scalable-vector-graphics-svg-animations

So, we’ve gone over animating attributes on a SVG using CSS animations to create a basic animation.

There’s a whole host of dazzling animations you can make with SVGs using more advanced animation principles and technology:

scalable-vector-graphics-svg-animations

Additionally, you might be wondering how a SVG can be of use in a typical business web application.

In spirit of not reinventing the wheel, I will simply link you to this fantastic post by Sarah Drasner which exemplifies some SVG animations that might go into UX design. If you want to go one step further into mastering SVG animations, I highly recommend Drasner’s book SVG Animations.

Thanks for reading, pow, discuss, and share 😃

Design Systems for Developers

Read my latest ebook on how to use design tokens to code production-ready design system assets.

Design Systems for Developers - Use Design Tokens To Launch Design Systems Into Production | Product Hunt

Michael Mangialardi is a software developer specializing in UI development with React and fluent in UI/UX design. As a survivor of impostor syndrome, he loves to make learning technical skills digestible and practical. Formerly, he published articles, ebooks, and coding challenges under his brand "Coding Artist." Today, he looks forward to using his mature experience to give back to the web development community. He lives in beautiful, historic Virginia with his wife.