html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #292a33;
overflow: hidden;
}
const n = 15;
let x, y, hist;
function setup() {
createCanvas(windowWidth, windowHeight);
rectMode(CENTER);
x = width / 2;
hist = [];
}
function draw() {
clear();
y = height / 2 + sin(frameCount / 20) * 100;
hist.push({ x, y, d: 60 });
if (hist.length > n) {
hist.shift();
}
for (const h of hist) {
h.x -= 20;
h.d -= 4;
circle(h.x, h.y, h.d);
}
}
This Pen doesn't use any external CSS resources.