SVG Morphing

By combining a path morphing library like Flubber with Pose, we can declaratively animate between any two SVG paths.

By importing animations from Popmotion Pure, which is included with Pose, we can use their powerful pipe method with Flubber’s interpolate to create a special transition prop that animates between paths:

import { tween } from 'popmotion';
import { interpolate } from 'flubber';

const morphTransition = ({ from, to }) =>
  tween().pipe(interpolate(from, to));