JSFiddle - React, Tailwind, and code Playground

IDX test

by Andres Abadia

HTML

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 132.29166 52.916668" height="200" width="500">
  <defs id="defs2"/>
  <metadata id="metadata5">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
        <dc:title/>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g transform="translate(0,-244.08331)" id="layer1">
    <path class="path" id="path70" d="m 18.842501,257.71136 c 0.149535,-0.10084 0.764794,0.25855 1.529191,1.22022 0.196755,0.25309 0.388199,0.55336 0.557612,0.90185 0.105791,0.21431 0.208669,0.4442 0.306376,0.68957 0.0846,0.21102 0.169238,0.44671 0.241533,0.70497 0.169943,0.65546 0.200741,1.23899 0.244241,1.83008 0.117067,1.42289 0.212862,3.12676 0.225507,4.93029 0.0015,0.57738 -0.03047,1.12391 -0.06391,1.66914 -0.01262,0.26794 -0.01576,0.65078 -0.08651,1.12331 -0.07549,0.4334 -0.173835,0.74749 -0.208152,0.9506 -0.08707,0.46731 -0.146887,0.95925 -0.226174,1.51065 -0.0169,0.11755 -0.03449,0.23621 -0.05319,0.35614 -0.146044,0.94387 -0.304873,1.86207 -0.514521,2.78028 -0.14313,0.62749 -0.313827,1.13596 -0.401702,1.56696 -0.08573,0.39154 -0.129329,0.88998 -0.242306,1.45202 -0.09982,0.48526 -0.224216,0.81653 -0.26429,1.0441 -0.09912,0.52668 -0.14919,1.12922 -0.262963,1.75351 -0.08273,0.44053 -0.205813,0.82165 -0.321341,1.14148 -0.09094,0.19769 -0.13218,0.49327 -0.180278,0.81003 0,0 0,0 0,0 -0.143903,1.0499 -0.195733,1.61354 -0.334654,2.4358 -0.232036,1.37212 -0.510122,2.14275 -0.746277,2.13227 -0.248869,-0.011 -0.425313,-0.80529 -0.585064,-2.1678 -0.07402,-0.62966 -0.168473,-1.55784 -0.198476,-2.49238 0,0 0,0 0,0 -0.01548,-0.34302 -0.01073,-0.7733 0.09282,-1.26765 0.06279,-0.3133 0.122399,-0.61397 0.130384,-0.87024 0.03216,-0.49861...

CSS

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill-opacity: 0;
  animation: dash 10s linear forwards, bg 2s ease-in forwards;
}

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

@keyframes bg {
  to {
    fill-opacity: 0.8;
  }
}