JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 310.1 64.4" style="enable-background:new 0 0 310.1 64.4;" xml:space="preserve">
            <g>
                <path class="svg-path animate" d="M26.5,13.2h8.7c0,10.6,0,21.3,0,31.9h-8.4l-0.5-4c-2.1,3.4-6.7,4.7-9.8,4.7C6.9,46,0,39.7,0,29.2
                    c0-10.6,7.3-16.8,16.7-16.7c4,0,7.8,1.6,9.4,4.4L26.5,13.2z M9.3,29.2c0,5.3,3.7,8.4,8.4,8.4c5.2,0,8.5-4.1,8.5-8.1
                    c0-4.6-2.9-8.8-8.5-8.8C13.1,20.7,9.3,23.9,9.3,29.2z"></path>
                 <path class="svg-path animate" d="M50.9,0v45.2h-9.2V0H50.9z"></path>
                 <path class="svg-path animate" d="M64.9,32.3c0.5,3.1,3.4,5.6,8.7,5.6c2.5,0,6-0.6,8.3-2.5l5.2,5.8c-3.4,3.4-8.9,4.7-13.7,4.7c-11.6,0-17.9-6.8-17.9-17
                    c0-9.7,6.5-16.5,16.9-16.5c10.9,0,18,6.8,16,19.8H64.9z M80,25.5c-0.2-3.5-3.7-5.1-7.6-5.1c-3.7,0-6.6,1.9-7.5,5.1H80z"></path>
                 <path class="svg-path animate" d="M111.2,13.3h11.1v0.3l-10.1,15.5L122.9,45v0.2h-11.1l-5.9-9.6l-5.8,9.6H88.9V45l10.8-15.8L89.5,13.6v-0.3h11.1l5.3,9.5
                    L111.2,13.3z"></path>
                 <path class="svg-path animate" d="M149.3,13.2h8.7c0,10.6,0,21.3,0,31.9h-8.4l-0.5-4c-2.1,3.4-6.7,4.7-9.8,4.7c-9.6,0.1-16.5-6.1-16.5-16.7
                    c0-10.6,7.3-16.8,16.7-16.7c4,0,7.8,1.6,9.4,4.4L149.3,13.2z M132.1,29.2c0,5.3,3.7,8.4,8.4,8.4c5.2,0,8.5-4.1,8.5-8.1
                    c0-4.6-2.9-8.8-8.5-8.8C135.8,20.7,132.1,23.9,132.1,29.2z"></path>
                 <path class="svg-path animate" d="M187.3,45.2V28.3c0-4.9-2.1-7.4-6.6-7.4c-4.3-0.1-7.2,3.7-7.2,7.8v16.5h-9.2V13.2h8.4l0.3,4.1c2.8-3.7,6.5-4.9,10.3-4.8
                    c7.2,0,13.3,3.4,13.3,15.8v16.9H187.3z"></path>
                 <path class="svg-path animate" d="M236,0v45.2h-8.3l-0.6-4.1c-3,3.8-6.6,4.7-10.6,4.7c-9.4,0-15.8-6.6-15.8-16.5c0-10.3,6.5-16.6,15.9-16.6
                   ...

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

svg {
  width: 500px;
}

path {
  fill: #ff9934;
  stroke: #000000;
  stroke-width: 0.5;
}

.animate {
  fill-opacity: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration: 1;
  animation-name: DrawLine, FadeStroke, FillIn;
  animation-duration: 4s, 1s, 2s;
  animation-delay: 0s, 3s, 3s;
  stroke-dashArray: 1500;
  stroke-dashoffset: 1500;
}


@keyframes DrawLine {
  to {
    stroke-dashOffset: 0;
  }
}

@keyframes FadeStroke {
  to {
    stroke-opacity: 0;
  }
}

@keyframes FillIn {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

JavaScript

jQuery(document).ready(function($) {
  setInterval(function() {
    removeAnimation();
    restartAnimation()
  }, 8000);

  function removeAnimation() {
    setTimeout(function() {
      $('path').removeClass('animate');
    }, 5000);
  }

  function restartAnimation() {
    setTimeout(function() {
      $('path').addClass('animate');
    }, 5500);
  }
});