.triangle
  - (1...121).each do |i|
    .square
View Compiled
body {
  background: #2a2a2a;
}

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

.triangle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-20px, -20px);
}

.square {
  position: absolute;
  top: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #fa0;
  
  @for $i from 1 through 40 {
    &:nth-child(#{$i}) {
      left: ($i * 6px) - 142px; // a lotta magic numbers here :/
      top: 100px;
    }
  }
  @for $i from 41 through 80 {
    &:nth-child(#{$i}) {
      left: ($i * -3px) + 220px;
      top: ($i * -5px) + 305px;
    }
  }
  @for $i from 81 through 120 {
    &:nth-child(#{$i}) {
      right: ($i * 3px) - 260px;
      top: ($i * 5px) - 500px;
    }
  }
  @for $i from 0 through 120 {
    &:nth-child(#{$i}) {
      animation: 20s linear $i*0.5s infinite rotate;
      animation-delay: -0.3s * $i;
      filter: hue-rotate(3deg * $i);
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.