Animating an SVG with CSS.

In this article, we will be animating an SVG so first of all, we simply take an SVG from unDraw and we will modify it with Figma.

1- Editing and grouping what elements we will animate.

So we will be using Figma to group up our elements like the following!

You can simply select elements and use CRTL + G to group them up, in our case we will need to group the planet, locations, hand, and hair because that's what we will animate eventually.

Next, we will export our SVG and make sure you export id attributes as well

You need to select your SVG on the top left corner and export like the following.

Animating the SVG

So the first step is copying our SVG code into our index.html!

Next, we will be creating a CSS file to start animating!

Result :

If something doesn’t work as expected or needs more details, just drop a comment below :) Happy coding!

This has been developed by myself at eDonec.