@import 'compass/css3';

$c: #df5d2e #ffb43e #a4c972 #541e35;
$sh: drop-shadow(0 0 1px currentColor);
$vis: #fff; // visible
$hid: rgba($vis, 0); // masked

$n-3gon: 3; // number of triangle vertices
$rc-3gon: 15em; // circumradius of triangle
$dc-3gon: 2*$rc-3gon; // diameter
$ca-3gon: 360deg/$n-3gon;
$ri-3gon: $rc-3gon*cos(.5*$ca-3gon);
$l: 2*$rc-3gon*sin(.5*$ca-3gon);
$a-3gon: ($n-3gon - 2)*180deg/$n-3gon;
$h-3gon: $l*sin($a-3gon);

$n-4hedron: 4; // number of tetrahedron faces
$ax-4hedron: asin(.5*$l/$h-3gon)*180deg/pi();
$h-4hedron: $h-3gon*sin(2*$ax-4hedron);
$va-4hedron: 90deg - 2*$ax-4hedron;
$ri-4hedron: $rc-3gon*tan($va-4hedron);

$bf: .05; // border-factor, relative to diameter
$b: $bf*$rc-3gon;
$dd: .5*$dc-3gon*sin($a-3gon) + $b; // diagonal
$dv: .75*$dc-3gon - $b; // vertical
$buff: .125rem;

@function reverse($lst) {
   $rev: ();
   @for $i from length($lst)*-1 through -1 {
		 $rev: append($rev, nth($lst, abs($i)), comma);
   }
   @return $rev;
}

@function grad($i) {
	$stops: ();
	@for $j from 0 to $n-3gon {
		$k: ($j - $i + $n-4hedron)%$n-4hedron + 1;
		$stops: append($stops, nth($c, $k), comma);
	}
	@if $i%2 < 1 { $stops: reverse($stops) }
	$stops: append($stops, nth($stops, 1));
	@return conic-gradient($stops);
}

@function lstrip($s: 1) {
	@return repeating-linear-gradient($s*120deg, 
		$vis 0, $vis calc(#{$dd} + #{$buff}), 
		$hid $dd, $hid 2*$dc-3gon);
}

body {
	overflow: hidden;
	height: 100vh;
	perspective: 32rem;
	background: #000;
	font-size: 2vmin;
}

mask {
	:first-child { fill: #fff; }
	
	:nth-child(n + 2) {
		stroke: $vis;
		stroke-width: $bf;
	}
}

[id='ma'] circle { stroke-width: .5*$bf; }

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

.s4hedron {
	transform-style: preserve-3d;
	animation: r 4s linear infinite;
}

@keyframes r { to { transform: rotateY(1turn); } }

.s3gon {
	opacity: .8;
	color: lemonchiffon;
	-webkit-filter: $sh;
					filter: $sh;
	
	@for $i from 0 to $n-4hedron {
		$j: $i%2;
		$k: floor($i/2);
		
		&:nth-child(#{$i +1}) {
			transform: 
				if($k > 0, rotate(.5turn), 
					rotateY(.25turn))
				if($j > 0, rotateY(.5turn), ()) 
				rotateX(-$ax-4hedron) 
				translateZ($ri-4hedron);
			
			&:before { background: grad($i); }
		}
	}
	
	&:before, &:after {
		margin: -$rc-3gon;
		width: $dc-3gon; height: $dc-3gon;
		-webkit-clip-path: url(#cp);
						clip-path: url(#cp);
		content: '';
	}
	
	&:before {
		-webkit-mask: radial-gradient(
			$hid 16.5%, $vis 17.5%);
		mask: url(#mb);
	}
	
	&:after {
		background: currentColor;
		-webkit-mask: radial-gradient(
			$hid 15%, $vis 16%, $vis 19%, $hid 20%), 
			lstrip(), lstrip(-1), 
			linear-gradient($hid $dv, $vis $dv);
		mask: url(#ma);
	}
}