JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<svg width="100" height="100" class="circle">
   <circle cx="50" cy="50" r="45" />
</svg>

CSS

.circle{
stroke:red;
stroke-width:10;
fill:none;
stroke-dasharray:0 360;   
stroke-dashoffset:5;
animation:mymove 5s infinite;
}

@keyframes mymove {
    0%{
        fill:yellow;
    }
    50%{
        fill:orange;
    }    
    100%{
        fill:yellow;
    }
}