JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<svg id="statSvg" xmlns="http://www.w3.org/2000/svg" width="421" height="151">
<text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">200</text>
<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">280</text>
<rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">90</text>
<rect x="50" y="95" width="90" height="20" rx="3" ry="3" fill="#B4472A" />
<line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" />
</svg>

CSS

#statSvg{background-image:url('svg-rasterlinie.jpeg');}

#statSvg rect{
  opacity: 0.9;
  animation: 1s ease-out 0s 1 slide;
}
#statSvg rect:hover{opacity: 0.6;}

@keyframes slide {
  0% {
    width: 0;
  }
  100% {
    width: attr(width);
  }
}