JSFiddle - React, Tailwind, and code Playground
HTML
<body onload="init()" style="margin:0;background:#e0e0e0;">
<table id="t" cellspacing=0 cellpadding=0 />
</body>
JavaScript
function set_img(img) {
var text = ""
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
for( var i=0; i < 20; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length))
img.setAttribute("src", "https://sigil.cupcake.io/" + text + "?w=" + img_size)
setTimeout(function(){set_img(img)}, Math.random() * 800 + 200);
}
function init() {
img_size = 96
var cx = (screen.width / img_size) >> 0
var cy = (screen.height / img_size) >> 0
for(var y = 0; y < cy; y++)
{
var tr = document.createElement('tr')
for(var x = 0; x < cx; x++)
{
var td = document.createElement('td')
var img = document.createElement('img')
set_img(img)
img.setAttribute("width", img_size)
img.setAttribute("height", img_size)
td.appendChild(img)
tr.appendChild(td);
}
document.getElementById('t').appendChild(tr);
}
}