Exciting news, I animated my signature and I feel like all the hours I spent perfecting my signature when I was a fame-obsessed 15 year-old came in handy.

animated signature gif

I achieved this animation by creating my signature with the pencil tool in Adobe Illustrator. I then saved it as an .svg file and copied the svg code into a text editor.

From there I assigned unique classes to all the paths in my signature and added styling. The styling included adding a “stroke-dasharray” to each path class, this gave a length to each path, and I also added sequential keyframe animations.

Do you want to animate your signature? Follow this tutorial from Envato’s Tuts+ step by step, and you’ll have your own animated signature!

There are so many things that I want to learn in the realm of web design. I have at least 80 tutorials bookmarked, which span a variety of programming languages, design styles and animations. I’ll keep sharing my experiments :) .

💌 contact me