Two.js SVG & Animation

Using two.js to display an SVG exported from Illustrator and then add some simple animation.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/two.js/0.2.0/two.min.js"></script>
<div id="assets">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="316.134px" height="455.322px" viewBox="0 0 316.134 455.322" enable-background="new 0 0 316.134 455.322"
	 xml:space="preserve">
<path id="path3097" inkscape:connector-curvature="0" fill="#F4981E" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
	M288.002,104.939c0.957-10.555,11.039-12.953,20.629-22.07c12.959-11.998-3.354-31.67-3.354-31.67
	c1.916,13.436-4.324,18.232-15.838,26.393c-3.355,2.398-6.24,5.756-6.24,10.074c-0.475,5.281-0.955,10.557-1.92,15.836
	C283.682,103.98,286.084,104.461,288.002,104.939z"/>
<path id="path3099" inkscape:connector-curvature="0" fill="#F4981E" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
	M253.451,86.227c-2.877,2.398-5.758,4.797-8.156,6.721c-1.918,1.918-3.84,3.838-5.76,5.756c11.039,0.959,22.072,1.92,32.154,3.357
	c6.715-11.996,10.07-25.43,5.756-48.943C277.445,53.117,276.484,68.953,253.451,86.227L253.451,86.227z"/>
<path id="path3101" inkscape:connector-curvature="0" fill="#F4981E" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="
	M192.029,96.305c12.48,0,24.957,0.48,36.949,1.439c0.484-0.48,0.965-0.959,1.439-1.439c7.682-8.639,20.637-15.836,26.873-25.434
	c6.715-10.074,4.316-22.072,1.918-36.467c-4.316-24.951,6.242-29.268,6.242-29.268s-21.117,2.879-20.637,14.875
	c0.48,16.311,17.273,31.666-8.156,36.467c-27.832,4.799-45.105,20.152-48.943,39.826C189.154,96.305,190.592,96.305,192.029,96.305
	L192.029,96.305z"/>
<path id="path3121" inkscape:connector-curvature="0" fill="#C03039" stroke="#000000" stroke-width="5" stroke-miterlimit="10"...

CSS

#assets {
    display: none;
}

JavaScript

var two = new Two().appendTo(document.body);
var el = $('#assets svg')[0];
var shape = two.interpret(el).center();
var keys = Object.keys(shape.children);
var child = shape.children[keys[0]];
shape.opacity= 0;

two.bind('update', function(frameCount) {
    if (keys.length > 0) {
        if (child.opacity > 0.999) {
            keys.shift();
            child = shape.children[keys[0]];
        }
        if (child) child.opacity += 0.1;
        
    }
    else if (shape.scale > 0) {
        shape.scale -= 0.01;
    }
    else {
        shape.opacity= 0;
        shape.scale = 1;
        keys = Object.keys(shape.children);
        child = shape.children[keys[0]];
    }
}).play();