JSFiddle - React, Tailwind, and code Playground

by helderalvesoliveira

HTML

<div class="svg-wrapper">
  <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"
   version="1.1"
   id="svg4260"
   viewBox="0 0 113.66822 105.9808"
   height="29.910137mm"
   width="32.079697mm">
  <defs
     id="defs4262" />
  <metadata
     id="metadata4265">
    <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></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-368.88017,-439.3718)"
     id="layer1">
    <g
       transform="matrix(1.25,0,0,-1.25,437.47763,442.58723)"
       id="g52">
      <path class="path"
         id="path54"
         stroke="#fff"
         style="fill:#404041;fill-opacity:1;fill-rule:nonzero"
         d="M 0,0 C 1.965,2.756 4.033,3.271 6.275,1.672 8.611,0.004 8.795,-2.119 6.83,-4.873 l -53.463,-74.789 c -1.955,-2.741 -4.019,-3.254 -6.357,-1.586 -2.24,1.6 -2.428,3.719 -0.471,6.46 L 0,0 Z" />
    </g>
    <g
       transform="matrix(1.25,0,0,-1.25,472.30426,442.58723)"
       id="g56">
      <path
      class="path"
         id="path58"
         stroke="#fff"
         style="fill:#404041;fill-opacity:1;fill-rule:nonzero;"
         d="M 0,0 C 1.965,2.756 4.033,3.271 6.273,1.672 8.611,0.004 8.795,-2.119 6.828,-4.873 l -53.537,-74.748 c -1.955,-2.74 -4.02,-3.253 -6.357,-1.585 -2.241,1.599 -2.428,3.718 -0.471,6.46 L 0,0 Z" />
    </g>
    <g
       transform="matrix(1.25,0,0,-1.25,480.86388,536.08585)"
       id="g60">
      <path
      class="path"
      stroke="#fff"
         id="path62"
         style="fill:#404041;fill-opacity:1;fill-rule:nonzero;"
         d="m 0,0 c 1.955,-2.74 1.77,-4.859 -0.471,-6.459 -2.338,-1.668 -4.4,-1.156 -6.359,1.586 l -53.549,74.778 c -1.965,2.754...

CSS

html, body {
  background: #333;
  height: 100%;
  overflow: hidden;

}

#svg4260:hover {

}

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

.svg-wrapper:hover{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s linear forwards;
  width:200px;
  border: 1px solid #fff;
}