JSFiddle - React, Tailwind, and code Playground

by oeffe

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 738.59 173.69"><defs></defs><title>Element 1</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1">

<path class="cls-1" d="M5.92,96c2.32,11.08,19.3,16.26,35,16.26,10.72,0,33.59-4.47,33.59-20.73,0-31.45-73.26-2.68-73.26-41.28,0-17.16,21.26-26.09,37.88-26.09,13.58,0,32.52,2.32,38.6,18.23,1.25,5-4.65,6.07-5.9,2.32C66.86,31.3,49,30,39.16,30,26.29,30,7.35,35.59,7.35,50.24c0,30.2,73.45,2.32,73.45,41.28C80.8,113,55.42,118,41,118,26.29,118,3.6,114.39.2,97.06-1.23,92.41,5.38,91.16,5.92,96Z"/>

<path class="cls-1" d="M92.23,29.33c-.89-3.57,3.75-5.9,6.07-2.15l40.57,80.24,39.67-80.24c1.79-4.46,8.22-1.78,6.08,2.15L124,149.06c-2.32,4.83-7.33,2.5-5.72-2l16.62-33.6Z"/>

<path class="cls-1" d="M200.87,96c2.33,11.08,19.3,16.26,35,16.26,10.72,0,33.59-4.47,33.59-20.73,0-31.45-73.26-2.68-73.26-41.28,0-17.16,21.26-26.09,37.88-26.09,13.58,0,32.52,2.32,38.6,18.23,1.25,5-4.65,6.07-5.9,2.32-5-13.4-22.87-14.66-32.7-14.66-12.87,0-31.81,5.55-31.81,20.2,0,30.2,73.45,2.32,73.45,41.28C275.75,113,250.37,118,235.9,118c-14.66,0-37.35-3.58-40.75-20.91C193.72,92.41,200.34,91.16,200.87,96Z"/>

<path class="cls-1" d="M337.4,25.76c4.64,0,4.64,5.71,0,5.71H312.56V86.34c0,12.86,2.14,26.09,18.76,26.09A25.62,25.62,0,0,0,342,109.75c3.75-1.79,7.15,2.86,2.33,5.36a26.88,26.88,0,0,1-13.05,3c-20,0-24.84-15.18-24.84-31.8V31.47H289.86c-4.82,0-4.82-5.71,0-5.71h16.62V2.88c0-3.93,6.08-3.75,6.08,0V25.76Z"/>

<path class="cls-2"...

CSS

body {
  background-color: #201f2b;
}

svg .cls-1, svg:hover {
  stroke: #fff !important;
  stroke-width: 1;
  fill: transparent;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: dash 5s forwards linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}

svg .cls-2, svg:hover .cls-2,
svg .cls-3, svg:hover .cls-3 {
  stroke: #66c3cb !important;
  stroke-width: 1;
  fill: transparent;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash2 5s forwards linear;
}

@keyframes dash2 {
  to {
    stroke-dashoffset: 0;
    fill: #66c3cb;
  }
}