Morphing SVG Shapes with Flubber
Flubber generates smooth interpolator functions between two arbitrary SVG shapes, handling structural mismatches automatically.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How Flubber Generates Shape Interpolators
Flubber's interpolate function takes two SVG path strings and returns a JavaScript function that, given a progress value between zero and one, produces the intermediate path string representing that point in the morph, handling shapes with entirely different point counts and structures automatically.
- The interpolate function accepts two SVG path strings as its input
- Returns a function producing an intermediate path string at any progress value
- Handles shapes with entirely different point counts and structures automatically
Combining Flubber with an Animation Library
Since Flubber only generates the interpolation function itself rather than driving an animation loop, it's typically paired with a separate animation library or the Web Animations API to actually call the interpolator repeatedly over time and update an SVG path's d attribute on each frame.
- Flubber generates the interpolation logic but doesn't drive an animation loop itself
- It's typically paired with an animation library or the Web Animations API
- The pairing calls the interpolator repeatedly to update the d attribute per frame
Frequently Asked Questions
Does Flubber require both shapes to have the same number of path points?
No, Flubber automatically handles shapes with completely different point counts and structures, generating a smooth interpolation regardless of the mismatch.
Does Flubber animate the shape morph automatically on its own?
No, Flubber only generates the interpolation function itself — pairing it with an animation library or the Web Animations API is needed to actually drive the morph over time.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG