I was very excited to see Anitype pop up on Twitter yesterday. The project asks one simple question – “What if letters could move?”. Certainly a fun enough question on it’s own, but they take it one step further by creating a framework for SVG animated letters and inviting you to contribute your own creations to the project. So basically, pretty darn awesome!

You have one second to animate your character. And yes, you can pick any glyph you’d like. You have point data (mostly thanks to Two.js), easing options based on everyone’s favourite Penner Equations and a well thought out editor to work with. To top it all off you can code, submit and even fork others’ submissions right in the browser. This could get a bit addicting.

Full documentation on how to submit can be found here, and of course you’ll want to check out the gallery of contributed letters too.

Anitype
A Chrome Experiment from Jono Brandel

SVG-Verlet.js is a rather nice looking SVG animation library from Mike Tucker. Most of the library’s functionality was extracted out of Mike’s portfolio and features include mouse pull, gravity, wind and noise warp. It’s written in CoffeeScript, but don’t panic, writing CoffeeScript isn’t required to use the library. That’s a nice touch.

If you’re into SVG and physics, this is definitely one for you to check out!

svg-verlet.js
From Mike Tucker

I learned how to iterate along bezier curves a few years ago, and it was surprisingly simple. But despite that, it’d still be a huge pain to make SVG lines gradually appear along their paths. Thankfully, Jake Archibald has come up with a much easier (and truly cunning) way to do this – he simply adjusts (ie hacks) the dashed line settings. And he has a great detailed explanation on his blog.

Animated line drawing in SVG by Jake Archibald

[UPDATE] apparently this innovative technique has been in use before Jake (re)discovered it. D3 creator Mike Bostock talks about it here and Jan Willem Tulp used it on his D3 powered Christmas card from last year.