Hope it's the appropriate address for this question. Imagine the letter 'A' on a website (in a div), at a sufficiently large font to see the effect.

How could I gradually reveal the letter such that it appears as if the letter was written with a pen (I don't mean reveal letter by letter)?

Note: I would like to do this in code (if possible) and not requiring a pre-animation step. It should work interactively on a website, such that letters typed on a keyboard appear as if they were hand written (just in a machine type font).

  • 2
    I have no idea how to do that with recent technologies but back in the day when we used Flash, we would start from the end and work backwards (i.e. have the whole word written out and erase it bit by bit as we move to a new frame). Hope this helps!
    – curious
    Jun 22 '17 at 1:45
  • 1
    @Emilie It is still done with the same technique (masking parts of the letter) but today we (mostly) do it with animated SVG's.
    – Summer
    Jun 23 '17 at 10:34
  • Thanks for directing me, now i found this: animejs.com I would actually like the letters appear similar to this example, but just in realtime when typing. is that possible?
    – TMOTTM
    Jun 24 '17 at 10:42

There are several different approaches you can take, just as there are many ways to animate things on the web.

If the lines are fairly simple, you can use SVG and animate the lines to fake a drawing effect. More information/tutorials can be found on Google. For extremely simple reveal effects, you could use a mask in CSS or SVG.

If you need to do something more complex, you can use a sprite like Alex Engzell's old portfolio did. You could also use a video.

Each approach has its limitation and advantages. For more, check out my larger post on animating things on the web.

  • Of course I did google it... but perhaps because of the lack of knowing what terms to search for exactly ended up here.
    – TMOTTM
    Jun 19 '17 at 15:38
  • @TMOTTM the source of most problems start with that, I indeed agree the 'this is very google-able' is a bit too much. Not being able to pinpoint what you exactly need is hard and exactly why meany people use this website. Thanks for your answer though Zach, SVG is the way to go.
    – Summer
    Jun 23 '17 at 10:34

Your Answer

