This is a fairly simple methoc of animating a circle drawing using two semi-circles within their own div which has overflow:hidden.

It uses css variables to control the diameter and radius of the circle so that it is responsive.

The radius uses:
--rad:clamp(75px, 15vw, 200px);

The diameter is then calculated as 2x the radius:
--dia:calc(var(--rad) * 2);

Finally, to ensure that there is no gapping between the two semi-circles, the outer containing div class="square" has the size calculated to ensure that it is divisible by 2 using:
width:round(down, var(--dia), 2px); aspect-ratio:1/1; .

This rounds down the var(--dia) to the nearest even pixel size.

The circle background and border can be styled to just show the border or the circle without a border.