Creating SVG animations with CSS

#webdev #css #animation #tutorial

As a new software developer myself, I always wonder how I can make my websites and application more exciting. Of all the cool websites I have gotten the chance to look at, all of them undoubtedly have some sort of animations to really capture the attention of the visitors. Upon looking on the web, I stumbled across the power of SVG animations! Not only was it easy to learn and to get started with, the possibilities are also endless and purely up to your imagination!

What is SVG?

SVG, short for scalable vector graphics, is a

text-based, open Web standard for describing images that can be rendered cleanly at any size

As quoted from https://developer.mozilla.org/en-US/docs/Web/SVG
Meaning, we would always have a high quality, crispy-clean image to display regardless of how big or small we want the image to be! This is super useful in cases where we want to scale an image up way larger than it's original size while preserving its quality.

How to get started:

First, we have to get our SVG file for us to animate. There are many ways to get SVG files, such as undraw.co and freesvg.org, or you can even create a custom SVG file on Figma yourself.
Once you’ve gotten an SVG file, you can hop on over to Figma and create a new design file. Import your SVG file by simply dragging and dropping your SVG file directly into your workspace.
Within Figma, you can select individual vectors/elements just by simply click on them, and if you want to select multiple items, you can hold Shift while clicking on them. In addition, you can select the items on the side bar as well! To select multiple items on the side bar, hold Cmd key and left click the items. Once you’ve picked a few items, you can group them together using Cmd + G or Ctrl + G. Grouping ultimately allows us to later animate a group of items altogether, so that everything will be organized when we work with our SVG file in our code editor.
Once grouped, you can give the grouped items a new name so it’s easier to identify the groups. Simply click on the "group" name on the side bar and edit the text. When you’re done with grouping the items that you wish to animate, simply export the file in SVG format, and make sure to check off both options for the exports.

Moving onto your HTML and CSS files:

Go ahead and copy and paste the contents of the exported SVG file into your HTML body tags! The SVG code will look very long and messy, and that is totally normal! The code would look something like this:

<svg width height viewBox fill xlmns>
<g id="name of the svg file">
<path />
<path />
<path />
....
<path />
<g/>
</svg>

Within the whole mess of code, the groups that you’ve created in the previous step should have a g tag with an id.

<g id="group-name">

Now that we have the SVG file in the HTML file, we can begin using CSS to modify how it looks on our browser!

For this example, we’re only going to add animations to the check symbol in the center of the phone. We can directly style the check symbol using the ID tags we created. Here’s a very simple animation:

* {
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}

svg {
   margin-top: 10%;
}

#Check {
  animation: checkAnimation 5s ease infinite;
}

@keyframes checkAnimation {
  0% {
    opacity: 0;
    translate: 0 -20%;
  }

  30% {
    opacity: 1;
    translate: 0 0;
  }
}

By using the ID of the check symbol, we can add an animation styling specifically to the group. The keyframes of the "checkAnimation" basically describes the animation process over the duration of our check symbol.
In this case, the symbol will fade in in the first 1.5 seconds and as it is appearing, it will drop in from top to bottom.

And voila! we have our SVG animation!

Granted this is a very very simple animation, but now that you've learned the basics on how to create an SVG animation, you can start exploring and trying out all the other animations and effects!

Here are some additional resources to help with your SVG animation journey!