JSFiddle - React, Tailwind, and code Playground

by btipling

HTML

<canvas id="canvas">
</canvas>
<script type='text/javascript'>
  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
</script>

JavaScript

var lineWidth = 1;
var fillStyle = "rgb(200,0,0)";
var strokeStyle = "#F00";
var count = 0;
var lines = 50;
var steps = 5000;

ctx.lineWidth = lineWidth;

function drawLine() {
  if (count >= lines) {
    return;
  }
  var i;
  ctx.save();
  ctx.fillStyle = fillStyle;
  ctx.strokeStyle = strokeStyle;
  ctx.moveTo(0, 0);
  for (i = 1; i < steps; i++) {
    ctx.lineTo(i + count, i);
  }
  ctx.stroke();
  ctx.restore();
  count += 1;
  window.requestAnimFrame(drawLine);
}
drawLine();