JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.1/vivus.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
  <style type="text/css">
    .st0 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-miterlimit: 10;
    }
    
    .st1 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-miterlimit: 10;
    }
    
    .st2 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-miterlimit: 10;
    }
    
    .st3 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    
    .st4 {
      fill: none;
      stroke: #000000;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 2.0339, 3.0509;
    }

  </style>
  <g>
    <g>
      <path d="M28.2,82.5c-2.6,0-4.7-2.1-4.7-4.7s2.1-4.7,4.7-4.7c0.6,0,1,0.4,1,1s-0.4,1-1,1c-1.5,0-2.7,1.2-2.7,2.7s1.2,2.7,2.7,2.7    s2.7-1.2,2.7-2.7c0-0.6,0.4-1,1-1s1,0.4,1,1C33,80.4,30.8,82.5,28.2,82.5z"></path>
    </g>
    <g>
      <path d="M71.1,82.5c-2.6,0-4.7-2.1-4.7-4.7c0-0.6,0.4-1,1-1s1,0.4,1,1c0,1.5,1.2,2.7,2.7,2.7s2.7-1.2,2.7-2.7s-1.2-2.7-2.7-2.7    c-0.6,0-1-0.4-1-1s0.4-1,1-1c2.6,0,4.7,2.1,4.7,4.7S73.7,82.5,71.1,82.5z"></path>
    </g>
    <g>
      <path d="M71,78.5H28.3c-0.6,0-1-0.4-1-1V46.9c0-0.6,0.4-1,1-1s1,0.4,1,1v29.6H70V46.9c0-0.6,0.4-1,1-1s1,0.4,1,1v30.6    C72,78,71.5,78.5,71,78.5z"></path>
    </g>
    <g>
      <path d="M62.7,78.5H36.5c-0.6,0-1-0.4-1-1V53.2c0-0.6,0.4-1,1-1h26.2c0.6,0,1,0.4,1,1v24.3C63.7,78,63.3,78.5,62.7,78.5z     M37.5,76.5h24.2V54.2H37.5V76.5z"></path>
    </g>
    <path...

CSS

svg * {
  fill: none !important;
  stroke: currentColor !important;
}

JavaScript

["delayed", "async", "oneByOne"].forEach(function(type) {
  var button = document.createElement("button");
  button.innerHTML = type;
  button.onclick = function() {
    [].forEach.call(document.querySelectorAll("svg"), function(svg) {
      new Vivus(svg, {
        type: type,
        duration: 200
      });
    });
  }
  document.body.appendChild(button);
});