stuck cat

gistfile1.txt

var loadsvg = require('load-svg');
var createsvg = require('svg-create-element');


function createSprite (elems) {
    var bounds = [];
    for (var i = 0; i < elems.length; i++) {
        elems[i].style.display = 'block';
        bounds[i] = elems[i].getBoundingClientRect();
    }
    var align = [];
    for (var i = 1; i < elems.length; i++) {
        align[i] = bounds[0].left - bounds[i].left;
        elems[i].setAttribute(
           "transform", "translate(" + align[i] + ", 0)"
        );
    }
    return function () {
        var g = createElement('g');
        for (var i = 0; i < elems.length; i++) {
            var c = elems[i].cloneNode(true);
            g.appendChild(c);
        }
        return g;
    };
}

loadsvg('pinkcat2improved.svg', function (err, svg) {
    svg.setAttribute("height", "100%")
    svg.setAttribute("width", "100%")
    document.body.appendChild(svg);
    //your #xxx0 group should be your first frame
    var k0 = document.querySelector('#kitty0')
    var k1 = document.querySelector('#kitty1')
    var k2 = document.querySelector('#kitty2')
    var c = createSprite([k0, k1, k2]);
    window.c = c
 

    /*
    var times = 0
    var iv = setInterval(function () {
        if (times%4 == 0){
            k0.style.display = 'block';
            k1.style.display = 'none';
            k2.style.display = 'none';
        }
        else if (times%4 == 1){
            k0.style.display = 'none';
            k1.style.display = 'block';
            k2.style.display = 'none';
        }
        else if (times%4 == 2){
            k0.style.display = 'none';
            k1.style.display = 'none';
            k2.style.display = 'block';
        }
        else {
            k0.style.display = 'none';
            k1.style.display = 'block';
            k2.style.display = 'none';
        }
        times++
    }, 250)
    */
    /*
    var kit = grp([g2, g1, k0])
    window.kit = kit
    var timeplus = 0 
    var move = setInterval(function (){
        kit.setAttribute("transform", "translate(" +
        timeplus%200 * -4 + ", " + Math.sin(timeplus/2) * 10 + ")")
        timeplus++
    }, 50)
    */
});
/*
function grp (elems){
    var g = createsvg('g')
    elems[0].parentNode.insertBefore(g, elems[0])
    elems.forEach(function (elem) {
        elem.parentNode.removeChild(elem)
        g.appendChild(elem)
    })
    return g
};
*/