JSFiddle - React, Tailwind, and code Playground

HTML

<body style=margin:0>
<canvas id=c width=1920 height=1080 style=width:100%>

JavaScript

// Dwitter Shim by Frank Force 2021 - MIT License

u=t=>{
x.fillStyle="#87CEEB",x.fillRect(0,0,c.width,c.height/2),x.font="256px Arial",x.fillStyle="#FFD700",x.fillText("☀",c.width-256,256);let e=c.height/2,i=e/8,h=frame%30<15?["#8B4513","#654321"]:["#654321","#8B4513"];for(let l=0;l<8;l++)x.fillStyle=h[l%2],x.fillRect(0,e+l*i,c.width,i);x.fillStyle="#32CD32",x.beginPath(),x.moveTo(.25*c.width,c.height/2),x.lineTo(0,c.height),x.lineTo(0,c.height/2),x.closePath(),x.fill(),x.beginPath(),x.moveTo(.75*c.width,c.height/2),x.lineTo(c.width,c.height),x.lineTo(c.width,c.height/2),x.closePath(),x.fill();let r="#228B22";this._init||(this._init=1,this.treeSize=128,this.treeX=c.width/8,this.treeY=c.height/2,this.treeCounter=0);let s=()=>{x.font=`${this.treeSize}px Arial`,x.fillStyle=r,x.fillText("\uD83C\uDF32",this.treeX,this.treeY),x.fillText("\uD83C\uDF32",c.width-this.treeX,this.treeY)},o=()=>{this.treeCounter++,this.treeCounter%15==0&&(this.treeY+=c.height/16,this.treeX-=this.treeSize,this.treeSize*=1.25,this.treeY>=1.1*c.height&&(this.treeY=c.height/2,this.treeX=c.width/8,this.treeSize=128)),s()};o()
};

// dwitter shim
x = c.getContext`2d`
S = Math.sin
C = Math.cos
T = Math.tan
R = (r,g,b,a=1) => `rgba(${r|0},${g|0},${b|0},${a})`
frame = 0

// ~60 fps update
setInterval( _=> u(frame++ / 60), 16)