To add some dynamism to your HTML page, we can add some animations, especially on icons. So we will do a simple SVG line animation to try it.
First, let's just draw a circle. It will be our base.
To animate the circle, we will use the next properties :
- stroke-dasharray: This defines the line dash size.
- stroke-dashoffset: This defines the offset between the start of the line and the first dash.
Then the animation is simple. We will create a dash that measures the entire line and add an offset of the same length. Then with the animation, we will reduce the offset size, and the drawing will appear.
But how can we know the exact size of a line?
Hooray! We did it!
Here we've done the first step. Now, if you want to do a more complex animation, you can add other lines to draw a planet icon.
And then you just have to add multiple classes to delay some parts of the animation to have a cool SVG line animation.
I hope you've enjoyed this post! If you have some other tips to share, don't hesitate to post it in the comments, or create your own post and share here the link! :)