Vivus Portrait

by Lazar Mladenovic

HTML

<script src="http://maxwellito.github.io/vivus/dist/vivus.js"></script>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="email2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#7932aa;stroke-width:17;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path data-start="0" data-duration="55" class="st0" d="M59.9,142.3c-23.7,4.8-41.5,25.8-41.5,50.9v265.7c0,19.5,15.8,35.3,35.3,35.3h405.5c19.5,0,35.3-15.8,35.3-35.3
	V193.4c0-24.1-16.4-44.4-38.6-50.3"/>
<g>
	<line data-start="20" data-duration="15" class="st0" x1="51.9" y1="444.6" x2="167.2" y2="354.4"/>
	<line data-start="40" data-duration="15" class="st0" x1="461.1" y1="444.6" x2="345.8" y2="354.4"/>
</g>
<path data-start="10" data-duration="45" class="st0" d="M47.9,214.1l186.2,143.2c10.4,8,24.9,8.2,35.5,0.4l195.5-143.6"/>
<path data-start="55" data-duration="45" class="st0" d="M429.3,239.6V51.7c0-18.2-14.8-33-33-33H116.4c-18.2,0-33,14.8-33,33v187.9"/>
<line data-start="100" data-duration="10" class="st0" x1="162.5" y1="133.1" x2="267.2" y2="133.1"/>
<line data-start="110" data-duration="5" class="st0" x1="162.5" y1="198.6" x2="217" y2="198.6"/>
<line data-start="115" data-duration="10" class="st0" x1="244.8" y1="198.6" x2="348.2" y2="198.6"/>
<line data-start="125" data-duration="10" class="st0" x1="162.5" y1="247.8" x2="281.3" y2="247.8"/>
<line data-start="135" data-duration="5" class="st0" x1="311.7" y1="247.8" x2="348.2" y2="247.8"/>
<line data-start="140" data-duration="10" class="st0" x1="217" y1="297" x2="295.1" y2="297"/>
</svg>

CSS

#email2 {
  width: 300px;
}

JavaScript

new Vivus('email2', {type: 'scenario'}, function (obj) {
  obj.el.classList.add('finished');
});