function matrix({ selector = "canvas", el = null, color = "#0e0", font = "15pt monospace", fps = 40, size = 20, width = null, height = null, getChar = () => String.fromCharCode(Math.random() * 128), } = {}) { const canvas = el || document.querySelector(selector); if (window.MATRIX_INTERVAL) { clearInterval(window.MATRIX_INTERVAL); } const ctx = canvas.getContext("2d"); const w = (canvas.width = width || canvas.parentElement.offsetWidth); const h = (canvas.height = width || canvas.parentElement.offsetHeight); const cols = Math.floor(w / size) + 1; const ypos = Array(cols).fill(0); // Clear it ctx.clearRect(0, 0, w, h); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, w, h); function _matrix() { ctx.fillStyle = "#0001"; ctx.fillRect(0, 0, w, h); ctx.font = font; ypos.forEach((y, ind) => { const x = ind * size; // This is what gets passed to the functions let args = { x, y, width: w, height: h }; const text = getChar(args); let col; if (typeof color === "function") { col = color(args); } else { col = color; } ctx.fillStyle = col; ctx.fillText(text, x, y); if (y > 100 + Math.random() * 10000) ypos[ind] = 0; else ypos[ind] = y + size; }); } window.MATRIX_INTERVAL = setInterval(_matrix, 1000 / fps); } matrix({ selector: "canvas", color: ({ x, y, width, height }) => { // Nice diagonal gradient: // y / height = percentage down, toString(16) = hex char return `#${Math.floor((y / height) * 16).toString(16)}f${Math.floor( (x / width) * 16 ).toString(16)}`; }, font: "8px monospace", fps: 20, size: 8, width: window.innerWidth, height: window.innerHeight, });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter