const canvas = document.body.appendChild(document.createElement("canvas"));
const c = canvas.getContext("2d");
document.body.style.margin = 0;
function resize() {
canvas.width = innerWidth * 2;
canvas.height = innerHeight * 2;
canvas.style.width = innerWidth + "px";
canvas.style.height = innerHeight + "px";
}
addEventListener("resize", resize);
resize();
const PAD = 50;
const RAD = 2;
const SPEED = 40;
const TWO_PI = Math.PI * 2;
let mode = "draw";
let t = Math.random() * TWO_PI,
x = innerWidth,
y = innerHeight,
vx = 0,
vy = 0,
ta = 0,
w = 10,
h = 1,
hue = 20;
function loop() {
c.globalAlpha = 1;
if (Math.random() < 0.12) {
let alpha = 0.02;
if (Math.random() < 0.1) alpha = 0.1;
c.fillStyle = `rgba(255, 255, 255, ${alpha})`;
c.fillRect(0, 0, canvas.width, canvas.height);
}
for (var i = 0; i < SPEED; i++) {
t = Math.sin(ta) * TWO_PI;
vx = RAD * Math.cos(t);
vy = RAD * Math.sin(t);
ta += Math.random() * 0.1 - 0.05;
x += vx;
y += vy;
if (Math.random() < 0.005) {
mode = "no draw";
hue = [200, 20, 10, 40][~~(Math.random() * 4)];
if (Math.random() < 0.5) {
w = Math.random() * 200;
h = Math.random() * Math.random() * 10;
} else {
w = Math.random() * 20;
h = Math.random() * Math.random() * 200;
}
} else if (Math.random() < 0.005) {
mode = "draw";
}
if (mode === "draw") {
c.shadowColor = "rgba(0, 205, 205, 0.2)";
c.shadowBlur = 5;
c.fillStyle = `hsl(${hue}, 100%, 50%)`;
c.fillRect(x, y, w, h);
c.shadowColor = null;
c.shadowBlur = 0;
}
if (x < -PAD) {
x = innerWidth + PAD;
} else if (x > canvas.width + PAD) {
x = -PAD;
}
if (y < -PAD) {
y = innerHeight + PAD;
} else if (y > canvas.height + PAD) {
y = -PAD;
}
}
c.globalAlpha = 0.9;
c.drawImage(canvas, -2, -1, canvas.width + 3, canvas.height + 4);
requestAnimationFrame(loop);
}
loop();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.