SVG path mask animation

by crowjonah

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
    <defs>
        <clipPath id="myClip">
            <path stroke="5" fill="none"  d="M77.4,213.7l7.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.3
	l-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.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3
	c1,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.6l-1.1-1.1c-1-1-2.6-1-3.6,0l-7.3,7.3
	l-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.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3
	c1,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.3c1-1,1-2.6,0-3.6l-1.1-1.1c-1-1-2.6-1-3.6,0l-7.3,7.3
	l-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.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3
	c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L213,208.2 M190.5,251.6l7.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.3
	l-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.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3
	c1,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.3
	l-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.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3
	c1,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.3
	l-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.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3
	c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L349.8,208.2 M275.5,127l7.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.3
	l-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.1c1,1,2.6,1,3.6,0l7.3-7.3l7.3,7.3
	c1,1,2.6,1,3.6,0l1.1-1.1c1-1,1-2.6,0-3.6L275.5,127...

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), 1000, {strokeDashoffset: 0, delay: 0.0}));
    })