JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id='c' style='position:absolute; left:0px; top:0px;'>
</canvas>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
JavaScript
var
canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
maxVelocity = height * 0.00067;
velocity = height * 0.00019;
velocityInterval = setInterval(function(){
velocity+= height * 0.000001;
if(velocity > maxVelocity) velocity = maxVelocity;
ctx.fillRect(1, height / 2, width * (velocity / maxVelocity), height / 30);
}, 1);