How to animate a path like it's being drawn, dot by dot? (Raphael.js)
- by Anton
How to animate a vector path like it's being drawn by hand?
In other words, slowly show the path pixel by pixel.
I'm using Raphaël.js, but if your answer is not library specific—like maybe there's some general programming pattern for doing that kind of thing (I'm fairly new to vector animation)—it's welcome!
Update
I know it's easy to do with straight paths, as easy as an example on that page::
path("M114 253").animate({path: "M114 253 L 234 253"});
But try to change code on that page, say, this way::
path("M114 26").animate({path: "M114 26 C 24 23 234 253 234 253"});
And you'll see what I mean. Path is certainly animated from it initial state (point "M114 26") to the end state (curve "C 24 23 234 253 234 253" starting on point "M114 26"), but not in a way specified in question, not like it's being drawn.
(Sorry for not making clear from the start that I don't mean animating straight lines.)
I don't see how animateAlong can do that either. It can animate an object along a path, and how can I make this path to gradually show itself while object is being animated along it?
