This demo illustrates the use of the getPointAtLength() API on the SVG <path> element.

The script simply accesses the path of an object and gets the coordinates of points along that path. Then, it positions a 'pebble' of random size at a pseudo-random position about the coordinates returned by getPointAtLength

Inkscape was used to convert the "SVG" and "Wow!" texts to SVG paths elements which the demo code manipulates.

See attributions for the OpenClipArt play/pause icons.

Running the demo

Click on the "Start SVG Demo" at the top of this page. When the demo has loaded, click in the play button at the bottom right. Once the "SVG" text has fully appeared, click on the display.