What is flubber?

This is a JavaScript library for animating smoothly between two different shapes on a web page. When you want to transition from one shape to another in a visualization or animation, simply changing the coordinates often produces jarring jumps and unexpected distortions, especially when the shapes have different numbers of points or very different structures. Flubber tries to figure out a reasonable in-between path for any pair of shapes, so the animation looks fluid rather than broken. You give it two shapes as input: either SVG path strings (the kind used in web graphics) or arrays of x-y coordinate pairs. It returns an interpolator function. That function accepts a number from 0 to 1, where 0 means the starting shape and 1 means the ending shape, and anything in between gives you a blended shape. You can call this function inside an animation loop or hand it directly to a library like D3. Beyond the basic interpolation between two shapes, there are specific helpers for animating a shape into or out of a circle or a rectangle. There are also methods for handling cases where one shape splits into multiple shapes, or multiple shapes merge into one. If you have a set of shapes that should each animate into a corresponding shape one-to-one, there is a method for that as well. The library includes two small utility functions: one converts an array of coordinate points into an SVG path string, and another splits a compound SVG path (one that describes multiple shapes in a single string) into an array of individual path strings. Flubber does not claim to produce geometrically perfect morphing. The README describes it as a "best-guess" approach that aims to be good enough for most visualization use cases without being overly complex. It is installed via npm and works in both browser and Node.js environments.