JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<script src="https://unpkg.com/eases/back-in-out"></script>
<canvas id="canvas" style="width:100vw;height:100vh"><</canvas>

CSS

body {
  margin: 0;
}

Babel + JSX

const canvas = document.getElementById('canvas');
canvas.setAttribute('width', document.body.clientWidth * devicePixelRatio);
canvas.setAttribute('height', document.body.clientHeight * devicePixelRatio);
const ctx = canvas.getContext('2d');

class Line {
  constructor(ctx, x, amount, dir = 'right', color = '#333') {
    this.x = x;
    this.amount = amount;
    this.dir = dir;
    this.ctx = ctx;
    this.color = color;
    this.draw();
  }
  
  draw() {
    ctx.beginPath();
    ctx.strokeStyle = this.color;
    ctx.lineWidth = 0.5;
    ctx.moveTo(this.x, 0);
    ctx.lineTo(this.x, canvas.height);
    ctx.stroke();
  }
  
  next() {
    if (this.x >= canvas.width) {
  	  this.dir = 'left';
    }
  
    if (this.x <= 0) {
      this.dir = 'right';
    }
  
    if (this.dir === 'right') {
      this.x = this.x + this.amount;
    } else {
    	this.x = this.x - this.amount;
    }
    
    return this;
  }
}

let x = 0;
let dir = 'right'

const lines = [
  new Line(ctx, 10, 1, 'right'),
  new Line(ctx, 50, 0.7, 'right'),
  new Line(ctx, 150, 0.8, 'right'),
  new Line(ctx, canvas.width / 3, 0.7, 'right', '#ffe705'),
  new Line(ctx, canvas.width / 2, 0.4, 'right'),
  new Line(ctx, canvas.width - 90, 1.12, 'right'),
    new Line(ctx, canvas.width - 90, 1.12, 'right', '#ffe705'),
  new Line(ctx, canvas.width - 30, 0.85, 'right'),
  new Line(ctx, 200, 0.7, 'left', '#ffe705'),
  new Line(ctx, Math.random() * 500, 0.7, 'left', '#ffe705'),
  new Line(ctx, canvas.width - 10, 1.1, 'left'),
];

const draw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  lines.forEach(line => {
    line.next().draw();
  });
  
  requestAnimationFrame(draw);
}

draw();