𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢᯽𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢 𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢᯽𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢

<TITLE>𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢᯽𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢 𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢᯽𔗢⩩𔗢𖤞𔗢⩩𔗢𖥕𔗢⩩𔗢𖤞𔗢⩩𔗢</TITLE>
<meta charset="UTF-8">
<head>


<style>
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #00F47C00;
}

#grid {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
</head>

<body>

<div id="s"></div>
<canvas id="grid"></canvas>

<script>
const G = Math.pow(3, 6);
const PIXEL_SIZE = 1;
const GAP_SIZE = 0;
const STEP = PIXEL_SIZE + GAP_SIZE;

const canvas = document.getElementById("grid");
canvas.width = G * STEP;
canvas.height = G * STEP;

const ctx = canvas.getContext("2d", { alpha: true });

const totalPixels = G * G;
const onesCount = new Uint8Array(totalPixels);
let maxOnes = 0;

for (let i = 1; i < totalPixels; i++) {
    onesCount[i] = onesCount[(i / 3) | 0] + (i % 3 === 1 ? 1 : 0);
    if (onesCount[i] > maxOnes) maxOnes = onesCount[i];
}

const values = [];
for (let o = 0; o <= maxOnes; o++) {
    values.push(Math.round(255 * (o / maxOnes)));
}

/* DRAW */
for (let y = 0; y < G; y++) {
    for (let x = 0; x < G; x++) {
        const idx = y * G + x;
        const v = values[onesCount[idx]];

        ctx.fillStyle = `rgba(${v},${v},${v},${v / 255})`;
        ctx.fillRect(x * STEP, y * STEP, PIXEL_SIZE, PIXEL_SIZE);
    }
}
</script>

</body>
</html>