SVG Morpheus : JavaScript library for morphing SVG icons

SVG Morpheus is an open-source JavaScript library enabling SVG icons to morph from one to the other. It implements Material Designs Delightful Details transitions.

svg-morpheus-javascript-library-for-morphing-svg-icons

To get same effects in your web apps. that you have to do is simply add the svg-morpheus.js script to your website/application. No other scripts are needed. Both the minified and uncompressed (for development) versions are in the /compile folder. add an SVG icon to the HTML file where you want to show the morphing icon, then instantiate SVG Morpheus:

1
2
var myIcons = new SVGMorpheus(#myIconSet, options, callback);
    myIcons.to('icon1');

you can iunclude easing and duration in the options parameter to get some control over the transition.

Demo | Github

Tagged with: , ,