JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="47.289" height="34.314" viewBox="0 0 47.289 34.314">
    <path class="path" id="Path_944" data-name="Path 944" d="M-22724.75-22562.656v11.666c0,10.777-10.32,19.844-20.783,19.848s-20.9-8.947-20.9-19.848v-11.666" transform="translate(-22721.949 -22528.342) rotate(180)" fill="none" stroke="#009c9c" stroke-width="5.6" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="47.289" height="34.314" viewBox="0 0 47.289 34.314">
    <path class="path" id="Path_943" data-name="Path 943" d="M-22724.75-22562.656v11.666c0,10.777-10.32,19.844-20.783,19.848s-20.9-8.947-20.9-19.848v-11.666" transform="translate(22769.238 22562.656)" fill="none" stroke="#009c9c" stroke-width="5.6" />
</svg>

CSS

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: a 4s both;
}

@keyframes a {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}