DEV Community

Cover image for Matrix (and perlish) background effect in Javascript :)

Posted on

Matrix (and perlish) background effect in Javascript :)

Today I have something useless-but-cool to show.

My Matrix-perlish background! 😎 😎 😎

Perl Matrix

Check out my github page to see a live preview 😀

It's only a couple of lines of javascript derivated from the work that you can find here or here so I deserve absolutely zero credit but I simply modified it to make it appear more perlish! 👍

(or p@r]i$% if you prefer 😀)

Below the full code:

    <!-- background animations -->
    <div class="div_bg">
      <canvas id="c"></canvas>
      var c = document.getElementById("c");
      var ctx = c.getContext("2d");
      c.height = window.innerHeight;
      c.width = window.innerWidth;
      var txts = "~!@#$%^&*)(_-=+;:{}[]|\/<>,.";
      txts = txts.split("");
      var font_size = 12;
      var columns = c.width / font_size;
      var drops = [];
      for (var x = 0; x < columns; x++) drops[x] = 1;

      function draw() {
        ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.fillStyle = "#000";
        ctx.font = font_size + "px arial";
        for (var i = 0; i < drops.length; i++) {
          var text = txts[Math.floor(Math.random() * txts.length)];
          ctx.fillText(text, i * font_size, drops[i] * font_size);
          if (drops[i] * font_size > c.height || Math.random() > 0.98) drops[i] = 0;
      setInterval(draw, 20);
Enter fullscreen mode Exit fullscreen mode

Discussion (4)

raigaurav profile image
Gaurav Rai • Edited on

Time to use this and become hacker in front of non-technical person.
Good to have background as black and text in green for more feeling.


thibaultduponchelle profile image
Tib Author


Your comment makes me think about hollywood

ranvirchoudhary profile image
RanvirChoudhary • Edited on

Tip: You can use the character map app in windows to copy some extra-special characters and get a lot more variety than just standard keyboard characters

character map app is an app built-in to windows so you can types extra special charecters you normally woudn't be able to

also you can add a styles tag and say overflow: hidden; and press fn+f11 to get the full experience

mjgardner profile image
Mark Gardner

Well, that's one way to confirm to people that Perl is just line noise. 😉