<!DOCTYPE html>

<head>

<style>

html, body { margin: 0; padding: 0; }

canvas { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

</style>

</head>

<body>

let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'];

let startTime;

const duration = 10000;

function setup() {

createCanvas(windowWidth, windowHeight);

noFill();

startTime = millis();

background(0);

}

function draw() {

let currentTime = millis();

let elapsedTime = currentTime - startTime;

if (elapsedTime > duration) {

// Reset after 10 seconds

startTime = currentTime - (elapsedTime - duration);

background(0);

}

let progress = map(elapsedTime, 0, duration, 0, TWO_PI);

for (let i = 0; i < colors.length; i++) {

drawWavyLine(colors[i], i + 1, progress, i * 0.15);

}

function drawWavyLine(color, waviness, progress, offset) {

stroke(color);

strokeWeight(6);

beginShape();

for (let x = 0; x <= width; x += 5) {

let angle = progress + offset + (x * 0.005 * waviness);

let y = height / 2 + sin(angle) * height / 4 * sin(progress / 2);

vertex(x, y);

}

endShape();

}

function windowResized() {

resizeCanvas(windowWidth, windowHeight);

background(220);

}

</script>

</body>

</html>