JQuery animation to write a text using a pen

Question

hi, I am using JQuery in my application.I want some text to be animated ie.,I want the text to be written(animated) when the page is loaded using an pen/pencil image in Jquery.

can anybody help me on this.

Answer 1

For this to really work properly you need the code to actually understand the shape of the glyphs that make up the font and then animate a pencil along those paths.

I'd suggest looking into RaphaelJS:

http://raphaeljs.com/reference.html

Here is a good example of the helvetica font broken into paths and animated (not quite the way you wanted though but a start) http://raphaeljs.com/helvetica.html

It can register a font, convert the font to a path and you can animate a shape along that path so it's all there waiting to be tied together. You will end up tracing the edge of the letter so would trace the letter I down and up but if it is animated fast enough it should look pretty good.

Answer 2

Good luck with that. It isn't going to be easy!

I'd be looking at the canvas tag + using a canvas based library such as processing.js http://processingjs.org/