SVG animation

SVG logo paths animation with http://maxwellito.github.io/vivus/

by id0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.0/vivus.min.js"></script>
<div class="b-layout">
<svg version="1.1" id="logo-a" class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="262.9 -67.4 490 560.8" enable-background="new 262.9 -67.4 490 560.8" xml:space="preserve">
<g>
	<defs>
		<path id="logo-a_SVGID_1_" d="M262.9-67.4v560.8h490V-67.4H262.9z M381.5,204.6l-16.8-29.1l29.1-16.8l16.8,29.1L381.5,204.6z
				 M621,268.2l-16.8-29.1l29.1-16.8l16.8,29.1L621,268.2z"/>
	</defs>
	<clipPath id="logo-a_SVGID_2_">
		<use xlink:href="#logo-a_SVGID_1_"  overflow="visible"/>
	</clipPath>
	
		<line id="logo-a_path-a-1" data-start="0" data-duration="30" clip-path="url(#logo-a_SVGID_2_)" fill="none" stroke="#1D1D1B" stroke-width="9" stroke-miterlimit="10" x1="267.4" y1="82.2" x2="267.4" y2="344.1"/>
	<path id="logo-a_path-a-2-1" data-start="30" data-duration="30" clip-path="url(#logo-a_SVGID_2_)" fill="none" stroke="#1D1D1B" stroke-width="9" stroke-miterlimit="10" d="
		M267.4,344.1c0-9.2,4.4-12.1,12.6-17.5l215.3-124.1c10.2-6.8,12.6-9.7,12.6-21.3V71.1"/>
	<path id="logo-a_path-a-2-2" data-start="30" data-duration="30" clip-path="url(#logo-a_SVGID_2_)" fill="none" stroke="#1D1D1B" stroke-width="9" stroke-miterlimit="10" d="
		M267.4,344.1c0,5.3,2.4,9.7,6.8,12.1l226.9,130.9c2,1.2,4.4,1.8,6.8,1.8"/>
	
		<line id="logo-a_path-a-3-1" data-start="60" data-duration="30" clip-path="url(#logo-a_SVGID_2_)" fill="none" stroke="#1D1D1B" stroke-width="9" stroke-miterlimit="10" x1="507.9" y1="489.1" x2="507.9" y2="354.9"/>
	<path id="logo-a_path-a-3-2" data-start="60" data-duration="30" clip-path="url(#logo-a_SVGID_2_)" fill="none" stroke="#1D1D1B" stroke-width="9" stroke-miterlimit="10" d="
		M507.9,488.9c2.3,0,4.7-0.6,6.8-1.8l1.4-0.8l225.5-130.1c4.4-2.4,6.8-7.3,6.8-12.1l0,0c0-8.7-4.4-12.1-12.6-17.5l-110.5-63.5"/>
	
		<line id="logo-a_path-b-1" data-start="0" data-duration="30" clip-path="url(#logo-a_SVGID_2_)"...

CSS

body {
  background: linear-gradient(297deg, #4b4b4b, #e4e4e4, #9f9f9f);
  background-size: 600% 600%;
  -webkit-animation: b-layuot-background 30s ease infinite;
  -moz-animation: b-layuot-background 30s ease infinite;
  animation: b-layuot-background 30s ease infinite;
  /* min-width: 320px; */
}

.b-layout {
  position: relative;
  margin: 0 auto;
  padding: 20px;
  width: 300px;
  max-width: 80%;
  height: 344px;
}

@-webkit-keyframes b-layuot-background {
    0%{background-position:0% 23%}
    50%{background-position:100% 78%}
    100%{background-position:0% 23%}
}
@-moz-keyframes b-layuot-background {
    0%{background-position:0% 23%}
    50%{background-position:100% 78%}
    100%{background-position:0% 23%}
}
@keyframes b-layuot-background { 
    0%{background-position:0% 23%}
    50%{background-position:100% 78%}
    100%{background-position:0% 23%}
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 100%;
  stroke-linecap: round;
}

#logo-b {
  visibility: hidden;
}

JavaScript

var animate_logo_a = new Vivus('logo-a', {type: 'scenario', duration: 90, start: 'autostart', animTimingFunction: Vivus.EASE}, function() {
  var status = animate_logo_a.getStatus();
  
  if ( status === "end" ) {
  	document.getElementById("logo-a").style.visibility="hidden";
    animate_logo_a
      .stop()
      .play(-1)
  } else {
  	document.getElementById("logo-a").style.visibility="visible";
    animate_logo_a
      .reset()
      .play()
  }
});

var animate_logo_b = new Vivus('logo-b', {type: 'scenario', duration: 90, start: 'autostart', animTimingFunction: Vivus.EASE}, function() {
  var status = animate_logo_b.getStatus();
  
  if ( status === "end" ) {
  	document.getElementById("logo-b").style.visibility="visible";
    animate_logo_b
      .stop()
      .play(-1)
  } else {
  	document.getElementById("logo-b").style.visibility="hidden";
    animate_logo_b
      .reset()
      .play()
  }
});