Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; }
console.log("Event Fired") 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();