HTML
<div class="hold-it">
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
<div class="dizzy"></div>
</div>
SCSS
$size: 100vmin;
$speed: 0.6s;
$time-func: ease-in;
* {
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #fff;
}
.hold-it {
height: $size;
width: $size;
position: relative;
}
.dizzy {
mix-blend-mode: difference;
position: absolute;
top: 0;
width: $size;
height: $size;
border-radius: 50%;
border: 24vmin solid;
}
$amount: 51;
@for $i from 1 through $amount {
$subtractor: (($amount - 1)/2) +1;
$position-mult: $i - $subtractor;
$position: $position-mult * 0.9vmin;
.dizzy:nth-child(#{$i}) {
left: $position;
border-color: hsl($i*4, 90, 1.8);
animation: move $speed $time-func infinite alternate;
}
}
@keyframes move {
0% {}
100% {
left: 0
}
}
