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.


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:

var myIcons = new SVGMorpheus(#myIconSet, options, callback);'icon1');

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

Demo | Github

Tagged with: , ,