Loading

Vivus js

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Vivus js</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!-- Research Icon -->
<svg version="1.1" id="researchIcon"  x="0px" y="0px"	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve" onclick="hi.reset().play();" data-duration="60" >
<style type="text/css">
	.st0{fill:#FFFFFF;stroke:#464949;stroke-width:2;stroke-miterlimit:10;}
	.st1{fill:#FCBD38;}
	.st2{fill:#464949;}
	.st3{fill:none;stroke:#464949;stroke-width:2;stroke-linecap:square;stroke-miterlimit:10;}
</style>
<g>
	<path id="XMLID_42_" class="st0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z"/>
	<g id="XMLID_40_">
		<rect x="41.4" y="25.9" class="st1" data-start="0" data-duration="50"  width="16.3" height="11.5"/>
		<path class="st2" d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z"/>
	</g>
	<polygon id="XMLID_43_" class="st3" points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2 	"/>
	<rect id="XMLID_44_" x="47.8" y="28.9" class="st2" width="3.4" height="6.3"/>
	<line id="XMLID_46_" class="st3" x1="62.9" y1="33.3" x2="75.6" y2="33.3"/>
	<line id="XMLID_47_" class="st3" x1="62.9" y1="28.7" x2="66.6" y2="28.7"/>
	<line id="XMLID_48_" class="st3" x1="36.6" y1="33.3" x2="23.8" y2="33.3"/>
	<line id="XMLID_2_" class="st3" x1="76.3" y1="85.3" x2="23.7" y2="85.3"/>
	<line id="XMLID_64_" class="st3" x1="60.7" y1="37.7" x2="38.8" y2="37.7"/>
	<line id="XMLID_70_" class="st3" x1="58.7" y1="44.3" x2="40.8" y2="44.3"/>
	<line id="XMLID_79_" class="st3" x1="60.2" y1="51.7" x2="39.3" y2="51.7"/>
	<line id="XMLID_80_" class="st3" x1="61.7" y1="61" x2="37.8" y2="61"/>
	<line id="XMLID_90_" class="st3" x1="63.5" y1="69.3" x2="36.8" y2="69.3"/>
	<line id="XMLID_45_" class="st3" x1="36.6" y1="28.7" x2="32.8" y2="28.7"/>
	<g id="XMLID_49_">
		<path class="st2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
			c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z"/>
	</g>
</g>
</svg>


<!-- Research Icon -->
<!-- <svg version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">

  <path id="XMLID_42_" class="research0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z" />
  <g id="XMLID_40_">
    <rect x="41.4" y="25.9" class="research1" width="16.3" height="11.5" />
    <path class="research2" d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z" />
  </g>
  <polygon id="XMLID_43_" class="research3" points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2 	" />
  <rect x="41" y="28.9" class="researchDoor">
  </rect>
  <line id="leftWindTop" class="research3" x1="36.6" y1="28.7" x2="32.8" y2="28.7">
    <animateTransform attributeName="transform" type="translate" from="0 0" to="-40 0" begin="0s; leftWindBottom.end" dur="5s" repeatCount="indefinite" />
  </line>
  <line id="leftWindBottom" class="research3" x1="36.6" y1="33.3" x2="23.8" y2="33.3">
    <animateTransform attributeName="transform" type="translate" from="0 0" to="-40 0" begin="2s; leftWindTop.end" dur="5s" repeatCount="indefinite" />
  </line>
  <line id="rightWindTop" class="research3" x1="62.9" y1="28.7" x2="66.6" y2="28.7">
    <animateTransform attributeName="transform" type="translate" from="0 0" to="40 0" begin="0s; rightWindBottom.end" dur="5s" repeatCount="indefinite" />
  </line>
  <line id="rightWindBottom" class="research3" x1="62.9" y1="33.3" x2="75.6" y2="33.3">
    <animateTransform attributeName="transform" type="translate" from="0 0" to="40 0" begin="2s; rightWindTop.end" dur="5s" repeatCount="indefinite" />
  </line>
  <line id="XMLID_2_" class="research3" x1="76.3" y1="85.3" x2="23.7" y2="85.3" />
  <line id="XMLID_64_" class="research3" x1="60.7" y1="37.7" x2="38.8" y2="37.7" />
  <line id="XMLID_70_" class="research3" x1="58.7" y1="44.3" x2="40.8" y2="44.3" />
  <line id="XMLID_79_" class="research3" x1="60.2" y1="51.7" x2="39.3" y2="51.7" />
  <line id="XMLID_80_" class="research3" x1="61.7" y1="61" x2="37.8" y2="61" />
  <line id="XMLID_90_" class="research3" x1="63.5" y1="69.3" x2="36.8" y2="69.3" />
  <g id="XMLID_49_">
    <path class="research2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
			c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z" />
  </g>
</svg> -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/vivus/0.1.2/vivus.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
body {
  padding: 50px;
}
/* Downloaded from https://ahoj.co.uk/ */
//vivus svg js
var hi = new Vivus('researchIcon', {
  type: 'scenario',
  duration: 60,
  start: 'autostart',
  forceRender: false,
  dashGap: 20
});

This awesome code is write by Nikhil Krishnan, you can se more from this user in the personal repository