All examples By author By category About

mbostock

Path Tween

This example demonstrates path interpolation using SVG's getPointAtLength feature. The source path and the target path are sampled uniformly using a configurable precision in pixels (here, 4px). During the transition, the path is replaced with a piecewise linear curve, or polyline, for easier interpolation. When the transition finishes, the path is restored to the original cubic B├ęzier. This technique is handy because it works for any path expressible with SVG's path data mini-language.

See also the circular shape tweening example.