$cubes: 3;
$time: 12s;
$delay: $time / $cubes;

$radius: 10;
$size: 100vmin;
$border: $size * 0.05;

$color-background: #080d26;
$color-border: rgba(#1c302c, 0.25);
$color-fill: rgba(#564618, 0.25);
$color-stroke: rgba(#f4f331, 0.75);

@function fractal-circles($r: 20, $x: 0, $y: 0, $result: ()) {
	$result: append(
		$result,
		(
			r: $r,
			x: $x,
			y: $y
		)
	);
	$r2: $r / 2;

	@if ($r >= 1) {
		$result: fractal-circles($r2, $x + $r2, $y, $result);
		$result: fractal-circles($r2, $x - $r2, $y, $result);
		$result: fractal-circles($r2, $x, $y + $r2, $result);
		$result: fractal-circles($r2, $x, $y - $r2, $result);
	}

	@return $result;
}

@function svg-group($content, $stroke: $color-stroke, $fill: $color-fill) {
	@return "<g stroke='#{encode-color($stroke)}' fill='#{encode-color($fill)}'>#{$content}</g>";
}

@function svg-circle($r, $x, $y) {
	@return "<circle r='#{$r}' cx='#{$x}' cy='#{$y}' vector-effect='non-scaling-stroke' />";
}

@function svg-fractal($circles, $radius) {
	$svg: "";

	@each $circle in $circles {
		$svg: $svg +
			svg-circle(
				$r: map-get($circle, "r"),
				$x: map-get($circle, "x"),
				$y: map-get($circle, "y")
			);
	}

	@return svg(svg-group($svg), viewbox-center($radius / 2));
}

:root {
	@include cssVariables(
		$background: $color-background,
		$perspective: $size,
		$cubes: $cubes
	);
}

.fractal-cubes {
	@extend %flex-3D;

	animation: rotate $time linear infinite;
}

.fractal-cube {
	@include block(
		$size: $size,
		$border: $border,
		$stroke: $color-border,
		$fill: $color-fill
	);

	transform: scale3d(0, 0, 0);
	animation: scale $time var(--delay) ease-in-out infinite;

	> * {
		animation: opacity $time var(--delay) linear infinite;
		background: url-svg(svg-fractal(fractal-circles($radius), $radius));
	}

	@for $i from 0 to $cubes {
		&:nth-child(#{$i + 1}) {
			--delay: #{$delay * $i};
		}
	}
}

@keyframes opacity {
	0%,
	20% {
		opacity: 1;
	}
	80%,
	100% {
		opacity: 0;
	}
}

@keyframes rotate {
	to {
		transform: rotate3d(1, 1, 1, 360deg);
	}
}

@keyframes scale {
	0% {
		transform: scale3d(0, 0, 0);
	}
	to {
		transform: scale3d(3, 3, 3);
	}
}

(() => {
	const cube = appendChildren(createElements(6), createElement("fractal-cube"));

	appendChildren(
		appendChildren(
			createElements(getVariableCSS("cubes"), cube),
			createElement("fractal-cubes")
		)
	);
})();