JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<button id="test">Draw</button>

<div class="cont">

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="iphone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="771px" height="1610px" viewBox="0 0 771 1610" style="enable-background:new 0 0 771 1610;" xml:space="preserve">
<style type="text/css">
<![CDATA[
	.st0{fill:none;stroke:#34383C;stroke-width:2;stroke-miterlimit:10;}
	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#34383C;stroke-width:2;stroke-miterlimit:10;}
	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#ECEEF1;}
]]>
</style>
<path id="Squiggles" class="st0"...

CSS

body {
    background: #eceef1;
}
button {
    font-family: gotham;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 12px;
    padding: .5em 1em;
    text-transform: uppercase;
    border-radius: 3px;
    border: 1px solid #34383c;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    background: 0;
    cursor: pointer;
}
.cont {
    width: 370px;
    height: 772px;
    margin: 20px auto;
    overflow: hidden;
}
svg {
    width: 370px;
    height: auto;
    margin: -419px auto 0;
    vertical-align: top;
    stroke-dasharray: 30000;
    stroke-dashoffset: -30000;
}

.draw svg {
    
    -webkit-animation: dash 5s linear forwards;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

$("#test").click(function(e){

   e.preventDefault();
    
    
    $('.cont').toggleClass('draw');
});