JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div id="source"></div>

CSS

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    background: #fff;
    margin: 10px;
}
div#source {
    display: none;
}

JavaScript

var i, len, str;
var size = 3;

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var source = document.getElementById("source");

function recalculate() {
    ctx.globalAlpha = 0.75;
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = 1;
    ctx.fillStyle = "#000";

    str = source.textContent;
    var binary = str.split("").map(function (c) {
        return c.charCodeAt(0).toString(2);
    }).join("").split("").map(function (c) {
        return +c;
    });

    var width = str.length / Math.sqrt(str.length) * 2.6 * size;
    width = Math.min(canvas.width, width);

    var row = 0;
    var col = 0;
    for (i = 0, len = binary.length; i < len; ++i, col += size) {
        if (binary[i]) {
            if (col > width) {
                row += size;
                col = 0;
            }
            ctx.fillRect(col, row, size, size);
        }
    }
}

function makeid(len) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < len; ++i)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
};

setInterval(function () {
    recalculate();
    source.textContent = makeid(1024);
}, 250);

recalculate();
source.textContent = makeid(1024);