<!--
Song recommendation: https://www.youtube.com/watch?v=3nsVyH5SROM
-->

<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="js-var-colors"></div>
$dur: .32s;
$reverse: false;
$rotation: -10deg;
$scale: .9;

$colors:
	#c18beb
	#b895eb
	#b49aeb
	#aba4eb
	#af9feb
	#c686eb
	#a2afeb
	#a6aaeb
	#99b9eb
	#8bc8eb
	#94beeb
	#87ceeb;

body, html {
	height: 120vh;
	width: 120vw;
}
body {
	overflow: hidden;
	margin: -10vh 0 0 -10vw;
}

div {
	height: 100%;
	width: 100%;
	outline: solid 1.4em;
	font-size: .7em;

	//background: rgba(0, 0, 0, 0.25);
	//border: solid 1px;

	transform: rotate($rotation) scale($scale);
	
}

body:not(.start) {
	display: none;
}
body.start {
	animation: swirl $dur infinite linear if($reverse, normal, reverse);
	
	div {
		animation: colors $dur*length($colors) infinite steps(1);
	}
}

//stackoverflow.com/questions/20892115/selector-for-nth-nested-elements
@each $color in $colors {
	$i: index($colors, $color);
	$length: length($colors);

	[data-nth-nesting-level-#{$length}="#{$i}"] {
		animation-delay: -$dur*10 + if($reverse, 1, -1)*$dur*($i - 1) !important; // magic
	}
}

@keyframes colors {
	@each $color in $colors {
		$i: index($colors, $color);
		#{($i - 1)/length($colors)*100%} {
			background-color: $color;
		}
	}
}

@keyframes swirl {
	from {
		transform:
			rotate($rotation*-1)
			scale(1/$scale);
	}
	to {
		transform:
			rotate(2*$rotation*-1)
			scale(1/pow($scale, 2));
	}
}

@function pow($number, $exponent) {
	$value: 1;

	@if $exponent > 0 {
		@for $i from 1 through $exponent {
			$value: $value * $number;
		}
	}

	@return $value;
}

#js-var-colors {
	content: '#{length($colors)}';
}
// read amount of colors from css
const colors = parseInt(
	$('#js-var-colors').css('content').replace(/"/g, "")
);

const goDeeper = ($el, level) => {
	$el.attr('data-nth-nesting-level-' + colors, level % colors + 1);
	const $children = $el.children();
	if ($children.length)
		goDeeper($children, level + 1);
	
	if(level === 0)
		$('body').addClass('start')
};

goDeeper($('body>div'), 0);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js