Wipster SVG Logo - draw animation

by gavinfoley

HTML

<svg style="" version="1.1" id="wip" x="0px" y="0px" viewBox="0 0 200 74" enable-background="new 0 0 200 74">
    <g>
        <g>
            <g>
                <g>
                    <path fill="none" stroke="#FFF" d="M82.8,22.2c0-1-2.8-5.7-7.6-5.7c-1.6,0-2.5,2.9-2.5,4.5c0,2.3,3.6,5.9,7.1,5.8
					C83.2,25.8,82.8,22.2,82.8,22.2z" />
                    <path fill="none" stroke="#FFF" d="M161.8,24c1.8,0,3.1,0.4,4.1,1.3c0.3,0.3,0.4,0.6,0.4,0.7c0,0.3-0.2,0.5-0.2,0.7s0.2,0.4,0.6,0.4
					c0.3,0,2.9-2.5,2.9-3.9c0-1.9-2.8-2.5-4.2-2.5c-3.3,0-7.8,1.8-13.9,3.5c0.9-1.8,1.4-3.3,1.4-4.2c0-1.8-5-5.8-7.6-5.8
					c-0.4,0-0.9,0.3-1.5,1.2c-0.3,0.4-2.6,5.4-5.5,11.6c-3,0.4-6.3,0.6-9.7,0.6c-2.3,0-1-1.3-1.7-1.3c-0.7,0-2.6,4.3,1.7,4.3
					c2.7,0,5.5-0.3,8.4-0.9c-1.9,4.2-3.8,8.5-5.2,12.4c-0.7-0.1-1.5-0.2-2.5-0.2c-1.5,0-3.1,0.2-4.7,0.7c-2-3.3-4.6-6.5-5.5-10
					c1-1.7,4-6.7-0.4-6.7c-1.5,0-5.6,2.2-5.6,7c0,1.4,1,3,1.4,4.4c0,0.1,0,0.1,0.1,0.2c-1.7,3.6-8.4,17.6-16.2,19
					c6.6-4.4,12.2-17.8,12.2-20.2c0-2.4-4.6-7.2-8-7.2c-3.7,0-9.5,10.5-12.4,16.6c3-6.6,5.7-11.8,5.7-12.3c0-1.8-5.6-5-8.2-5
					c-0.4,0-0.6,0.3-1.1,1.3c-0.3,0.6-3.5,7.5-7.2,15.4c-4,7.3-7.4,10.9-9,10.9c-0.5,0-0.6-0.7-0.6-0.8c0-6.9,9-20.9,9-22.7
					c0-1.8-5.1-4.9-7.8-4.9c-0.4,0-1,0.2-1.5,1.3c-0.5,1-8.5,14.6-8.5,21.4c0,4.2,5.2,8.2,8.4,8.2c1.8,0,3.9-1.9,5.9-4.2
					C72.6,59.3,71,64,71,66.3c0,4.1,5.7,6.8,7.2,6.8c0.8,0,2-0.3,2-1.2c0-8.7,18.4-39.1,20.8-39.1c0.2,0,0.3,0.2,0.3,0.7
					c0,3.3-5.4,16.6-9.9,19.9c-0.8-0.3-1.7-0.6-2.7-0.6c-0.8,0-1.4,0.6-1.4,1.3c0,2,4.5,4.1,9.1,4.1c10.1,0,17.5-15.9,18.8-18.8
					c0.9,2,2,4,2.6,6c-5.3,2.8-9.7,6.9-9.7,9.6c0,2.5,5,3.4,8.2,3.4c3.4,0,10.4-2.1,10.4-9.1c0-1.8-0.7-3.6-1.6-5.4
					c1.3-0.3,2.6-0.5,4-0.5c0.9,0,1.5,0.1,1.9,0.4c-1,3-1.6,5.7-1.6,7.9c0,4.1,5.7,6.8,7.2,6.8c0.6,0,1.4-1,1.4-2
					c0-9,8.2-21.6,12.3-30C154.8,25,158.8,24,161.8,24z M113.5,55.3c-1.5,0-2.2-0.6-2.2-1.4c0-1.7,2.8-4.8,6.9-7.2
					c0.1,0.7,0.2,1.4,0.2,2C118.4,52.7,115.9,55.3,113.5,55.3z" />
                    <path...

CSS

</style> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/vivus/0.1.2/vivus.min.js"></script> 
<script src="https://rawgit.com/kbwood/svg/master/jquery.svg.js"></script> 
<script src="https://rawgit.com/kbwood/svg/master/jquery.svganim.js"></script> <style> 
body {
    padding: 50px;
    background-color: #333;
}

JavaScript

$(function runWipAnimationOnDocReady(){        
    var hi = new Vivus('wip', {
        //type: 'delayed', 
        //type: 'oneByOne', 
        type: 'async', 
        duration: 40 // Frame count for drawing svg
    }, function() {
    $('#wip') // Get all path elements
            .attr({ 
 
            });
            
        $('#wip path') // Get all path elements
            .attr({ 
          
            'fill':  "#333" 
            }) // Match current bg color so we can animate from it
            .animate({ 
                svgFill: '#fff' ,
                'stroke-width':'0'
                //,svgStroke: '#fff'
            }, 3000); // Duration of fill animation
    });
});