Roboto Bold Animated — A Free Animated SVG Alphabet Kit

Wouldn’t it be nice to have a pre-animated A-Z SVG alphabet in a nice font like Roboto? Of course. Free? Yes!

Design + Sketch
Published in
2 min readFeb 9, 2018

--

Release notes

• A smoothly animated A–Z alphabet kit using Roboto Bold
• All of the Keyshape project files so that you can build your own sentences
• The master Sketch file so you can use it to create your own alphabets or expand this one
Demo projects so you can learn how to do this yourself

Bonus

Download this npm for React that my friend Fredrik Ward developed. It’s for integration of KeyshapeJS animations into your React projects. And he has built all kinds of cool interactions to add on top for controlling the animations 🤯🌟🤟

Customized animation using the Keyshape project files included

System requirements

  • Required: Knowledge of how to implement animated SVGs into code — For RapidWeaver users please watch my tutorials (see further down this page)
  • Optional — For easier word creations you will want to use Keyshape app
  • Optional — Code editor like Sublime Text
  • Optional — Sketch (for expanding the alphabet with other fonts or just adding characters)

🌵Download from here 👇

👨🏻‍💻Check out live demos here 👇

Confused how to use?

Follow project on Bitbucket

My aim is to help my fellow designers with tools and tutorials // All the best // Juan

--

--

Design + Sketch

Creative Technologist. Co-founder of Team Sketch2React.