$bg: #181818;
  
$columns: 11;
$items: pow($columns,2);
$size: 74px;
$stroke: 4px;
$color-radius: 180;
$view-size: $columns*$size;
$bound-height: $size*sqrt(3)/2*($columns - 3);
$bound-width: $size*($columns - 3);
$time: 4s;
$ease: ease-in-out;
$sat: 100%;
$lum: 60%;



body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $bg;
  overflow: hidden;
}

.view {
  height: $bound-height;
  width: $bound-width;
  flex: 0 0 $bound-width;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  //background: white;

  * {
    transform-style: preserve-3d;
  }
}


@mixin fit {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}

.axis {
  @include fit;
}

.experiment {

  
  height: $view-size;
  width: $view-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  .item {
    width: $size;
    height: $size*sqrt(3)/2;
    position: relative;
    $m: ($size/sqrt(3));
    margin: 0;
    .axis {
      visibility: hidden;
      will-change: transform, color;
    }
    
    $cx: floor($columns/2);
    $cy: $cx;
    $y: -1;
    @for $i from 0 to $items {

      $x: $i%$columns;
      $y: if($x==0,$y+1,$y);
      $xx: $x;
      @if $y%2==0 {
        $xx: $x + .5;
      }
      $factor: sqrt(pow($xx - $cx,2) + pow($y - $cy,2));
      
      &:nth-child(#{$i + 1}) {
        @if $y%2==0 {
          left: ($size/2);
        }
        transform: translateZ($factor*$i*$size*-1);
        .axis {
          animation: ani-#{$i} $time ease-in-out infinite;
          @keyframes ani-#{$i} {
            $p: min(90%,max(30%,round(40%/$cx*$factor + 30)));
            0%, #{$p - 20} {
              color: hsl($factor*$color-radius/$cx,$sat,$lum);
              transform: translate3d(0%,0%,0) rotate(0deg) rotate3d(1,0,0,-35deg) rotate3d(0,1,0,45deg) ;
            }
            #{$p}, 100% {
              $factor: sqrt(pow(($xx + .5) - $cx,2) + pow(($y + 1) - $cy,2));
              color: hsl($factor*$color-radius/$cx,$sat,$lum);
              transform: translate3d($size*sqrt(2)/2,$size*sqrt(3)*sqrt(2)/2,0) rotate(120deg) rotate3d(1,0,0,-35deg) rotate3d(0,1,0,45deg) ;
            }
          }
        }
      }
    }
  }
  
  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    height: $size;
    width: $size;
    margin: $size*-.5;
    transform:  scale(1/sqrt(2));
   
    .side {
     @include fit;
      visibility: visible;
      border: $stroke solid currentColor;
      background: $bg;
      background-clip: content-box;
      
      @for $i from 0 to 6 {
        &:nth-child(#{$i + 1}) {
          transform:
            if($i == 1, rotateY(-90deg),rotateX((floor($i/2))*90deg))
            translateZ(ceil($view-size/$columns/2));
        }
      }
    }
  }
}