@import 'compass/css3';

$p: 37.5%;
$t: 2s;
$n: 3;
$rc: 8em;
$ra: 180deg/$n;

@function get-poly($n: 3) {
	$ba: 360deg/$n;
	$oa: .5*(($n + 1)%2)*$ba - 90deg;
	$pl: ();
	
	@for $i from 0 to $n {
		$ca: $oa + $i*$ba;
		$pl: $pl, 50%*(1 + cos($ca)) 50%*(1 + sin($ca))
	}
	
	@return $pl
}

* { margin: 0 }

div { display: grid }

.wrap {
	overflow: hidden;
	height: 100vh;
	background: #000;
	filter: invert(.85)
}

.comp {
	--i: 0;
	grid-area: 1/ 1;
	place-self: center;
	transform: 
		rotate(calc((var(--i) - 1)*#{$ra}))
		scale(#{1/$n});
	animation: ani-comp $t ease-in-out infinite;
	isolation: isolate;
	
	&:first-child { --ani: ani-tri0 }
	
	&:nth-child(2) { --i: 1 }
	&:nth-child(3) { --i: 2 }
	
	&::before, &::after {
		--j: 0;
		--sgn-j: calc(2*var(--j) - 1);
		grid-area: 1/ 1;
		padding: $rc;
		--oy: translatey(calc(var(--sgn-j)*100%));
		--fa: calc(var(--j)*.5turn);
		--dr: rotate(calc(var(--fa) + var(--sgn-j)*#{2*$ra}));
		transform: var(--oy) rotate(var(--fa));
		background: #fff;
		--poly: polygon(#{get-poly($n)});
		-webkit-clip-path: var(--poly);
						clip-path: var(--poly);
		animation: var(--ani, ani-tri1) $t ease-in-out infinite;
		mix-blend-mode: difference;
		content: '';
		
		/* only needed due to Chrome rendering issue */
		@supports (background: conic-gradient(red, tan)) {
			background: /* get rid of Chrome lines */
				conic-gradient(from 150deg at 50% 0, #fff 60deg, transparent 0%)
		}
	}
	
	&::after { --j: 1 }
}

@keyframes ani-comp {
	to { transform: rotate(calc(var(--i)*#{$ra})) }
}

@keyframes ani-tri0 {
	#{$p} { transform: var(--oy) var(--dr) }
	100% { transform: var(--dr) }
}

@keyframes ani-tri1 {
	#{$p}, 100% { transform: var(--oy) var(--dr) scale(0) }
}