search

ConnorAtherton / walkway

An easy way to animate SVG elements.
http://connoratherton.com/walkway
MIT License
4.37k stars 229 forks source link

Animate text like you are writing with hand #20

Closed fluxxus closed 9 years ago

fluxxus commented 9 years ago

What I would really like to achieve is to animate letters, like you are writing by hand.

I've converted text to outlines with AI, but I can only animate borders/lines of each letter, because, of course, path fill is transparent.

If I set fill to some color, naturaly, the effect is not the intended one, because the letters are already present, I am only animating the border lines.

Is it possible to animate letters to simulate the hand writing effect?

FYI, I am trying to animate this font: http://www.fontsquirrel.com/fonts/allura

Edit: I guess it is all down to the font itself and the generated code. If I set stroke width to 3 or 4 pixels, font width is ok, but it leaves parts of each letter blank. If I set stroke width to something higher, around 10px, there are no blank parts, but the font gets very fat and look unnatural.

ConnorAtherton commented 9 years ago

Your explanation above is very thorough so I don't have much to add. In the past when I wanted this effect, converting fonts to a path with a 1px stroke seemed to work okay.