- var n_hex = 6; // number of hexagon edges
- var n_per_edge = 3; // triangles per edge
- var n_tri = n_hex*n_per_edge; // in total

.assembly
	while n_tri--
		.tri
	.hex

$edge: 4em; // edge length
$n-hex: 6; // number of hexagon edges/vertices
$angle: 360deg/$n-hex; // base angle
$skew-angle: 90deg - $angle;
$n-per-edge: 3; // triangles per hex edge
$n-tri: $n-hex*$n-per-edge; // in total
$h-tri: $edge*cos(.5*$angle); // tri height
$t: 2s; // animation-duration
$scaling-duration: 80%;
$pad-duration: 5%;
$rp: 100% - $scaling-duration - $pad-duration;

html {
	background: #222;
	color: #ccc;
}

div, :before {
	position: absolute;
	top: 50%; left: 50%;
}

.assembly {
	filter: drop-shadow(0 0 1px currentColor);
	animation: down $t linear infinite;
}

@keyframes down { to { transform: scale(.5); } }

.hex {
	z-index: -1;
	margin: -$edge;
	width: 2*$edge; height: 2*$edge;
	/* shape it into rhombus */
	transform: skewY($skew-angle) 
		scaleX(cos($skew-angle));
	/* make rhombus ends transparent, get hex */
	background: linear-gradient(135deg, 
		  transparent 25%, currentColor 0, 
		  currentColor 75%, transparent 0
	  );
}

.tri {	
	&:before {
		margin: 0 (-.5*$edge);
		border: solid 0;
		border-color: currentColor transparent;
		border-width: $h-tri .5*$edge 0;
		animation: up $t ease-out infinite;
		content: '';
	}
	
	@for $i from 0 to $n-hex {
		@for $j from 0 to $n-per-edge {
			$idx: $i*$n-per-edge + $j + 1;
			$f: $j%2;
			$p: $idx/($n-tri - 1)*$rp + $pad-duration;
			
			&:nth-child(#{$idx}) {
				transform: rotate(-($i - .5)*$angle) 
					translateY($h-tri) 
					if($j == 0, (), 
						translate($j*.5*$edge, $f*$h-tri) 
						rotate($f*.5turn)
					);
					
				&:before { animation-name: up-#{$idx}; }
			}
			
			@at-root {
				@keyframes up-#{$idx} {
					0%, #{$p} { transform: scale(0); }
					100%, #{$p + $scaling-duration} {
						transform: scale(1);
					}
				}
			}
		}
	}
}

// done