How to create an SVG animation by adding points to a curve

Question

I have a set of points (2D), say A0, A1, A2, ..., A100

I would like to animate those points in a way to have a curve drawn from them, so in the first frame the curve will contain

A0

(So a single points), then the next frame will have the next point

A0,A1

Then in the next frame,

A0,A1,A2

And so on, and in 50 frames

A0,A1,...,A49

How can I do that? I would like t define the points at the beginning of the file, and then have them used later (maybe in an array?), since in reality I use 2000 points, which would be crazy to define manually.

I'm doing this because I'm preparing some HTML5 presentation.

Any alternatives (vector graphics) are welcome. Thank you for any efforts.

Answer 1

Check out the jsDraw2d SVG library that connects your points with curves.

In this demo, click any wild pattern of dots in the box and then click [draw curve]

http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm