SVG path mask animation

by crowjonah

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 viewBox="0 0 470 470" enable-background="new 0 0 470 470" xml:space="preserve">
    <defs>
        <clipPath id="myClip">
            <path stroke-width="12" stroke-miterlimit="10" fill="none"  d="M77.4,213.7l7.3-7.3c1-1,1-2.6,0-3.6l-1.1-1.1
		c-1-1-2.6-1-3.6,0l-7.3,7.3l-7.3-7.3c-1-1-2.6-1-3.6,0l-1.1,1.1c-1,1-1,2.6,0,3.6l7.3,7.3l-7.3,7.3c-1,1-1,2.6,0,3.6l1.1,1.1
		c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L77.4,213.7 M133.9,176.4l7.3-7.3c1-1,1-2.6,0-3.6
		l-1.1-1.1c-1-1-2.6-1-3.6,0l-7.3,7.3l-7.3-7.3c-1-1-2.6-1-3.6,0l-1.1,1.1c-1,1-1,2.6,0,3.6l7.3,7.3l-7.3,7.3c-1,1-1,2.6,0,3.6
		l1.1,1.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L133.9,176.4 M213,208.2l7.3-7.3
		c1-1,1-2.6,0-3.6l-1.1-1.1c-1-1-2.6-1-3.6,0l-7.3,7.3l-7.3-7.3c-1-1-2.6-1-3.6,0l-1.1,1.1c-1,1-1,2.6,0,3.6l7.3,7.3l-7.3,7.3
		c-1,1-1,2.6,0,3.6l1.1,1.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L213,208.2 M190.5,251.6
		l7.3-7.3c1-1,1-2.6,0-3.6l-1.1-1.1c-1-1-2.6-1-3.6,0l-7.3,7.3l-7.3-7.3c-1-1-2.6-1-3.6,0l-1.1,1.1c-1,1-1,2.6,0,3.6l7.3,7.3
		l-7.3,7.3c-1,1-1,2.6,0,3.6l1.1,1.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L190.5,251.6
		 M284.5,208.2l7.3-7.3c1-1,1-2.6,0-3.6l-1.1-1.1c-1-1-2.6-1-3.6,0l-7.3,7.3l-7.3-7.3c-1-1-2.6-1-3.6,0l-1.1,1.1c-1,1-1,2.6,0,3.6
		l7.3,7.3l-7.3,7.3c-1,1-1,2.6,0,3.6l1.1,1.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L284.5,208.2
		 M349.8,208.2l7.3-7.3c1-1,1-2.6,0-3.6l-1.1-1.1c-1-1-2.6-1-3.6,0l-7.3,7.3l-7.3-7.3c-1-1-2.6-1-3.6,0l-1.1,1.1c-1,1-1,2.6,0,3.6
		l7.3,7.3l-7.3,7.3c-1,1-1,2.6,0,3.6l1.1,1.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L349.8,208.2
		...

JavaScript

$(document).ready(function() {

        // Store a reference to our paths, excluding our clip path
        var paths = $('path:not(defs path)');

        // For each path, set the stroke-dasharray and stroke-dashoffset
        // equal to the path's total length, hence rendering it invisible
        paths.each(function(i, e) {
            e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength();
        });

        // Create a timeline for ease of manipulation and the possibility
        // to play the animation back and forth at the requested speed.
        var tl = new TimelineMax();

        // Add each separate line animation to the timeline, animating the 
        // stroke-dashoffset to 0. Use the duration, delay and easing to
        // achieve the perfect animation.
        tl.add(
            TweenLite.to(paths.eq(0), 40, {strokeDashoffset: 0, delay: 0.0}));
    })