<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In  -->
<svg id="surface" version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="387.4px" height="46.2px" viewBox="0 0 387.4 46.2" enable-background="new 0 0 387.4 46.2"
	 xml:space="preserve">
<defs>
</defs>
<g class="name">
	<g class="letter">
		<path fill="none" stroke="#384B5F" stroke-width="8.1631" stroke-miterlimit="10" d="M32.1,8c0,0-3.4-2.9-11.6-2.9
			S4.1,10.4,4.1,21.6c0,14.6,11.7,18.9,17.9,18.9s9.9-2.4,9.9-2.4"/>
	</g>
	<g class="letter">
		<path fill="none" stroke="#384B5F" stroke-width="8" stroke-miterlimit="10" d="M38.1,36.7c0,0,2.1,4.6,8.3,4.4s8-3.9,8-9.7
			s0-30.9,0-30.9"/>
	</g>
	<g class="letter">
		<path fill="none" stroke="#384B5F" stroke-width="8" stroke-miterlimit="10" d="M119.2,13.6c0,0-3.3-9.1-15.5-9.2
			c-9.6-0.1-17,9-17,18.8s7.7,18,18.2,18c16,0,16.5-16.5,16.5-16.5l-16.5,0.2"/>
	</g>
	<g class="letter">
		<polyline fill="none" stroke="#384B5F" stroke-width="8" stroke-linejoin="bevel" stroke-miterlimit="10" points="133.2,44.2 
			149.6,2.4 166.1,44.1 		"/>
		<line fill="none" stroke="#384B5F" stroke-width="8" stroke-miterlimit="10" x1="138.2" y1="32.4" x2="160.9" y2="32.4"/>
	</g>
	<g class="letter">
		<polyline fill="none" stroke="#384B5F" stroke-width="8" stroke-linejoin="bevel" stroke-miterlimit="10" points="179.2,45.2 
			185.9,1.7 200.7,44.2 215.4,1.7 222.2,45.6 		"/>
	</g>
	<g class="letter">
		<polyline fill="none" stroke="#384B5F" stroke-width="8" stroke-linejoin="bevel" stroke-miterlimit="10" points="237.2,45.2 
			243.9,1.7 258.7,44.2 273.4,1.7 280.2,45.6 		"/>
	</g>
	<g class="letter">
			<ellipse fill="none" stroke="#384B5F" stroke-width="8" stroke-linejoin="bevel" stroke-miterlimit="10" cx="314.1" cy="22.7" rx="18.3" ry="18.7"/>
	</g>
	<g class="letter">
		<polyline fill="none" stroke="#384B5F" stroke-width="8" stroke-linejoin="bevel" stroke-miterlimit="10" points="349.4,45.6 
			349.4,2.6 383.4,43.2 383.4,0.6 		"/>
	</g>
</g>
</svg>


<div class="link">
<a href="https://twitter.com/cjgammon">@cjgammon</a>
</div>

body{
  margin: 0;
  background: #384b5f;
}

.link{
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 10px;
  font-family: sans-serif;
  font-weight: 100;
  
  a{
    color: black;
    text-decoration: none;
    
    &:hover{
      text-decoration: underline;
    }
  }
}

svg{
  position: absolute;
  top: 0;
  left: 0;
}

svg{
  width: 100%;
  height: 100%;
}

.name{
  transform-origin: 50% 50%;
  transform: scale(0.75);
}

let s = new Snap('#surface');
var letterSpeed = 10; //higher = faster
var colorSpeed = 2; //higher = faster
let colors = [
  '#e9edef', '#efad42', '#e9435a', '#4aadad', '#83cead'
];
let letters = s.selectAll('.letter');
let tl = new TimelineMax({
  repeat: -1,
  yoyo: true
});

for (var i = 0; i < letters.length; i += 1) {
  var letter = letters[i];

  tl.set(letter.node, {
    rotation: 180 - (Math.random() * 360),
    x: 20,
    y: -200
  }, 0);

  var tw = TweenMax.to(letter.node, 0.6, {
    rotation: 0,
    x: 0,
    y: 0,
    ease: Back.easeOut
  });

  tl.add(tw, 0.5 + (i / letterSpeed));

  var paths = letter.selectAll('*');
  for (var k = 0; k < paths.length; k += 1) {
    for (var j = 0; j < colors.length; j += 1) {

      var l = paths[k].clone();
      l.attr({
        stroke: colors[j]
      });

      var delay = (0.1 + (i / letterSpeed) + ((colors.length - (j / colorSpeed))) / 10);
      var tw = TweenMax.fromTo(l.node, 1, {
        drawSVG: '0%'
      }, {
        drawSVG: '100%',
        ease: Power2.easeInOut
      });
      tl.add(tw, delay);

    }

    //paths[k].remove();
    letter.prepend(paths[k]);
    TweenMax.set(paths[k].node, {
      x: -3,
      y: -3
    });
    var tw = TweenMax.fromTo(paths[k].node, 1, {
      drawSVG: '0%'
    }, {
      drawSVG: '100%',
      ease: Power2.easeInOut
    });
    tl.add(tw, delay);

  }

}