Skip to content

Animated SVG Alphabet Tutorial with Sketch and Keyshape


Wouldn’t it be nice to have a pre-animated A-Z SVG alphabet in a nice 
font like Roboto? Yes and yes and it’s coming soon. Even better it’s 
totally free. Yes I’m insane so what’s new?

Edit! Since I wrote this I have now released this free product, check it out:

https://beta.designforventures.co/Free-Animated-SVG-Icons/Animated-Fonts/

In this tutorial I’ll show you how to create a single word ”Adventure” using 
my pre-animated SVG characters. When released this will include all of 
the Keyshape project files (so you can change stuff like timing etc), the master template Sketch file (so you can 
create your own fonts
) and all of the characters as exported, code-ready SVGs.
Amazeballs yes. ??

Dive right in

Download the Keyshape tutorial file here

If you want to play around with it right now, I added two versions of the “Adventure” file, one looped and one that just animates out. A great way to get a feel for both Keyshape and the upcoming release of the animated Roboto Bold alphabet.

Quick Tip 1 — How to do Reverse Path

Select the path with the Node Tool (A) → Object → Reverse Path

Stuff seen (or heard) in this video

Midnight — Dark Theme Sketch plugin 
https://midnightsketch.com/

Keyshape
https://www.keyshapeapp.com/

Sublime Text 3 
https://www.sublimetext.com/3

All beats by Djablo
https://soundcloud.com/djablo

More tutorials?

?Just go here: https://designforventures.co/tutorials.php



Leave a Reply

Your email address will not be published. Required fields are marked *