Shape tweens

Shape tweens are the holy grail of transitions. I want you to remember the D3 Show Reel available at http://bl.ocks.org/mbostock/1256572 in 2011 by Mike Bostock—the author of D3. Here, he shows some awesome shape tween capabilities of D3 by transforming a chart into different representations.

Although a shape tween looks very simple and intuitive, they are almost never easy to create. Why is this so? Because the tools such as SMIL and D3 use simple string interpolation function, which extracts the numeric values of a string and interpolates them to the end state. And as soon the end state string looks different form the starting state—it could have a different amount of points, control points, or path commands—the resulting transition won't look good/smooth. Coming back to the D3 Show Reel, most of the transitions that we see are shape tweens of similar shapes—shapes with the same amount of control points.

This is true in particular for tweening between arbitrary shapes and writing...