JSFiddle - React, Tailwind, and code Playground

by Jagi

HTML

<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="320px" height="320px" xml:space="preserve">
<circle cx="100" cy="100" r="50" /></svg>

CSS

body {
    background: black;
}

#circle {
}

circle {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-width: 10px;
    stroke: white;
    fill: transparent;
    stroke-dasharray: 450;
    stroke-dashoffset: 140;
    -webkit-animation: dash 1s linear;
    /* -webkit-transform: rotate(-90deg); */
}

@-webkit-keyframes dash {
    from {
        stroke-opacity: 0.5;
        stroke-dashoffset: 450;
    }
    to {
        stroke-opacity: 1;
        stroke-dashoffset: 140;
    }
}