JSFiddle - React, Tailwind, and code Playground

HTML

<div class="zone">
    <div class="circle"></div>
    <div class="circle2"></div>
</div>

CSS

.circle, .circle2{
    position: absolute;
    top: 200px;
    left: 200px;
    height: 50px;
    width: 50px;    
    border-radius: 50px;    
    box-shadow: 100px 0 0 black,
                -100px 0 0 black,
                0 100px 0 black,
                0 -100px 0 black,
                70px 70px 0 black,
                70px -70px 0 black,
                -70px 70px 0 black,
                -70px -70px 0 black;    
    transform: rotate(0deg);
}

.circle2{
    box-shadow: 0 -100px 0 5px black;                     
    animation: rotate 2s infinite normal;
    
}

.zone{
    top: 300px;
    left: 300px;
    background: white;
    -webkit-filter: blur(10px) contrast(20); 
     padding-bottom: 400px;
}

@keyframes rotate{    
    100%{
        transform: rotate(360deg);
    }
    
}