SVG animations are one of the most powerful things in animations. But before kicking into the way to do it, let's pass by some CSS properties that we are going to use.
stroke-dasharray creates dashes between the figure and the higher the number is the wider the dashes will be to extend that you can fill the whole figure with dashes, so they won't be visible.
Stroke-offsetarray changes the position of the dashes, so the trick is where we want to cover the whole SVG with the dashes and then we will offset these dashes, so they will appear as if the SVG is drawing itself
First of all, you must have an SVG with a path, then we can get a bit tricky and set the pathlength of this path to 1 so we won't need to calculate the pathlength ourselves. In case you are wondering why do we want to set the pathlength, basically it is the value which we will set the dasharray equal to it to fill the whole element with dashes, so we won't see any gaps in the figure.
We will set the stroke-dasharray to 1, stroke length to whatever makes the figure looks good, and the stroke-miterlimit which I will leave for you to search for. After that, we will create an animation that turns the stroke-dashoffset to the same value of the dashes which is 1. and you will just set the transition and your animation is ready to start. Hope you found this blog useful.