- var hxgns = 50;
main
	.hxgns
		- for (var h = 0; h < hxgns; ++h) {
			.hxgn
				- for (var s = 0; s < 6; ++s) {
					.s
				- }
		- }

@import 'compass';
$h: 50;
$c: #ffd239;
$dur: 0.5s;
$scale: 0.9;
$rotInc: 6deg;
$triH: sqrt(3)/2;
$x: 50%;
$y: 65%;
$maxSize: 720px;

*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	height: 100vh;
}
main, .hxgns {
	position: relative;
}
main {
	display: flex;
	margin: auto;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: $maxSize;
	height: 100%;
	max-height: $maxSize;
}
.hxgns, .hxgn {
	transform-origin: $x $y;
}
.hxgns {
	animation: twist $dur linear infinite;
	font-size: 28px;
	width: (40em * $triH); 
	height: (40em * $triH);
}
.hxgn, .s {
	position: absolute;
}
.hxgn {
	width: 100%; 
	height: 100%;
}
.s {
	top: 50%;
	left: 50%;
	width: 0; 
	height: 0; 
	border-left: 10em solid transparent;
	border-right: 10em solid transparent;
	border-bottom: (20em * $triH) solid $c;
	transform-origin: 50% 0;
}
.hxgn:nth-of-type(odd) > .s {
	border-bottom-color: $c/4;
}
@for $h from 1 through $h {
	.hxgn:nth-of-type(#{$h}) {
		$h: $h - 1;
		transform: rotate($rotInc * $h) scale(pow($scale,$h),pow($scale,$h));
		z-index: $h;
	}
}
@for $s from 1 through 6 {
	.s:nth-of-type(#{$s}) {
		transform: translateX(-50%) rotate(60deg * ($s - 1));
	}
}

@keyframes twist {
	from {
		transform: rotate(0deg) scale(1,1);
	}
	to {
		transform: rotate(-$rotInc*2) scale(pow($scale,-2),pow($scale,-2));
	}
}