- var ncols = 7;
- var nrows = 2*(ncols - 1);
- var n = nrows*ncols;

.scene(style=`--nrows: ${nrows}; --ncols: ${ncols}`)
  .grid
    while n--
      .tile

@import 'compass/css3';

$l: 8em;
$h: .5*$l*sqrt(3);
$dc: $l/sin(180deg/3);
$t: 6.5s;
$f: .1;

@function getPolyPoints(
    $n: 3 /* number of poly vertices */, 
    $oa: 0deg /* angular offset of 1st poly vertex */) {
  
  $ba: 360deg/$n; // base angle corrensponding to 1 poly edge
  $l0: (); // list of points, initially empty
  
  @for $i from 0 through $n {
    $ca: $i*$ba + $oa; // angle current point is at wrt x axis
    $x: calc(50%*(1 + var(--s)*#{cos($ca)})); // x coord of current point
    $y: calc(50%*(1 + #{sin($ca)})); // y coord of current point
    $l0: $l0, $x $y; // add current point coords to points list
  }
  
  @return $l0
}

body {
  display: grid;
  place-content: center;
  margin: 0;
  height: 100vh;
  background: #272d4d;
}

.scene {
  display: grid;
  place-content: center;
  overflow: hidden;
  perspective: 27em;
  box-shadow: 2px 2px 17px #000
}

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template: 
    repeat(var(--nrows), .5*$l)/ 
    repeat(var(--ncols), $h);
  margin-bottom: -.5*$l;
  transform-style: preserve-3d;
}

.tile {
  --p: 0;
  --s: calc(1 - 2*var(--p));
  position: relative;
  margin: -.5*$dc 0 (-.5*$dc) calc((1 - var(--p))*#{$h - $dc});
  width: $dc; height: $dc;
  transform-style: preserve-3d;
  --dt: calc(var(--p)*#{-.25*$t});
  animation: r $t cubic-bezier(.68, -.57, .27, 1.57) var(--dt) infinite;
  
  &:nth-child(2n) { --p: 1 }
  
  &:before, &:after {
    --i: 0;
    --k: calc(1 - 2*var(--i));
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: 
      rotatex(calc(var(--i)*.5turn)) 
      scale(.95);
    background: 
      HSL(calc(6 + var(--i)*332), 
          calc(100% - var(--i)*44%), 
          calc(68% - var(--i)*22%));
    clip-path: polygon(getPolyPoints());
    animation: f $t ease-in-out var(--dt) infinite;
    content: ''
  }
  
  &:after { --i: 1 }
}

@keyframes r {
  20%, 50% { transform: rotateX(.5turn) }
  70%, 100% { transform: rotateX(1turn) }
}

@keyframes f {
  20%, 50%, 70% { filter: brightness(1) }
  10% { filter: brightness(calc(1 + var(--k)*#{$f})) }
  60% { filter: brightness(calc(1 - var(--k)*#{$f})) }
}