Matrix Falling Code Animation
Home
Snippets
Matrix Falling Code Animation
HTML
CSS
JS
<canvas></canvas>
body{ margin:0; background:#000; overflow:hidden; } canvas{ display:block; }
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; const lettersArray = letters.split(""); const fontSize = 20; const columns = Math.floor(canvas.width / fontSize); const drops = Array(columns).fill(0); function draw(){ ctx.fillStyle="rgba(0,0,0,0.05)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle="#0aff0a"; ctx.font = fontSize + "px monospace"; for(let i=0;i<drops.length;i++){ const text = lettersArray[Math.floor(Math.random()*lettersArray.length)]; ctx.fillText(text,i*fontSize,drops[i]*fontSize); if(drops[i]*fontSize > canvas.height || Math.random()>0.975){ drops[i]=0; } drops[i]++; } requestAnimationFrame(draw); } draw(); window.addEventListener("resize",()=>{ canvas.width = window.innerWidth; canvas.height = window.innerHeight; });
Ad #1
Ad #2
Scroll to Top