JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 100 100">
    <path class="path-1" stroke-linecap="round" stroke="#000" fill="none" d="M50 10 a 20 20 0 0 1 0 80 a 20 20 0 0 1 0 -80"></path>
</svg>

<svg viewBox="0 0 100 100">
    <path class="path-2" stroke-linecap="round" stroke="#000" fill="none" d="M50 10 a 20 20 0 0 1 0 80 a 20 20 0 0 1 0 -80"></path>
</svg>

CSS

svg {
    width: 100px;
}

.path-1 {
    stroke-dasharray: 251.33;
    stroke-dashoffset: 251.33;
    animation: dash 5s linear alternate infinite;
}

.path-2 {
    stroke-dasharray: 150.798;
    stroke-dashoffset: 150.798;
    animation: dash 5s linear alternate infinite;
}

@keyframes dash {
    0% {
        stroke-dashoffset: 251.33;
    }
    100% {
        stroke-dashoffset: 0;
    }
}