flubber

Why we included this project

Animated charts and maps often need one shape to melt into another, and that's exactly what flubber does. Instead of feeding mismatched path coordinates into a generic transition, it works out a sensible interpolation between any two SVG path strings or point rings, so shapes move without the inversions and sudden jumps you get from naive morphing. You hand it two shapes and it returns an interpolator function that takes a progress value from 0 to 1, which you can drive through a D3 transition or your own requestAnimationFrame loop. It also covers special cases like morphing to a circle or rectangle, and splitting or combining shapes when the start and end have different numbers of parts. It's a small, focused utility you can load in a browser or Node project, and it's a good fit for front-end visualization work.