JSFiddle - React, Tailwind, and code Playground

by Bear Bear

HTML

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" viewBox="0 0 200 80" style="enable-background:new 0 0 200 80;" xml:space="preserve">
<g class="st0">
<path class="st1" d="M40.3,61.1V37.6h-4v-3.6h4v-2.9c0-1.8,0.2-3.2,0.5-4c0.4-1.2,1.2-2.1,2.3-2.9c1.1-0.7,2.7-1.1,4.7-1.1
c1.3,0,2.7,0.2,4.3,0.5l-0.7,4c-0.9-0.2-1.8-0.3-2.7-0.3c-1.4,0-2.4,0.3-2.9,0.9c-0.6,0.6-0.9,1.7-0.9,3.3v2.5h5.3v3.6h-5.3v23.4
H40.3z"/>
<path class="st1" d="M72.2,52.4l4.7,0.6c-0.7,2.8-2.1,4.9-4.1,6.4c-2,1.5-4.6,2.3-7.7,2.3c-3.9,0-7.1-1.2-9.4-3.6
s-3.5-5.8-3.5-10.2c0-4.5,1.2-8.1,3.5-10.6s5.4-3.8,9.1-3.8c3.6,0,6.6,1.2,8.8,3.7S77,43.1,77,47.5c0,0.3,0,0.7,0,1.2H56.9
c0.2,3,1,5.2,2.5,6.8c1.5,1.6,3.4,2.4,5.6,2.4c1.7,0,3.1-0.4,4.3-1.3C70.5,55.7,71.5,54.3,72.2,52.4z M57.2,45h15.1
c-0.2-2.3-0.8-4-1.7-5.1c-1.5-1.8-3.3-2.6-5.7-2.6c-2.1,0-3.9,0.7-5.3,2.1C58.1,40.8,57.3,42.6,57.2,45z"/>
<path class="st2" d="M82.6,61.1v-27h4.1v4.1c1-1.9,2-3.2,2.9-3.8s1.9-0.9,2.9-0.9c1.5,0,3.1,0.5,4.7,1.5l-1.6,4.2
c-1.1-0.7-2.2-1-3.4-1c-1,0-1.9,0.3-2.7,0.9c-0.8,0.6-1.4,1.4-1.7,2.5c-0.5,1.6-0.8,3.4-0.8,5.3v14.1H82.6z"/>
<path class="st2" d="M99.9,61.1v-27h4.1v4.1c1-1.9,2-3.2,2.9-3.8s1.9-0.9,2.9-0.9c1.5,0,3.1,0.5,4.7,1.5l-1.6,4.2
c-1.1-0.7-2.2-1-3.4-1c-1,0-1.9,0.3-2.7,0.9s-1.4,1.4-1.7,2.5c-0.5,1.6-0.8,3.4-0.8,5.3v14.1H99.9z"/>
<path class="st3" d="M135.7,52.4l4.7,0.6c-0.7,2.8-2.1,4.9-4.1,6.4s-4.6,2.3-7.7,2.3c-3.9,0-7.1-1.2-9.4-3.6s-3.5-5.8-3.5-10.2
c0-4.5,1.2-8.1,3.5-10.6s5.4-3.8,9.1-3.8c3.6,0,6.6,1.2,8.8,3.7s3.4,5.9,3.4,10.4c0,0.3,0,0.7,0,1.2h-20.1c0.2,3,1,5.2,2.5,6.8
s3.4,2.4,5.6,2.4c1.7,0,3.1-0.4,4.3-1.3S135,54.3,135.7,52.4z M120.7,45h15.1c-0.2-2.3-0.8-4-1.7-5.1c-1.5-1.8-3.3-2.6-5.7-2.6
c-2.1,0-3.9,0.7-5.3,2.1S120.9,42.6,120.7,45z"/>
<path class="st4"...

CSS

.st1,
 .st2,
 .st3,
 .st4 {
  fill:#0060e6;
  stroke:#0060e6;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  opacity: 1;
}

.st1{
  -webkit-animation: hello1 4s;
  animation: hello1 4s;
}
.st2{
  -webkit-animation: hello2 4s;
  animation: hello2 4s;
}
.st3{
  -webkit-animation: hello3 4s;
  animation: hello3 4s;
}
.st4{
  -webkit-animation: hello4 4s;
  animation: hello4 4s;
}
@-webkit-keyframes hello1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}
 @-webkit-keyframes hello2 {
   0% {
     opacity: 0;
   }
   40% {
     opacity: 1;
   }
}
 @-webkit-keyframes hello3 {
   0% {
     opacity: 0;
   }
   60% {
     opacity: 1;
   }
}
 @-webkit-keyframes hello4 {
   0% {
     opacity: 0;
   }
   80% {
     opacity: 1;
   }
}