Cacher is the code snippet organizer for pro developers

/*  = Demo only
---------------------------*/
@import url(http://fonts.googleapis.com/css?family=Lato|Lobster);
body{background: #c0392b;}
h1{
  color:#fdfdfd;
  font-family:'Lobster', cursive;
  text-shadow:0 2px 3px #ddd,0 4px 3px #222;
  text-align:center;
}

var line = document.querySelector('.line'),
    circle = document.querySelector('.circle'),
    star = document.querySelector('.star');
    
// hidden line on first
line.style.display = 'none';
star.style.display = 'none';

// getAnimation(class,time)
function getAnimation(el,time){
  var length = el.getTotalLength();
  el.style.transition = el.style.WebkitTransition =
    'none';
  el.style.strokeDasharray = length + ' ' + length;
  el.style.strokeDashoffset = length;
  el.getBoundingClientRect();
  el.style.transition = el.style.WebkitTransition =
    'stroke-dashoffset '+time+'s ease-in-out';
  el.style.strokeDashoffset = '0';
  return el;
}
// Get circle animation
getAnimation(circle,5);
// Wait and show line animation
setTimeout(function(){
  line.style.display = 'block';
  getAnimation(line,2);},4480);
// Wait and show start
setTimeout(function(){
  star.style.display = 'block';
  getAnimation(star,2);},5680);

<h1>Testing animations width SVG</h1>

<svg class="svg" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="7 220 1000 710">
  
  <path class="circle" d="m 518.39081,326.85309 c -0.18788,-0.70032 0.85132,-0.59876 1.16397,-0.31226 0.84727,0.77641 0.28536,2.11122 -0.53946,2.64021 -1.47539,0.94624 -3.37737,0.0595 -4.11644,-1.39118 -1.08461,-2.12886 0.16342,-4.66422 2.2429,-5.59267 2.77161,-1.23749 5.95886,0.38442 7.06891,3.09461 1.39688,3.4105 -0.60435,7.25734 -3.94633,8.54514 -4.0476,1.5597 -8.558,-0.82361 -10.02138,-4.79805 -1.72454,-4.68373 1.04247,-9.86002 5.64977,-11.49761 5.3193,-1.89066 11.16295,1.26105 12.97384,6.50149 2.05765,5.95451 -1.47944,12.46652 -7.3532,14.45007 -6.58947,2.22525 -13.77056,-1.69769 -15.92631,-8.20491 -2.3933,-7.22426 1.91584,-15.07494 9.05663,-17.40255 7.85891,-2.56168 16.37959,2.13392 18.87878,9.90836 2.73033,8.49346 -2.35193,17.68445 -10.76007,20.35501 -9.12794,2.89917 -18.98948,-2.56989 -21.83125,-11.61179 -3.06819,-9.76236 2.78782,-20.29466 12.46351,-23.30748 10.39673,-3.23734 21.59994,3.00571 24.78371,13.31522 3.40661,11.03107 -3.22357,22.90532 -14.16694,26.25995 -11.66536,3.57595 -24.21077,-3.44142 -27.73618,-15.01866 -3.74538,-12.29964 3.65924,-25.5163 15.87038,-29.21241 12.93389,-3.91489 26.82188,3.87704 30.68865,16.72209 4.08443,13.56812 -4.09485,28.12751 -17.57382,32.16488 -14.20233,4.25404 -29.43319,-4.31262 -33.64111,-18.42553 -4.42368,-14.83654 4.5304,-30.7389 19.27725,-35.11735 15.47072,-4.59336 32.04465,4.74817 36.59358,20.12897 4.76308,16.1049 -4.96592,33.35043 -20.98069,38.06981 -16.73907,4.93283 -34.65623,-5.18366 -39.54604,-21.8324 -5.1026,-17.37323 5.4014,-35.96206 22.68412,-41.02228 18.00738,-5.27239 37.26791,5.61915 42.49851,23.53584 5.44221,18.64152 -5.83687,38.57378 -24.38756,43.97475 -19.27566,5.61204 -39.87966,-6.05461 -45.45098,-25.23928 -5.78189,-19.90979 6.27233,-41.18557 26.091,-46.92721 20.54392,-5.95176 42.49148,6.49004 48.40344,26.94271 6.12164,21.17804 -6.70776,43.79741 -27.79442,49.87968 -21.81217,6.29153 -45.10336,-6.92547 -51.35592,-28.64615 -6.46143,-22.44628 7.14318,-46.4093 29.49786,-52.83214 23.0804,-6.63135 47.71527,7.36088 54.30839,30.34958 6.80127,23.7145 -7.5786,49.02123 -31.2013,55.78461 -4.5934,1.31513 -9.38955,1.90499 -14.16473,1.74594" stroke="#ECF0F1" stroke-width="2" fill="none"/>
  
  <path class="line" d="m 515.71316,372.81705 c 0,0 -150.79675,-7.39289 -47.34848,86.85998 103.44828,94.25287 -247.67502,128.09561 -247.67502,128.09561" stroke="#ECF0F1" stroke-width="2" fill="none"/>
  
  
  <path class="star" d="m 219.31818,562.2763 9.4159,23.88467 16.55292,-8.8701 -19.806,16.33583 13.55109,13.00174 -21.65667,-13.78857 -8.17788,16.90561 6.42143,-24.85763 -18.6053,-2.5535 25.62534,-1.57428 z" stroke="#ECF0F1" stroke-width="2" fill="none"/>  
  
</svg>