<div class="container">
	<div class="blob"></div>
	<div class="blob"></div>
	<div class="blob"></div>	
	<div class="blob"></div>
	<div class="blob"></div>
	<div class="blob"></div>
	<div class="blob"></div>
	<div class="blob"></div>
</div>

<svg>
	<defs>
		<filter id="morph">
			<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="20" />
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -6" result="blob" />
			<feBlend in2="blob" in="SourceGraphic" result="mix" />
		</filter>
	</defs>
</svg>

body { 
	background: oklch(94% 10% 2deg); 
	background-size: contain;
	margin: 0 auto;
	height: 90dvh;
	width: 90dvw;
	overflow: hidden;
}


.container {
	display: grid;
	align-content: center;
	justify-content: center;
	
	filter: url("#morph");
	
	margin: 3% auto;
	height: 100%;
	width: 100%;
}


.blob {	
	--min: 2rem;
	--d: clamp(var(--min), 8dvw, calc(var(--min) * 2));
	background: var(--bg, white);
	border-radius: 1dvw;
	height: var(--d);
	width: var(--d);
	
	filter: blur(10px);
	
	animation-name: move;
	animation-delay: var(--delay, 0s);
	animation-duration: var(--duration, 1.5s);
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	
	&:nth-of-type(even) {
		margin-left: -25%;
	}
	
	/* white */
	&:nth-of-type(1) {
		/* --bg: oklch(80% 70% 40deg); */
		--min: 1.5rem;
	}
	
	/* orange */
	&:nth-of-type(2) {
		--bg: oklch(80% 70% 90deg);
		/* --min: 3rem; */
		--delay: 2s;
	}
	
	/* yellow */
	&:nth-of-type(3) {
		--bg: oklch(100% 50% 50deg);
		--min: 4rem;
		--delay: 1s;
	}
	
	/* green */
	&:nth-of-type(4) {
		--bg: oklch(80% 70% 120deg);
		--min: 1.5rem;
		--delay: 3.25s;
	}
	
	/* green-blue */
	&:nth-of-type(5) {
		--bg: oklch(50% 20% 190deg);
		--min: 2rem;
		--delay: 2.25s;
	}
	
	/* indigo */
	&:nth-of-type(6) {
		--bg: oklch(60% 60% 280deg);
		--min: 3rem;
		--delay: .5s;
	}	
	
	/* purple */
	&:nth-of-type(7) {
		--bg: oklch(80% 50% 300deg);
		--min: 2rem;
		--delay: 2s;
	}
	
	/* pink */
	&:nth-of-type(8) {
		--bg: oklch(85% 20% 340deg);
		--min: 1.25rem;
		--delay: 3s;
	}
}

@keyframes move {
	to { margin-left: 75%; }
}