const sin = [

0,1,1,2,2,3,3,4,4,5,5,6,6,6,7,7,7,8,8,8,8,9,9,9,9,9,9,9,

9,9,9,9,9,9,9,9,9,9,9,8,8,8,8,7,7,7,6,6,5,5,5,4,4,3,3,2,2,

1,1,0,0,-1,-1,-2,-2,-3,-3,-4,-4,-4,-5,-5,-6,-6,-7,-7,-7,-8,

-8,-8,-9,-9,-9,-9,-10,-10,-10,-10,-10,-10,-10,-10,-10,-10,

-10,-10,-10,-10,-10,-10,-10,-10,-9,-9,-9,-9,-8,-8,-8,-7,-7,

-6,-6,-6,-5,-5,-4,-4,-3,-3,-2,-2,-1,-1,0];

const c = document.body.appendChild(

  document.createElement('canvas')

).getContext('2d');

const size = 200;

c.canvas.width = c.canvas.height = size;

let x = 0;

let tick = 0;

let xOff = 30;

let lines = 14;

let pad = 10;

let stagger = 8;

const loop = () => {

  tick++;

  c.fillStyle = 'red';

  c.fillRect(0, 0, size, size);

  c.fillStyle = 'white';

  for (let i = 0; i < size; i++) {

    for (let j = 1; j < lines; j++) { 

      x = xOff + sin[(i + j * stagger + tick) % 125];

      c.fillRect(x + j * pad, i, 1, 1);

    }

  }

  requestAnimationFrame(loop);

};

loop()