JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

SCSS

$nb: 20;
$size: 15px;
$time: 4s;
$delay: $time / $nb / 4;

@keyframes rotate {
    to { transform: rotate(180deg); }
}

body {
    overflow: hidden;
}
div {
    position: absolute;
    top: 50%; left: 50%;
    background: white;
    animation: rotate $time ease-in-out infinite alternate;
}
div:nth-child(2n) {
    background: black;
}

@for $i from 1 through $nb {
    div:nth-child(#{$i}) {
        width: ($nb + 1 - $i) * $size;
        height: ($nb + 1 - $i) * $size;
        margin-top: ($nb + 1 - $i) * $size / -2;
        margin-left: ($nb + 1 - $i) * $size / -2;
        animation-delay: ($nb - $i) * $delay;
    }
}

JavaScript

var nb = 20;
for(var i=0; i<nb; i++) {
	$('body').append('<div></div>');
}