$n-levels: 8;
$n-edges: 6;
$a: 2em;
$t: 4s;

$base-angle: 360deg/$n-edges;

html {
  overflow: hidden;
  background: #222;
  color: white;
  
  &:after {
    $dim: 2*$n-levels*$a;
    position: absolute;
    top: 50%; left: 50%;
    margin: -$dim/2;
    width: $dim; height: $dim;
    box-shadow: 0 0 0 100em;
    content: '';
  }
}

.item {
  &, *, :before {
    position: absolute;
    top: 50%; left: 50%;
  }
  
  $n: 1;
  
  @for $l from 1 to $n-levels {
    
    $n-level: $l*$n-edges;
    
    &:nth-child(n + #{$n + 1}) .hexa {
      animation-delay: $l*$t/$n-levels/2;
    }
    
    @for $i from 0 to $n-level {
      
      $poly-cr: $l*2*$a;
      $poly-ir: $poly-cr*cos($base-angle/2);
      $poly-edge: 2*$poly-cr*sin($base-angle/2);
      $j: $i%$l;
      $poly-edge-diff: abs($j - $l/2)*$poly-edge/$l;
      $dist: sqrt(pow($poly-ir, 2) + pow($poly-edge-diff, 2));
      $curr-angle: $base-angle*(floor($i/$l) - .5) + atan(($j - $l/2)*$poly-edge/$l/$poly-ir);
      
      &:nth-child(#{$n + $i + 1}) {
        transform: rotate($curr-angle) translate($dist) rotate(-$curr-angle);
      }
      
    }
    
    $n: $n + $n-level;
    
  }
  
  content: $n;
}

$rot-angle: $base-angle/2;
$skew-angle: 90deg - $base-angle;
$skew-factor: cos($skew-angle);

.hexa {
  overflow: hidden;
  margin: -$a;
  width: 2*$a; height: 2*$a;
  transform: rotate($rot-angle) skewY($skew-angle) scaleX($skew-factor);
  animation: rot $t linear infinite;
  
  &:before {
    margin: -$a*sqrt(3)/2 (-$a);
    width: 2*$a; height: $a*sqrt(3);
    transform: scaleX(1/$skew-factor) skewY(-$skew-angle) rotate(-$rot-angle);
    background: whitesmoke;
    content: '';
  }
}

@keyframes rot {
  #{50%/$n-levels}, 50% {
    transform: rotate($base-angle) skewY($skew-angle) scaleX($skew-factor);
  }
  #{50% + 50%/$n-levels}, 100% {
    transform: rotate($rot-angle + $base-angle) skewY($skew-angle) scaleX($skew-factor);
  }
}