Making Animations with CSS and SVGs

SVGs can help us make our applications more visually appealing, and help us make more interesting animations. Here I will be showing you how I made my SVG and how I used CSS to animate it.

What are SVGs?

SVG stands for Scalable Vector Graphics. SVG images stay clear at any resolution or size. Raster formats like as JPG, GIF, and PNG, when zoomed in look pixelated. SVGs don’t use pixel grids but use shapes, numbers and coordinates to render graphics in the browser, which makes it resolution-independent and infinitely scalable.

When embedded in an HTML document SVG code can be manipulated using CSS or JavaScript.

The Above image was an image I put together using unDraw.co and Figma. Each section of this SVG has a path and using figma you can save this image as an SVG and save it with id’s. I made a codepen for this , https://codepen.io/diana2341/pen/PoNjRrz.

You can also check out this video which helped me learn how to use these tools for this animation.

For this SVG I will make a simple animation, and make the character wave it’s arm. I use the id that was provided for us when this svg was downloaded

(this is part of the SVG code you can view the rest in the codepen link since its along one!)

<g id="arms">
<g id="Vector_12" filter="url(#filter1_dd)">
<path d="M910.149 591.575L938.662 453.186C938.662 453.186 934.843 358.731 965.985 366.565C997.127 374.399 972.636 457.056 972.636 457.056L978.221 620.441C978.221 620.441 940.679 636.89 910.149 591.575Z" fill="#FEC29C"/>
</g>

To simply make this move we just add CSS and animation keyframes

#arms{
  transform: rotate(-10deg);
  transform-origin: center;
  transform-box: fill-box;
  animation: wave 1s  infinite linear;
}
@keyframes wave{
  0%{
    transform:rotate(-20)
  }
  20%{
    transform:rotate(-10)
  }
  40%{
    transform:rotate(-5)
  }
  60%{
    transform:rotate(0)
}
  80%{
    transform:rotate(-5)
}
  100%{
    transform:rotate(-10)
}
}

and here we have our finished product !

SVGs are awesome to use to make our websites look more visually appealing. Because they’re made up of code, we can easily manipulate every single shape of it with CSS to add animations and color!