Wave Matrix
Home
Snippets
Wave Matrix
HTML
CSS
JS
<div class="overlay">ASCII WAVE</div> <canvas id="c"></canvas>
*{margin:0;padding:0;box-sizing:border-box} body{ background:#000; color:#0f0; font-family: Consolas, monospace; overflow:hidden; } canvas{display:block} .overlay{ position:fixed; top:30px; width:100%; text-align:center; font-weight:700; letter-spacing:4px; font-size:clamp(1rem,2.5vw,2rem); color:#0f0; text-shadow:0 0 10px #0f0,0 0 25px #0f0; pointer-events:none; }
const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); let w,h,cols,rows; function resize(){ w = canvas.width = innerWidth; h = canvas.height = innerHeight; cols = Math.floor(w/14); rows = Math.floor(h/18); } window.addEventListener('resize', resize); resize(); const chars = " .:-=+*#%@"; let t = 0; function draw(){ t += 0.05; ctx.fillStyle = 'rgba(0,0,0,0.25)'; ctx.fillRect(0,0,w,h); ctx.font = "16px Consolas"; for(let y=0;y<rows;y++){ for(let x=0;x<cols;x++){ const dx = x - cols/2; const dy = y - rows/2; const dist = Math.sqrt(dx*dx + dy*dy); const wave = Math.sin(dist*0.3 - t*3); const index = Math.floor((wave+1)/2 * (chars.length-1)); const char = chars[index]; const brightness = Math.floor((wave+1)*120 + 50); ctx.fillStyle = `rgb(0,${brightness},0)`; ctx.fillText(char, x*14, y*18); } } requestAnimationFrame(draw); } ctx.fillStyle='#000'; ctx.fillRect(0,0,w,h); draw();
Ad #1
Ad #2
Scroll to Top