block by joyrexus 6956598

Animate path of bug along a curve

Full Screen

Animate the movement of a bug along a curve while tracing/erasing path.

Demonstrates how to use the getTotalLength and getPointAtLength methods on SVG path elements to interpolate a point along an existing path … as well as how to animate the path using “stroke-dash interpolation”, previously demo-ed here.

Built with svg.js and inspired by @johan‘s much slicker D3-variant. Also check out @mbostock’s Stroke Dash Interpolation block.

index.html