Note: There are no new demos added at this point and this site is in maintenance mode
start svg demo download
cr4.0 ff3.5 o9.2+ sa4.0

Pebbles

author: Vincent Hardy posted: October 04, 2009 at 03:00 PM categories: animation, interactive view comments

Download Video: WebM | MP4 | OGG

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.

blog comments powered by Disqus