JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="background"></canvas>
JavaScript
function Bit(size, color){
this.size = size;
if (size < 20)
{
this.speed = 1.5;
}
else if(size < 30)
{
this.speed = 1;
}
else
{
this.speed = 0.5;
}
this.color = color;
this.xpos = Math.random() * screen.availWidth - this.size;
this.ypos = 100 + 500 * (canvas.width-this.xpos)/canvas.width + 100 * Math.sin(this.offset + this.xpos / 500);
this.offset = new Number(100 * Math.random());
this.tick = function()
{
if(this.xpos > maxX)
{
this.xpos = -this.size;
this.offset = new Number(100 * Math.random());
}
else
{
this.xpos += this.speed;
}
this.ypos = 100 + 500 * (canvas.width-this.xpos)/canvas.width + 100 * Math.sin(this.offset + this.xpos / 500);
}
this.draw = function()
{
context.fillStyle = this.color;
context.fillRect(this.xpos, this.ypos, this.size, this.size);
}
} // end of bit object
function reDraw(){
context.clearRect(0,0,canvas.width, canvas.height);
for(var bit in bits){
bits[bit].draw();
bits[bit].tick();
}
}
var colours = ['#FF24DE', '#4ABAFF', '#AFE48A', '#FF9742'],
maxX = screen.availWidth + 40;
var canvas =...