#box
	.container
View Compiled
body {
	display:grid;
	place-items: center;
	height:100vh;
	background:#F5F7FA;
	#box {
		position: relative;
		width:75vmin;
		height:75vmin;
		border:.5rem solid #323133;
		background:white;
		.container {
			position: absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			overflow:hidden;
		}
		.blob {
			--size:3rem;
			position: absolute;
			background:grey;
			border-radius: 100%;
			width:var(--size);
			height:var(--size);
			animation:blob 1s cubic-bezier(.07,.01,0,1) forwards;
			@keyframes blob {
				0% {
					transform:translate(-50%,-50%) scale(0);
					opacity:1;
				}
				100% {
					transform:translate(-50%,-50%) scale(1);
					opacity:0.75;
				}
			}
		}
	}
}
View Compiled
let start = +new Date();

noise.seed(start);

const newBlob = () => {
	let time = (+new Date() - start) / 20000;
	let x = Math.random();
	let y = Math.random();
	let value = (noise.simplex3(x, y, time) + 1) * 180;
	console.log("New");
	$("#box .container").append(
		`<div class="blob" style="--size:${5 +
			Math.random() * 10}%; background:hsl(${value}, 79%, 64.5%); top:${y *
			100}%; left:${x * 100}%"></div>`
	);
	$("#box .container .blob:nth-last-child(2000)").remove();
};

$(() => {
	setInterval(() => {
		newBlob();
	}, 5);
});
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/perlin.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  3. https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458