JSFiddle - React, Tailwind, and code Playground

by Богдан Пирожок

HTML

<canvas id="test"></canvas>
<script src="main.js"></script>

CSS

html,body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #91b4d4;
}
canvas {
  transform: perspective(200px) rotateX(45deg);
  position: absolute;
  left: 50%;
  margin-left: -600px;
}

JavaScript

var canvas = document.querySelector('canvas');

canvas.width = 1200;
canvas.height = 300;

var ctx = canvas.getContext('2d');

var xOffset = 0;
var yOffset = 0;

function draw(){
  if ( yOffset < 0 ) {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  }
  ctx.globalCompositeOperation="source-out";
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, canvas.height);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(canvas.width, 0);
  ctx.lineTo(canvas.width/2, canvas.height);
  ctx.closePath();
  ctx.fill();

  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 1;

  ctx.beginPath();
  ctx.moveTo(0,0);

  for(var i = 0; i < canvas.width+50;i+=50){
    ctx.moveTo(i + xOffset % 50,0);
    ctx.lineTo(i + xOffset%50, canvas.height);
  }
  
  for(var i = 0; i < canvas.height+20;i+=20){
    ctx.moveTo(0,i + yOffset % 20);
    ctx.lineTo(canvas.width,i + yOffset % 20);
  }
  ctx.stroke();

  yOffset -=1;
  window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);