JSFiddle - React, Tailwind, and code Playground

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 10 10" height="300px" width="300px">
  <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,-287)" id="layer1">
    <path id="path22" d="m 4.6538305,287.90282 c -0.09835,-0.03 -0.1278057,-0.0234 -0.2338607,-0.0234 -0.093545,0 -0.1870887,0 -0.280633,0 -0.1169305,0 -0.2338609,0 -0.3507914,0 -0.046772,0 -0.093544,0 -0.1403165,0 -0.015589,0 -0.031981,-0.005 -0.046772,0 -0.033073,0.011 -0.060472,0.0358 -0.093545,0.0468 -0.0074,0.002 -0.015991,-0.002 -0.023386,0 -0.016536,0.006 -0.029862,0.0192 -0.046772,0.0234 -0.036684,0.009 -0.080246,-0.009 -0.1169305,0 -0.033821,0.008 -0.060471,0.0358 -0.093544,0.0468 -0.077209,0.0257 -0.1573749,0.0423 -0.2338607,0.0702 -0.010361,0.004 -0.015592,0.0156 -0.023386,0.0234 -0.015592,0.008 -0.029862,0.0192 -0.046772,0.0234 -0.015126,0.004 -0.031484,-0.003 -0.046772,0 -0.061107,0.0122 -0.1077016,0.0468 -0.1637028,0.0702 -0.0775,0.0323 -0.1576297,0.0584 -0.2338607,0.0935 -0.025519,0.0118 -0.045019,0.0342 -0.070158,0.0468 -0.022048,0.011 -0.04811,0.0124 -0.070158,0.0234 -0.00986,0.005 -0.014214,0.0173 -0.023387,0.0234 -0.014504,0.01 -0.031825,0.0144 -0.046772,0.0234 -0.063061,0.0378 -0.1225273,0.0817 -0.1870888,0.11693 -0.02164,0.0118 -0.046772,0.0156 -0.070158,0.0234 -0.085749,0.0468 -0.1759759,0.0861 -0.2572469,0.14032 -0.014503,0.01 -0.011061,0.0344 -0.023386,0.0468 -0.024651,0.0246 -0.065655,0.0258 -0.093544,0.0468 -0.017639,0.0132 -0.029133,0.0335 -0.046772,0.0468 -0.013945,0.0105 -0.032827,0.0129 -0.046772,0.0234 -0.017639,0.0132...

CSS

#path22{
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 1s linear forwards;
}
@keyframes dash{
  to{
    stroke-dashoffset: 0;
  }
}