<canvas width='1000' height='500' id='backface'><p>Your browser does not support this canvas element. Please try another broswer or device.</p></canvas>
body{
  margin:0;
  overflow:hidden;
}
#backface{
  background-color: black;
}
let context = backface.getContext("2d"),
  lineWidth = 5;
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
function resize() {
  context.canvas.width = window.innerWidth;
  context.canvas.height = window.innerHeight;
}
window.addEventListener("resize", resize, false);
function lines() {
  var valuesT = [],
    valuesB = [];
  for (var i = 0; i < backface.width; i++) {
    valuesT[i] = Math.floor(Math.random() * (backface.height / 2 - 1)) + 1;
    valuesB[i] = Math.floor(Math.random() * (backface.height / 2 - 1)) + 1;
  }
  var i = 0,
    rr = Math.floor(Math.random() * (3 - 1)) + 1,
    rg = Math.floor(Math.random() * (3 - 1)) + 1,
    rb = Math.floor(Math.random() * (3 - 1)) + 1,
    r = 255,
    g = 255,
    b = 255;
  requestAnimationFrame(function () {
    drawLines(i);
  });
  function drawLines(i) {
    //change this to a for loop that works.
    if (rr == 2) {
      r = Math.floor(Math.random() * (255 - 1)) + 1;
    } else {
      r = 0;
    }
    if (rg == 2) {
      g = Math.floor(Math.random() * (255 - 1)) + 1;
    } else {
      g = 0;
    }
    if (rb == 2) {
      b = Math.floor(Math.random() * (255 - 1)) + 1;
    } else {
      b = 0;
    }
    if (rr != 2 && rg != 2 && rb != 2) {
      var rand = Math.floor(Math.random() * (255 - 1)) + 1;
      r = rand;
      g = rand;
      b = rand;
    }

    context.clearRect(i, 0, 1 + lineWidth, backface.height);
    context.beginPath();
    context.lineWidth = lineWidth;
    context.strokeStyle = `rgba(${r},${g},${b},1)`;
    context.moveTo(i, 0);
    context.lineTo(i, 0 + valuesT[i]);
    context.stroke();
    context.closePath();

    context.beginPath();
    context.lineWidth = lineWidth;
    context.strokeStyle = `rgba(${r},${g},${b},1)`;
    context.moveTo(i, backface.height);
    context.lineTo(i, backface.height - valuesB[i]);
    context.stroke();
    context.closePath();
    //console.log(values[i]);
    if (i >= backface.width) {
      i = 0;
      requestAnimationFrame(lines);
    } else {
      i = i + 1 + lineWidth;
      requestAnimationFrame(function () {
        drawLines(i);
      });
    }
    //setTimeout(function() { drawLines(i); }, 1);
  }
}
requestAnimationFrame(lines);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.