- var sl = [
- 	'#00e5f9, #0578f7', 
- 	'#fd64a5, #fe027b', 
- 	'#c7e64b, #6fa301', 
- 	'#f9c609, #fd7000', 
- 	'#ce4aff, #690bf9', 
- 	'#039aff, #042ff8', 
- 	'#fffc3b, #fbd41d', 
- 	'#ff867f, #fa0a15'
- ];
- var ns = sl.length;
- var nd = 2;
- var nb = 5*ns;

style
	- for(var i = 0; i < ns; i++)
		| .s#{i} { --sl: #{sl[i]} }
- for(var i = 0; i < nd; i++)
	div(class='🍩')
		- for(var j = 0; j < nb; j++)
			- var cidx = ~~(ns*Math.random());
			- var sf = +(.015 + .25*Math.random()).toFixed(2);
			- var tf = +(1 + .25*Math.pow(-1, Math.round(Math.random()))*Math.random()).toFixed(2);
			- var xf = +Math.random().toFixed(2)
			div(class=`⚪ s${cidx}` style=`--sf: ${sf}; --tf: ${tf}; --xf: ${xf}`)

$d: 13em;
$t: 2s;

html { background: #444 }

body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 100vh;
	filter: drop-shadow(2px 2px 5px #000)
}

.🍩 {
	position: relative;
	margin: 1em;
	width: $d; height: $d;
	-webkit-clip-path: circle();
					clip-path: circle();
	
	&:nth-of-type(2) {
		--m: radial-gradient(transparent 41%, red 43%);
		-webkit-mask: var(--m);
		mask: var(--m);
	}
}

.⚪ {
	position: absolute;
	top: 100%; left: calc(var(--xf)*100%);
	padding: calc(var(--sf)*50%);
	border-radius: 50%;
	transform: translate(-50%, 0);
	background: linear-gradient(var(--sl));
	mix-blend-mode: screen;
	animation: float calc(var(--tf)*#{$t}) ease-out calc((var(--sf) - 1)*#{$t}) infinite
}

@keyframes float {
	to { transform: translate(-50%, calc(-100% - #{$d})); }
}