<body>
  <div class="container">
    <h3 id="rerun">Click me!</h3>
<svg id="animate" width="600px" height="700px" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>background</title>
  <rect fill="#262626" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <line stroke="#fff" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="244" x2="145.5" y1="198" x1="83.5" stroke-width="3" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="243" x2="369.5" y1="243" x1="145.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#fff" fill="none"/>
  <line transform="rotate(-69 400.50000000000006,222.99999999999997) " stroke="#fff" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_3" y2="246" x2="431.5" y1="200" x1="369.5" stroke-width="3" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="200" x2="433.5" y1="198" x1="83.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#fff" fill="none"/>
  <line stroke="#fff" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_5" y2="4.00001" x2="177.5" y1="197" x1="85.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_6" y2="200" x2="253.5" y1="5" x1="176.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#fff" fill="none"/>
  <line stroke="#fff" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_7" y2="201" x2="175.5" y1="7" x1="175.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke="#fff" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_8" y2="317" x2="-70.5" y1="320" x1="-75.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <ellipse stroke="#fff" ry="13" rx="12.5" id="svg_9" cy="140" cx="345" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke="#fff" stroke-linecap="null" stroke-linejoin="null" id="svg_10" y2="153" x2="344.5" y1="200" x1="344.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke="#fff" stroke-linecap="null" stroke-linejoin="null" id="svg_11" y2="168" x2="346.5" y1="162" x1="328.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke="#fff" stroke-linecap="null" stroke-linejoin="null" id="svg_12" y2="162" x2="319.5" y1="175" x1="344.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke="#fff" stroke-linecap="null" stroke-linejoin="null" id="svg_13" y2="276" x2="265.5" y1="161" x1="328.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke="#fff" stroke-linecap="null" stroke-linejoin="null" id="svg_17" y2="283" x2="215.5" y1="274" x1="266.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke="#fff" stroke-linecap="null" stroke-linejoin="null" id="svg_18" y2="323" x2="289.5" y1="274" x1="266.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <line stroke="#fff" stroke-linecap="null" stroke-linejoin="null" id="svg_19" y2="323" x2="287.5" y1="282" x1="217.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
 </g>
</svg>
  </div>
</body>
body {
  background-color:#262626;
}

h3 {
  color:white;
}

.container {
  padding: 10px;
  text-align: center;
}

#rerun {
  cursor: pointer;
  color:#F59D89;
}

var animate = new Vivus('animate', {
  type: 'scenario',
  duration: 80,
  start: 'autostart'
});

document.getElementById("rerun").addEventListener("click", function(){
  animate.stop().reset().play(2);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. //cdn.jsdelivr.net/vivus/latest/vivus.min.js