- 25.times do
  .box
View Compiled
$sizeMultiplier: 30;
$spaceMultiplier: 3;
$rotateMultiplier: 1;
$colorMultiplier: 20;
$boxColor: skyblue;

$nBoxes: 25;

body {
  background: #333;
  overflow: hidden;
}

.box {
  border: 2px solid $boxColor;
  margin: 0 auto;
  position: absolute;
  top: 0;
  border-radius: 40%;
}

@for $i from 0 to $nBoxes {
  .box:nth-child(#{$i + 1}) {
    width: $i*$sizeMultiplier*1px;
    height: $i*$sizeMultiplier*1px;
    transform: rotate($i*$rotateMultiplier*1deg);
    border-color: adjust-hue($boxColor, $i*$colorMultiplier*1);
    top: $i*$spaceMultiplier*1px;
    left: $i*$spaceMultiplier*1px;
    animation: 5s $i*.05s rotater infinite alternate;
  }
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.