JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="svg" class="container" width="500" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 300" xml:space="preserve">
    <g id="stroker">
        <polygon id="st0" points="39.395,10.166 39.395,2.02 25.898,2.02 25.898,10.166 5.404,10.166 5.404,102.403 59.89,102.403 59.89,10.166 "></polygon>
        <rect x="25.898" y="2.02" width="13.755" height="9.839"></rect>
    </g>
    <g id="filler">
        <rect x="6.96" y="11.335" id="st1" width="51.374" height="90"></rect>
    </g>
</svg>

CSS

#st0 {
    fill: #00A14B;
    stroke: #000000;
    stroke-width: 4;
    stroke-miterlimit: 10;
}
#st1 {
    fill: green;
    -webkit-animation: usage 2s normal forwards;
    animation: usage 2s normal forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}
@-webkit-keyframes usage {
    from {
        -webkit-transform: scaleY(0);
    }
    to {
        -webkit-transform: scaleY(100%);
    }
}
@keyframes usage {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(100%);
    }
}