- 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})) }
}