polymorph-js

Morph SVG Paths

Features

- morphs between two or more svg paths using a simple function - handles variable length paths and holes in paths - compatible with Just Animate, Popmotion, nm8, TweenRex, and other animation libraries - Super tiny, about 6k minified - Free for commercial and non-commercial use under the MIT license

<tbody>
    <tr>
    <td style="text-align: center;"><h3>Flubber (53kb)</h3></td>
    <td style="text-align: center;"><h3>Polymorph  (6kb)</h3></td>
    </tr>
    <tr>
        <td>
            <img style="max-height: 320px"
                 src="https://raw.githubusercontent.com/notoriousb1t/polymorph/HEAD/assets/flubber-evolve.gif" />
        </td>
        <td>
            <img style="max-height: 320px"
                 src="https://raw.githubusercontent.com/notoriousb1t/polymorph/HEAD/assets/polymorph-evolve.gif" />
        </td>
    </tr>
</tbody>

Get Started

Read the full documentation to get started or check out the demos below.

Demos

• Morph Leonardo da Vinci to a Skull
• Charmander Evolves with Just Animate 2 + Polymorph
• Morphin' Icons with Just Animate 2 + Polymorph

License

This library is licensed under MIT.

Have a question or something to contribute?

Please create an issue for questions or to discuss new features.

Special Thanks

Special thanks to @shshaw for the amazing logo and artwork!