- let n = 12;
- let p = ['#85A29E','#FFEBBF','#F0D442','#F59330','#B22148'];
- let m = p.length;

body(style=`--n: ${n}; --m: ${m}`)
	style
		- for(let j = 0; j < m; j++)
			| .spark:nth-child(#{j + 1}) { --j: #{j}; --c: #{p[j]} }
	.a
		while n--
			.dir(style=`--i: ${n}`)
				- for(let j = 0; j < m; j++)
					.spark
View Compiled
$w: 10em;
$h: .5em;
$r: .5*$h;
$p: 10%;
$t: .5s;

body { background: #000 }

div { position: absolute }

.a {
	top: 50%; left: 50%;
	animation: r 4*$t linear infinite
}

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

.dir { transform: rotate(calc(var(--i)*1turn/var(--n))) }

.spark {
	overflow: hidden;
	position: absolute;
	margin: -$r;
	width: $w; height: $h;
	border-radius: $r;
	animation: mov-out 2*$t ease-out 
		calc((var(--i)*var(--j))*#{-2*$t}/(var(--n)*var(--m))) 
		infinite alternate;
	mix-blend-mode: color-burn;
	
	&:before {
		position: absolute;
		width: 100%; height: 100%;
		border-radius: $r;
		background: var(--c);
		animation: inherit;
		animation-name: mov-in;
		animation-duration: $t;
		content: ''
	}
}

@keyframes mov-out {
	0%, #{$p} { transform: translate($h - $w) }
	#{100% - $p}, 100% { transform: none }
}

@keyframes mov-in {
	0%, #{2*$p} { transform: translate($w - $h) }
	#{100% - 2*$p}, 100% { transform: translate(.9*($w - $h)) }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.