<HTML> <HEAD> <SCRIPT> document.addEventListener("DOMContentLoaded", () => {
const COLOR_STEP = "O";
const GG = Math.pow(3, 3); const PIXELSIZE = Math.pow(3, 0); const STEP = PIXELSIZE + 0 * PIXELSIZE; const GAP = (STEP - PIXELSIZE) / 2;
function render(canvas) { const ctx = canvas.getContext("2d", { alpha: true });
canvas.width = GG STEP; canvas.height = GG STEP;
const totalPixels = GG * GG; 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 center = GG >> 1; const target = onesCount[center * GG + center];
for (let y = 0; y < GG; y++) { for (let x = 0; x < GG; x++) { const idx = y * GG + x; const val = onesCount[idx];
let v; if (COLORSTEP === "O") { v = Math.round(255 * (val / maxOnes)); } else if (COLORSTEP = "0" || COLOR_STEP = 0) { v = 255; } else { v = 255 - (target - val) * Number(COLOR_STEP); v = v < 0 ? 0 : v > 255 ? 255 : v; }
ctx.fillStyle = rgba(${v},${v},${v},${v / 255});
ctx.fillRect(x STEP + GAP, y STEP + GAP, PIXELSIZE, PIXELSIZE);
}
}
}
document.querySelectorAll("canvas.โฉฉ").forEach(render);
}); </SCRIPT>
<STYLE> { --O:CALC(1PX333); --OO:CALC(VAR(--O)19); --OOO:#7C7C7C; IMAGE-RENDERING:PIXELATED } IFRAME,IMG,DIV { MIX-BLEND-MODE:NORMAL; IMAGE-RENDERING:PIXELATED; BACKGROUND:/#00F47C;*/ LINEAR-GRADIENT(TO TOP,RGBA(255,255,255,1.093359375),RGBA(255,255,255,1.093359375)), URL(DATA:IMAGE/SVG+XML,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%203%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20style%3D%22fill%3A%230F0F0F%22%20%2F%3E%3C%2Fsvg%3E) ,URL(DATA:IMAGE/SVG+XML,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%203%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20style%3D%22fill%3A%230F0F0F%22%20%2F%3E%3C%2Fsvg%3E) ,URL(DATA:IMAGE/SVG+XML,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%203%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20style%3D%22fill%3A%230F0F0F%22%20%2F%3E%3C%2Fsvg%3E) ,URL(DATA:IMAGE/SVG+XML,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%203%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20style%3D%22fill%3A%230F0F0F%22%20%2F%3E%3C%2Fsvg%3E) ,URL(DATA:IMAGE/SVG+XML,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%203%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20style%3D%22fill%3A%230F0F0F%22%20%2F%3E%3C%2Fsvg%3E) ,URL(DATA:IMAGE/SVG+XML,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%203%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20style%3D%22fill%3A%230F0F0F%22%20%2F%3E%3C%2Fsvg%3E) ,URL(DATA:IMAGE/SVG+XML,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%203%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20style%3D%22fill%3A%230F0F0F%22%20%2F%3E%3C%2Fsvg%3E) ;BACKGROUND-SIZE:3PX,9PX,27PX,81PX,243PX,729PX,2187PX;BACKGROUND-POSITION:CENTER;BACKGROUND-REPEAT:REPEAT;BACKGROUND-BLEND-MODE:DIFFERENCE } </STYLE> </HEAD> <BODY STYLE="MARGIN:0;PADDING:0;OVERFLOW:HIDDEN;LINE-HEIGHT:1;"> <DIV CLASS="๊ ๐โโฏ๐งทโ๐โต๊ โโโปโโ๊ โต๐โ๐งทโฏโ๐๊ ">
<DIV STYLE="TRANSFORM-ORIGIN:50VW 50VH;SCALE:CALC(0.3333333334142135623730950488016887242097)"> <DIV STYLE = " OVERFLOW:HIDDEN; BORDER:0PX SOLID RED; /DISPLAY:GRID;GRID-TEMPLATE-COLUMNS:50% 50%;/ WIDTH:MIN(100VW,100VH);HEIGHT:MIN(100VW,100VH); POSITION:ABSOLUTE; TRANSFORM-ORIGIN:BOTTOM; TRANSFORM: TRANSLATEX(CALC(50VW - MIN(50VW,50VH))) TRANSLATEY(CALC(50VH - MIN(50VW,50VH))) PERSPECTIVE(MIN(50VW,50VH)) ROTATEX(0DEG) "
<DIV>
<CANVAS CLASS="โฉฉ" STYLE=POSITION:FIXED;LEFT:50%;TOP:50%;TRANSFORM:TRANSLATE(-50%,-50%);WIDTH:100%></CANVAS>
</DIV>
</DIV> </DIV>
<DIV STYLE="TRANSFORM-ORIGIN:50VW 50VH;TRANSFORM:ROTATEZ(0DEG)"> <DIV STYLE = " OVERFLOW:HIDDEN; BORDER:0PX SOLID RED; /DISPLAY:GRID;GRID-TEMPLATE-COLUMNS:50% 50%;/ WIDTH:MIN(100VW,100VH);HEIGHT:MIN(141.4213VW,141.4213VH); POSITION:ABSOLUTE; TRANSFORM-ORIGIN:TOP; TRANSFORM: TRANSLATEX(CALC(50VW - MIN(50VW,50VH))) TRANSLATEY(CALC(50VH - MIN(50VW,50VH))) PERSPECTIVE(MIN(50VW,50VH)) ROTATEX(-45DEG) "
<DIV> <DIV DATA-PALINDROME DATA-MAX-LINES="364" DATA-G="window.๊ค/Math.pow(3,0)" STYLE="--I:1PX;FONT-SIZE:VAR(--I);DISPLAY:NONE"></DIV> <DIV ALIGN=CENTER>
<CANVAS CLASS="โฉฉ" STYLE=POSITION:FIXED;LEFT:50%;TOP:50%;TRANSFORM:TRANSLATE(-50%,-50%);WIDTH:100%;HEIGHT:100%></CANVAS>
</DIV> </DIV>
</DIV> </DIV>
<DIV STYLE="TRANSFORM-ORIGIN:50VW 50VH;TRANSFORM:ROTATEZ(90DEG)"> <DIV STYLE = " OVERFLOW:HIDDEN; BORDER:0PX SOLID RED; /DISPLAY:GRID;GRID-TEMPLATE-COLUMNS:50% 50%;/ WIDTH:MIN(100VW,100VH);HEIGHT:MIN(141.4213VW,141.4213VH); POSITION:ABSOLUTE; TRANSFORM-ORIGIN:TOP; TRANSFORM: TRANSLATEX(CALC(50VW - MIN(50VW,50VH))) TRANSLATEY(CALC(50VH - MIN(50VW,50VH))) PERSPECTIVE(MIN(50VW,50VH)) ROTATEX(-45DEG) "
<DIV> <DIV DATA-PALINDROME DATA-MAX-LINES="364" DATA-G="window.๊ค/Math.pow(3,0)" STYLE="--I:1PX;FONT-SIZE:VAR(--I);DISPLAY:NONE"></DIV> <DIV ALIGN=CENTER>
<CANVAS CLASS="โฉฉ" STYLE=POSITION:FIXED;LEFT:50%;TOP:50%;TRANSFORM:TRANSLATE(-50%,-50%);WIDTH:100%;HEIGHT:100%></CANVAS>
</DIV> </DIV>
</DIV> </DIV>
<DIV STYLE="TRANSFORM-ORIGIN:50VW 50VH;TRANSFORM:ROTATEZ(180DEG)"> <DIV STYLE = " OVERFLOW:HIDDEN; BORDER:0PX SOLID RED; /DISPLAY:GRID;GRID-TEMPLATE-COLUMNS:50% 50%;/ WIDTH:MIN(100VW,100VH);HEIGHT:MIN(141.4213VW,141.4213VH); POSITION:ABSOLUTE; TRANSFORM-ORIGIN:TOP; TRANSFORM: TRANSLATEX(CALC(50VW - MIN(50VW,50VH))) TRANSLATEY(CALC(50VH - MIN(50VW,50VH))) PERSPECTIVE(MIN(50VW,50VH)) ROTATEX(-45DEG) "
<DIV> <DIV DATA-PALINDROME DATA-MAX-LINES="364" DATA-G="window.๊ค/Math.pow(3,0)" STYLE="--I:1PX;FONT-SIZE:VAR(--I);DISPLAY:NONE"></DIV> <DIV ALIGN=CENTER>
<CANVAS CLASS="โฉฉ" STYLE=POSITION:FIXED;LEFT:50%;TOP:50%;TRANSFORM:TRANSLATE(-50%,-50%);WIDTH:100%;HEIGHT:100%></CANVAS>
</DIV> </DIV>
</DIV> </DIV>
<DIV STYLE="TRANSFORM-ORIGIN:50VW 50VH;TRANSFORM:ROTATEZ(270DEG)"> <DIV STYLE = " OVERFLOW:HIDDEN; BORDER:0PX SOLID RED; /DISPLAY:GRID;GRID-TEMPLATE-COLUMNS:50% 50%;/ WIDTH:MIN(100VW,100VH);HEIGHT:MIN(141.4213VW,141.4213VH); POSITION:ABSOLUTE; TRANSFORM-ORIGIN:TOP; TRANSFORM: TRANSLATEX(CALC(50VW - MIN(50VW,50VH))) TRANSLATEY(CALC(50VH - MIN(50VW,50VH))) PERSPECTIVE(MIN(50VW,50VH)) ROTATEX(-45DEG) "
<DIV> <DIV DATA-PALINDROME DATA-MAX-LINES="364" DATA-G="window.๊ค/Math.pow(3,0)" STYLE="--I:1PX;FONT-SIZE:VAR(--I);DISPLAY:NONE"></DIV> <DIV ALIGN=CENTER>
<CANVAS CLASS="โฉฉ" STYLE=POSITION:FIXED;LEFT:50%;TOP:50%;TRANSFORM:TRANSLATE(-50%,-50%);WIDTH:100%;HEIGHT:100%></CANVAS>
</DIV> </DIV>
</DIV> </DIV>
</DIV CLASS="๊ ๐โโฏ๐งทโ๐โต๊ โโโปโโ๊ โต๐โ๐งทโฏโ๐๊ "> </BODY> </HTML>