perlin paint #codepen

index.pug

div#box
	.container

playground.json

{
  "scripts": [
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/perlin.js",
    "jquery"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.ts

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);
})
//console.log(noise.simplex3(1 / 100, 4 / 100, 1))

style.scss

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;
				}
			}
		}
	}
}