Animating your SVG logo or signature that has variable stroke width using CSS/LESS

We all knew that by using SVG and CSS keyframes animation, we can easily make simple lines and curves neatly appear to be written, as though a person is writing it (check out this awesome tutorial by Ian Yates if you are unfamiliar with it).

However, what if we want to animate our logos or signatures that are more than just simple curves with fixed stroke width? How could we animate complex logos like Coca-Cola or beautiful calligraphy? Turns out it’s not that hard, we simply have to animate each path using the dash-offset technique while clipping it with the original shape.

Demo

See the Pen Animating your SVG logo or signature that has variable stroke width: Demo by Yifei He (@hesyifei) on CodePen.

Preparation

Before we start, make sure to understand how basic SVG animation work. Again, I recommend this tutorial by Ian Yates before continuing if you are unfamiliar with SVG animation.

Now, divide your original SVG into strokes. In another word, each layer should only have one stroke inside. For example, if we are animating the Chinese character “非”, there should be 8 layers as it has 8 strokes. Similarly, for the character “t”, there should be 2 layers as it has 2 strokes.

Here we won’t go into detail here on how to divide the SVG into different parts as there are lots of tutorials on the Internet. Below are two examples of how I divided the character “非” into strokes using Adobe Illustrator. (Check out the tutorial on my Chinese blog if you want to learn more)

Now, our SVG content should be similar to this (and inside Adobe AI, this), where each closed path represent a stroke:

Then, we will need to add continuous paths to the SVG that represents the path that a pen would take if it were writing each stroke.

Our new SVG content should be similar to this (and inside Adobe AI, this):

Animation

Normally, the standard dash animation technique works as follows:

See the Pen xzBMEN by Yifei He (@hesyifei) on CodePen.

As we can see, in above example, we are simply animating the “lines”. But what we really want is to use these paths as indicators to animate the corresponding shapes.

So, let’s first wrap the actual shapes inside clipPath.

Then we just have to simply add a clip-path: url(#clippath_id); to each .line- class, and then change the stroke-width of .pen to approrpiate value.

And that’s it! 😉

See the Pen Animating your SVG logo or signature that has variable stroke width: Clip paths animation by Yifei He (@hesyifei) on CodePen.

Using LESS to simplify the code

The code above already seems long and repeated, let alone adding browser prefix for animation and @keyframes. So below is a piece of LESS code that I wrote to make the whole thing simpler. Feel free to leave a comment if you have even better method!

See the Pen Animating your SVG logo or signature that has variable stroke width: Using LESS to simplify code by Yifei He (@hesyifei) on CodePen.

References

• Sign on the Dotted Line: Animating Your Own SVG Signature
• How to animate handwriting text on the web page using SVG?
• GIFs in this article are recorded using LICEcap and converted to videos according to “Optimizing Animated GIFs by Converting to HTML5 Video”