A Pen by Isaac Suttell.

index.html

<svg version="1.1" id="logo" x="0px" y="0px" viewBox="0 0 612 172" enable-background="new 0 0 612 172" xml:space="preserve">
<path fill="none" stroke="#000000" d="M15.3131027,128.550766c7.8806763,5.4369507,15.560955,8.1542358,23.0368614,8.1542358  c5.0266151,0,9.2055206-1.5292206,12.5375099-4.5868683c3.3288116-3.0584259,4.9948082-7.1005554,4.9948082-12.1303482  c0-1.9013824-0.274353-3.7009811-0.8159027-5.4019623c-0.5439339-1.6978073-1.1562538-3.1252365-1.8345833-4.2814941  c-0.6815071-1.1530685-1.7677841-2.4111176-3.2620087-3.7709503c-1.4966125-1.3574524-2.6496887-2.3443222-3.4655914-2.9566498  c-0.8151054-0.6115265-2.277523-1.6302032-4.3824806-3.0576324c-2.1089363-1.4266357-3.5013733-2.4111252-4.1797028-2.9558487  c-9.6516399-6.524025-16.7863941-13.1490402-21.4058552-19.8766403c-4.6218452-6.7276001-6.9311771-15.3215942-6.9311771-25.789135  c0-12.7728996,3.5681725-23.5108166,10.7029285-32.2105713c7.1355495-8.6957817,16.9525967-13.0472507,29.4582996-13.0472507  c9.3780823,0,18.348217,2.5168858,26.9104042,7.5435009"/>
<path fill="none" stroke="#000000" d="M76.6766129,43.7432365c-7.4767075-6.5240211-14.815834-9.7852364-22.0173874-9.7852364  c-4.7594185,0-8.4953842,1.3598328-11.2126656,4.0771141c-2.7204628,2.7204666-4.0771179,6.3896294-4.0771179,11.008297  c0,4.6218452,1.5960159,8.8365364,4.790432,12.6392975c3.1920319,3.8067398,7.0655708,7.3073196,11.6206169,10.4993515  c4.5518684,3.1952133,9.0719261,6.6258087,13.5569878,10.2949753c4.4850693,3.6699677,8.3228226,8.4603958,11.5180359,14.3728943  c3.1920319,5.9116974,4.7904358,12.7410889,4.7904358,20.4881668c0,14.1367111-3.9077377,25.6555405-11.721611,34.555687  c-7.8170624,8.9017487-18.6535873,13.3518219-32.5167351,13.3518219c-10.3299694,0-19.0289307-2.5797119-26.0945015-7.7454834"/>
<path fill="none" stroke="#000000" d="M193.2835693,9.0865545v112.1250763c0,4.2138977-0.1717682,7.8830643-0.5097351,11.0082932  c-0.3403625,3.128418-1.3598328,6.9311829-3.0576324,11.4162445c-1.7009888,4.4850769-4.0453186,8.1558228-7.0337677,11.0090942  c-2.9908447,2.8548584-7.5108948,5.3359528-13.5561981,7.4417114c-6.0492706,2.1041565-13.2198029,3.1586304-21.5076447,3.1586304  c-14.5446472,0-25.7223282-3.4655914-33.5362091-10.396759c-7.8162613-6.9311829-11.721611-17.4615479-11.721611-31.5990524  V9.0865545"/>
<path fill="none" stroke="#000000" d="M132.7359619,9.0865545v99.4849854c0,10.1931839,0.6115265,16.920784,1.8345947,20.1827927  c2.1725464,5.9816895,6.5908203,8.9701385,13.2516174,8.9701385c2.8540649,0,5.2651825-0.4739532,7.2373352-1.4266357  c1.9681854-0.9494934,3.4655914-1.9689789,4.4850769-3.0584259c1.0186768-1.0862885,1.7646027-2.8858795,2.2425232-5.4027634  c0.4739532-2.5129089,0.7801208-4.4850616,0.9169006-5.9116974c0.1335907-1.4274292,0.2043762-3.701767,0.2043762-6.8293915  V9.0865545"/>
<path d="M230.1819916,162.7994995L230.1819916 37.6271667 206.3292389 37.6271667 "/>
<path d="M284.6127319,37.6271667L260.5587769 37.6271667 260.5587769 162.7994995 "/>
<path d="M314.5783997,162.7994995L314.5783997 37.6271667 290.7264099 37.6271667 "/>
<path d="M369.0107117,37.6271667L344.9551697 37.6271667 344.9551697 162.7994995 "/>
<path fill="none" stroke="#000000" d="M206.3292389,9.0865545h78.283493 M369.0107117,9.0865545h-78.2843018"/>
<path d="M444.4377747,162.7994995L382.8714905 162.7994995 382.8714905 9.0865545 444.0306091 9.0865545 "/>
<path d="M440.3598633,99.6014023L413.2458801 99.6014023 413.2458801 134.2588806 444.4377747 134.2588806 "/>
<path d="M444.0306091,37.6271667L413.2458801 37.6271667 413.2458801 71.060791 440.3598633 71.060791 "/>
<path d="M524.9622192,162.7994995L462.7851868 162.7994995 462.7851868 9.0865545 "/>
<path d="M493.1595764,9.0865545L493.1595764 134.2588806 524.9622192 134.2588806 "/>
<path d="M601,162.7994995L538.822998 162.7994995 538.822998 9.0865545 "/>
<path d="M569.1973877,9.0865545L569.1973877 134.2588806 601 134.2588806 "/>
</svg>

script.js

// Setup Timeline and make it play forward then revsere
var tl = new TimelineMax({
    onComplete: function(){
      setTimeout(function(){
        tl.reverse();
      }, 1000);
    },
    onReverseComplete: function(){
      setTimeout(function(){
          tl.play();
      }, 250);
    }}),
    lines = $("#logo path");


// For each path get its length and setup the tween
lines.each(function(){
  var length = this.getTotalLength();
  this.style.strokeDasharray = length + ' ' + length;
  this.style.strokeDashoffset = length;
  
  tl.to(this, 5, {strokeDashoffset: 0, strokeOpacity: 1,  ease:Bounce.easeOut}, 0);
});

tl.staggerTo(lines, 1, {rotation: 3, ease:Bounce.easeOut}, 0.05, '-=3.2');

style.scss

@import "compass/css3";
body {
  background: #222;
}

#logo {
  width: 612px;
  position: fixed;
  left: 50%;
  top: 50%;
  @include transform(translateX(-50%) translateY(-50%));
  shape-rendering: geometricPrecision;
  overflow: visible !important;
  path {
    stroke: #fff;
    stroke-opacity: 1; // Set to 0 to have it fade in and out
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: square;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    fill: none;
  }
}

Suttell-Line-Animation.markdown

Suttell Line Animation

Animates the strokes of a svg using dasharray and dashoffset to make it appear like its being drawn. Uses bounce easing to add a slight forceful effect.

A Pen by Isaac Suttell on CodePen.

License.