SOURCE

<h1>Spikes</h1>
<div class="spikes">
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
  <div class="spike">
    <div class="nest"></div>
  </div>
</div>

/* ================
// Spikes
// ============= */

$size: 60vmin;
$spikes: 50;
$nest-size: 2vmin;
$rotation: 360 / $spikes;
$delay: .15s;

.spikes {
  position: absolute;
  top: 50%;
  left: 50%;
  height: $size;
  width: $size;
  animation: rotate-spikes ($delay * $spikes) * 2 linear infinite;
  transform: 
    translate(-50%, -50%)
    rotateX(0)
    rotateY(45deg)
    rotateZ(0);
  transform-style: preserve-3d;
}

@keyframes rotate-spikes {
  
  100% {
    transform:
      translate(-50%, -50%)
      rotateX(360deg)
      rotateY(45deg)
      rotateZ(360deg);
  }
  
}

  @function color() {
    
   @return(hsla(random(255), 100, 60, .85));
    
  }

  .spike {
    position: absolute;
    top: 0;
    left: 50%;
    height: 20%;
    width: 20%;
    transform-origin: 50% 250%;
    transform-style: preserve-3d;
    
    @for $i from 1 through $spikes {
      
      &:nth-child(#{$i}) {
        animation: rotate-spike-#{$i} ($delay * $spikes) $delay * $i infinite;
        transform: 
          translate(-50%, 0)
          rotateX(0)
          rotateZ($rotation * $i - $rotation * 1deg);
        
        &:before {
          animation: rotate-spike-before ($delay * $spikes) $delay * $i infinite;
          border: .5em solid color();
          color: color();
        }
        
        .nest {
          animation: rotate-nest ($delay * $spikes) $delay * $i infinite;
          color: color();
          
          &:before {
            color: color();
          }

          &:after {
            color: color();
          }
          
        }
        
      }
      
    }
    
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      content: '';
      background: currentColor;
      transform:
        translate(0, 0)
        rotateX(0)
        rotateY(-90deg)
        scaleX(.35)
        rotateZ(45deg);
    }
    
  }

  @for $i from 1 through 50 {

    @keyframes rotate-spike-#{$i} {

      100% {
        transform: 
          translate(-50%, 0)
          rotateX(360deg)
          rotateZ($rotation * $i - $rotation * 1deg);
      }

    }

  }

  @keyframes rotate-spike-before {
  
    100% {
      transform:
        translate(0, 0)
        rotateX(360deg)
        rotateY(-90deg)
        scaleX(.35)
        rotateZ(45deg);
    }
    
  }

    .nest {
      position: absolute;
      bottom: 100%;
      left: 50%;
      border: $nest-size solid transparent;
      border-bottom-color: currentColor;
      transform: 
        translate(-50%, -100%)
        rotateY(90deg);
      transform-style: preserve-3d;
      
      &:before,
      &:after {
        position: absolute;
        left: 50%;
        bottom: $nest-size;
        height: $nest-size * 2;
        width: $nest-size * 2;
        content: '';
        background: currentColor;
        transform-origin: 50% 100%;
      }
      
      &:before {
        transform:
          translate(-60%, 0)
          rotateZ(15deg)
          scaleX(.25)
          rotateZ(45deg);
      }

      &:after {
        transform:
          translate(-60%, 0)
          rotateZ(-15deg)
          scaleX(.25)
          rotateZ(45deg);
      }
      
    }

    @keyframes rotate-nest {
    
      100% {
        transform: 
          translate(-50%, -100%)
          rotateY(90deg + 360deg);
      }
      
    }


/* ================
// Heading
// ============= */

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  font-size: 10vmin;
  font-weight: normal;
  transform: translate(-50%, -50%);
}


/* ================
// Structure
// ============= */

html,
body {
  height: 100%;
}

html {
  overflow: hidden;
  font-family: 'Sacramento';
  background: #aae;
  color: #fff;
}

body {
  perspective: 40em;
  transform-style: preserve-3d;
}