Recreating the Matrix Effect

How to build a Matrix-style background in pure HTML, CSS, and JavaScript.

2024-11-18

I built a neat Matrix-style background for a recent project. I don’t think I’m going to launch the project, so I wanted to share the background code, because it looks quite cool!

Here’s how it works - first, create an SVG element, and then generate a set of row and column positions based on the width and height of the window. Then, for each row and column, create a text element, set its position, font size, font family, and using requestAnimationFrame, update the text content and fill color.

It looks best as a full screen background, but you can see how it looks constrained to a small area below:

The full source code is available below:

<svg id="matrix-bg"></svg>

<script>
  const svg = document.getElementById('matrix-bg');
  const width = window.innerWidth;
  const height = window.innerHeight;
  const fontSize = 10;
  const columns = Math.floor(width / fontSize);
  const rows = Math.floor(height / fontSize);
  const characters = [];

  for (let i = 0; i < columns; i++) {
    for (let j = 0; j < rows; j++) {
      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('x', i * fontSize);
      text.setAttribute('y', j * fontSize);
      text.setAttribute('font-size', `${fontSize}px`);
      text.setAttribute('font-family', 'IBM Plex Mono, monospace');
      text.setAttribute('fill', `rgba(255, 255, 255, ${Math.random() * 0.2 + 0.1})`);
      text.textContent = getRandomChar();
      svg.appendChild(text);
      characters.push(text);
    }
  }

  function getRandomChar() {
    return String.fromCharCode(33 + Math.floor(Math.random() * 94));
  }

  function updateMatrix() {
    characters.forEach(char => {
      if (Math.random() < 0.01) { // 1% chance to change each character
        char.textContent = getRandomChar();
        char.setAttribute('fill', `rgba(255, 255, 255, ${Math.random() * 0.2 + 0.1})`);
      }
    });
    requestAnimationFrame(updateMatrix);
  }

  updateMatrix();
</script>

As a further improvement, you could take the fill attributes and make it more colorful. The style I included in my source works for the design I was using, but for a “true” Matrix effect, you would want to use some CRT-style green colors.