SVG Letter Animation

Advertisement

We continue to find new tutorials for developers. Today’s tutorial is a fancy little lettering animation tutorial made with SVG and anime.js. It’s been created by Codrops. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator”

The trick for this effect is to have several layers of each letter. Every single stroke gets animated while adding a slight delay to each, creating the desired effect. Moreover, each letter has a little bouncy motion.Note that for this SVG lettering effect the type needs to be made of single strokes.

svg-letter-animation

Demo    Source