SVG morpheus playground

by mrjordy

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js"></script>
<div class="row">
    <div class="col-md-4 svg-container">
        <svg id="html" viewbox="0 0 48 48">            
            <g id="extension" style="">
                <path d="m247 49l6-1 25-12-9 12-18 16 26-9-21 26 20-6s-4.658 7.653-13 17-24.405 18.904-36 24-14 6-14 6l-34 38s15.674 0.888 25 1 36 4 36 4 0.458 3.494 0 10-3 12-3 12l-22-6 17 14-15 14-16-14 10 14-14 7s-4.189-7.768-9-14-8.536-14.724-18-19-24.68-6.279-35-4-14.667 5.017-37 2-68.304-21.044-73-23-4.461-7.202 0-12 8-7 8-7h46s-34.094-33.839-36-38-5.234-35.112-8-59-8-41-8-41 5.024 2.953 12 17 11 28 11 28-0.128-11.468 0-19 1-21 1-21 7.098 11.613 10 22 6 25 6 25 2.117-6.826 4-14 2-15 2-15 6.05 10.998 8 19 3 18 3 18 2.344-3.339 4-8 4-11 4-11-0.523 8.301-0.599 16.818c-0.08 8.976 1.535 18.183 1.599 18.182 0 0 8.655 10.831 19 20 11.585 10.269 25 19 25 19l-17 21s9.955-7.934 28-29 38-45 38-45 22.797-9.84 50-26 40-27 40-27l-5 9-24 30zm-230 97c-1.856 3.182 0 9 0 9s-3.726-1.816-7-2-8 1-8 1 5.634-9.932 11-12 11-2 11-2-5.107 2.754-7 6z" fill="#336699"></path>
            </g>
            <g id="receipt" style="">
                <path d="M6,44l3-3l3,3l3-3l3,3l3-3l3,3l3-3l3,3l3-3l3,3l3-3l3,3V4l-3,3l-3-3l-3,3l-3-3l-3,3l-3-3l-3,3l-3-3l-3,3l-3-3L9,7L6,4V44z" fill="#336699"></path>
                <path d="M36,34H12v-4h24V34z" fill="#FFF"></path>
                <path d="M36,26H12v-4h24V26z" fill="#FFF"></path>
                <path d="M36,18H12v-4h24V18z" fill="#FFF"></path>
            </g>
        </svg>
    </div>
    <div class="col-md-4 svg-container">
        <svg id="colors" viewbox="0 0 48 48">
            <g id="favorite" style="display:none">
                <path d="M24,42.7l-2.9-2.6C10.8,30.7,4,24.6,4,17C4,10.8,8.8,6,15,6c3.5,0,6.8,1.6,9,4.2C26.2,7.6,29.5,6,33,6
        c6.2,0,11,4.8,11,11c0,7.6-6.8,13.7-17.1,23.1L24,42.7z" fill="#336699"></path>
            </g>
            <g id="invert_colors" style="display:none">
...

CSS

.svg-container {
display: inline-block;
position: relative;
width: 25%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}

JavaScript

var account = new SVGMorpheus('#account');
var colors = new SVGMorpheus('#colors');
var html = new SVGMorpheus('#html');

var option = {
    duration: 900,
    easing: 'sine-in-out',
    rotation: 'random'
};

function flipper(data, datato) {
    setTimeout(function () {
        data.to(datato, option, null);
    }, 300)
}
$(document).on('mouseenter', '#account', function () {
    flipper(account, 'account_balance');
});
$(document).on('mouseleave', '#account', function () {
    flipper(account, 'account_box');
});
$(document).on('mouseenter', '#colors', function () {
    flipper(colors, 'favorite');
});
$(document).on('mouseleave', '#colors', function () {
    flipper(colors, 'invert_colors');
});
$(document).on('mouseenter', '#html', function () {
    flipper(html, 'extension');
});
$(document).on('mouseleave', '#html', function () {
    flipper(html, 'receipt');
});