Introduction to Scalable Vector Graphics (SVG): Animations

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

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"
>
<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 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 fade-in {
from {
fill-opacity: 0;
}

to {
fill-opacity: 1;
}
}
}

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

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

@keyframes fade-in {
from {
fill-opacity: 0;
stroke-width: 0;
}

to {
fill-opacity: 1;
stroke-width: 20;
}
}

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 fade-in {
from {
fill-opacity: 0;
stroke-width: 0;
}

to {
fill-opacity: 1;
stroke-width: 20;
}
}
}

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

Practical Application

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:

SVG animation by yours truly on Codepen

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, clap and comment 😃

UI Developer in Southwest Virginia. Soli Deo Gloria. https://coding-artist.teachable.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store