Two.js SVG & Animation

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

by Alex

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/two.js/0.2.0/two.min.js"></script>
<div id="assets">

<svg width="800px" height="109px" viewBox="0 0 681 109" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
        <path d="M72.464,31.984 L75.344,31.984 C75.0559986,26.2239712 73.9520096,21.3520199 72.032,17.368 C70.1119904,13.3839801 67.5440161,10.1680122 64.328,7.72 C61.1119839,5.27198776 57.3680214,3.49600552 53.096,2.392 C48.8239786,1.28799448 44.1440254,0.736 39.056,0.736 C34.9279794,0.736 30.7760209,1.16799568 26.6,2.032 C22.4239791,2.89600432 18.6560168,4.33598992 15.296,6.352 C11.9359832,8.36801008 9.20001056,11.079983 7.088,14.488 C4.97598944,17.896017 3.92,22.1439746 3.92,27.232 C3.92,32.224025 4.92798992,36.2799844 6.944,39.4 C8.96001008,42.5200156 11.6239834,45.0159906 14.936,46.888 C18.2480166,48.7600094 21.9679794,50.2239947 26.096,51.28 C30.2240206,52.3360053 34.3519794,53.3439952 38.48,54.304 C42.4160197,55.2640048 46.5199786,56.1999954 50.792,57.112 C55.0640214,58.0240046 58.9519825,59.3679911 62.456,61.144 C65.9600175,62.9200089 68.8399887,65.3199849 71.096,68.344 C73.3520113,71.3680151 74.48,75.4719741 74.48,80.656 C74.48,85.0720221 73.4960098,88.8639842 71.528,92.032 C69.5599902,95.2000158 66.9920158,97.7919899 63.824,99.808 C60.6559842,101.82401 57.0800199,103.287995 53.096,104.2 C49.1119801,105.112005 45.1040202,105.568 41.072,105.568 C35.5999726,105.568 30.5840228,104.968006 26.024,103.768 C21.4639772,102.567994 17.5280166,100.624013 14.216,97.936 C10.9039834,95.2479866 8.33600912,91.7680214 6.512,87.496 C4.68799088,83.2239786 3.776,78.0160307 3.776,71.872 L0.896,71.872 C0.79999952,78.4000326 1.73599016,83.967977 3.704,88.576 C5.67200984,93.184023 8.455982,96.9519854 12.056,99.88 C15.656018,102.808015 19.9279753,104.943993 24.872,106.288 C29.8160247,107.632007 35.2159707,108.304 41.072,108.304 C45.4880221,108.304 49.8559784,107.800005...

CSS

#assets {
    width: 100%;
    border: 1px solid red;
}

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.2;
    }
    
    else {
        shape.opacity= 0;
        shape.scale = 1;
        keys = Object.keys(shape.children);
        child = shape.children[keys[0]];
    }
}).play();