<div id="nes">
  
<svg version="1.1" viewBox="0 0 944 658" class="line-animated">
  <path 
      d="

M 20.25 268.402 L 665.843 420.019
M 296.094 28.75 L 909.408 154.934
M 70.137 480.665 L 637.477 622.5
M 20.25 368.176 L 665.843 524.007
M 105.351 368.176 L 476.25 453.276
M 296.094 28.75 L 20.25 268.402
M 909.408 154.934 L 665.843 420.019
M 914.299 254.707 L 665.843 524.007
M 914.299 276.228 L 665.843 551.582
M 877.128 350.568 L 637.477 622.5
M 151.325 237.101 L 101.469 287.477
M 718.496 115.654 L 473.144 374.763
M 827.295 138.039 L 584.001 401.182
M 151.325 237.101 L 521.986 323.18
M 473.144 374.763 L 483.039 583.891
M 585.633 401.182 L 585.633 609.539
M 20.25 268.402 L 20.25 368.176
M 20.25 368.176 L 70.137 480.665
M 665.843 420.019 L 665.843 524.007
M 665.843 524.007 L 665.843 551.582
M 665.843 551.582 L 637.477 622.5
M 909.408 154.934 L 914.299 254.707
M 914.299 254.707 L 914.299 276.228
M 914.299 276.228 L 877.128 350.568
M 101.469 287.477 L 105.351 368.176
M 804.743,154.934
M 700.924,134.213
M 608.62,368.752
M 504.804,348.031
M 625.807,343.9
M 521.99,323.18
M 787.625,182.461
M 683.806,161.739
M 522.219 323.566 L 631.438 348.932
M 699.293 136.707 L 805.184 161.298
M 537.452 306.697 L 647.418 332.591
M 554.081 288.423 L 664.804 313.787
M 570.388 271.817 L 679.607 297.182
M 586.657 255.31 L 695.878 280.674
M 601.923 238.764 L 710.593 264.263
M 619.108 220.614 L 726.816 245.628
M 633.906 203.66 L 743.123 229.021
M 650.176 187.151 L 759.395 212.512
M 665.843 171.26 L 773.593 196.122
M 681.667 153.174 L 790.887 178.533
M 124.589 441.542 L 174.801 453.276
M 126.609 463.772 L 176.82 475.507
M 124.589 441.542 L 127.265 463.926
M 174.896 453.879 L 176.915 476.109
M 194.68 458.366 L 244.891 470.1
M 196.699 480.597 L 246.91 492.33
M 194.875 458.365 L 196.895 480.596
M 244.461 470.78 L 246.48 493.011
M 491.484 508.543 L 492.951 542.779
M 492.951 542.779 L 500.287 551.582
M 500.287 551.582 L 519.606 556.963
M 519.606 556.963 L 525.72 551.582
M 525.72 551.582 L 525.72 525.661
M 525.72 525.661 L 507.868 505.36
M 507.868 505.36 L 495.152 503.163
M 495.152 503.163 L 491.484 508.543
M 538.437 524.193 L 539.903 558.43
M 539.903 558.43 L 547.24 567.233
M 547.24 567.233 L 566.559 572.613
M 566.559 572.613 L 572.672 567.233
M 572.672 567.233 L 572.672 541.312
M 572.672 541.312 L 554.82 521.011
M 554.82 521.011 L 542.104 518.813
M 542.104 518.813 L 538.437 524.193
" 
      stroke="#fff" 
      stroke-width="2" 
      fill="none" 
      stroke-dasharray="988.01 988.01"
      stroke-dashoffset="0" /*set to 0 so that if JS is off the image will still appear (Progressive Enhancement Son!)*/
      
      >
  </path>
</svg>
  
</div>

body{
  background: #FF0505;
  height: 100%;
}
h1{
  font-family: Gotham, Helvetica, san-serif;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 2em 0;
}
div{
  width: 90%;
  margin: 0 auto;
}
svg{
  width: 100%;
  height: 75%;
}
path{ 
  
-webkit-transition: stroke-dashoffset 2s ease-in-out; 
  transition: stroke-dashoffset 2s ease-in-out;
}       

var path = document.querySelector('.line-animated path');

window.onload = function(){
  path.style.strokeDashoffset = '988.01';
  //Reset paths to starting position
  lineDraw();
  //repeat for demo purposes
  setInterval(lineDraw, 5000);
};


function lineDraw(){
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
  'none';

// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length; 
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser 
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 7s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
  //0 is the image fully animated, 988.01 is the starting point.
};