JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div id="lineDrawing">

  <svg viewBox="0 0 500 50" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1" class="lines">
  <path d="M 26.863 38.006 L 10.143 38.006 L 10.143 12.006 L 17.023 12.006 L 17.023 32.246 L 26.863 32.246 L 26.863 38.006 Z"/>
  <path d="M 43.712 38.475 C 41.899 38.475 40.252 38.168 38.772 37.555 C 37.292 36.942 36.025 36.055 34.972 34.895 C 33.919 33.735 33.099 32.308 32.512 30.615 C 31.925 28.922 31.632 27.008 31.632 24.875 C 31.632 22.742 31.925 20.842 32.512 19.175 C 33.099 17.508 33.919 16.108 34.972 14.975 C 36.025 13.842 37.292 12.982 38.772 12.395 C 40.252 11.808 41.899 11.515 43.712 11.515 C 45.499 11.515 47.139 11.808 48.632 12.395 C 50.125 12.982 51.399 13.848 52.452 14.995 C 53.505 16.142 54.325 17.542 54.912 19.195 C 55.499 20.848 55.792 22.742 55.792 24.875 C 55.792 27.008 55.499 28.922 54.912 30.615 C 54.325 32.308 53.505 33.735 52.452 34.895 C 51.399 36.055 50.125 36.942 48.632 37.555 C 47.139 38.168 45.499 38.475 43.712 38.475 Z M 43.712 32.555 C 45.285 32.555 46.519 31.868 47.412 30.495 C 48.305 29.122 48.752 27.248 48.752 24.875 C 48.752 22.502 48.305 20.668 47.412 19.375 C 46.519 18.082 45.285 17.435 43.712 17.435 C 42.139 17.435 40.905 18.082 40.012 19.375 C 39.119 20.668 38.672 22.502 38.672 24.875 C 38.672 27.248 39.119 29.122 40.012 30.495 C 40.905 31.868 42.139 32.555 43.712 32.555 Z"/>
  <path d="M 68.711 38.007 L 61.831 38.007 L 61.831 12.007 L 71.671 12.007 C 73.058 12.007 74.384 12.14 75.651 12.407 C 76.918 12.674 78.024 13.127 78.971 13.767 C 79.918 14.407 80.671 15.267 81.231 16.347 C 81.791 17.427 82.071 18.78 82.071 20.407 C 82.071 22.274 81.691 23.82 80.931 25.047 C 80.171 26.274 79.151 27.234 77.871 27.927 L 83.511 38.007 L 75.831 38.007 L 71.351 29.287 L 68.711 29.287 L 68.711 38.007 Z M 68.711 17.447 L 68.711 23.847 L 71.191 23.847 C 73.964 23.847 75.351 22.7...

JavaScript

var lineDrawing = anime({
  targets: '#lineDrawing .lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) {
    return i * 250
  },
  direction: 'alternate',
  loop: true
});