Quine Skull
The source
<body bgcolor=x onload='setInterval(f=e=>{for(i=0,w=20,t++,e="",l=f+e;i<l.length;e+=`<f style="background:${"ѱ˺ǼĤĤǼǜɲѱ".charCodeAt(i/w)&1<<i%w-t?`hsl(${(i-20*t)%360},100%,50%)`:`#111`}">${l[i++]}</f>${i%w?"":"\n"}`);p.innerHTML=e/*๏_๏*/ },t=99)'><pre id="p">
How it works
1 — The skull bitmap
The string “ѱ˺ǼĤĤǼǜɲѱ” encodes the skull as 9 Unicode code points. Each character’s code point is a 20-bit bitmask for one row of the skull: if bit col is set, that cell is lit. charCodeAt(i/w) extracts the row mask for character index i.
2 — Self-reference via f + ""
f holds the setInterval callback. l = f + e (where e = "") triggers JavaScript’s implicit toString() on the function, giving l the raw source text of f itself. That text is then rendered — the function displays its own code.
3 — Character rendering with <f>
Each character in l is wrapped in a <f> element — an arbitrary custom tag treated as inline by browsers. Its background CSS property is set to the skull-pixel colour for that position. The entire frame is written to p.innerHTML at once.
4 — Pixel lookup with scrolling
“ѱ˺ǼĤĤǼǜɲѱ”.charCodeAt(i/w) & 1<<i%w-t: integer-dividing i by w=20 gives the row index; the bit shift by (col − t) tests the column offset relative to frame counter t. As t increments each tick, the tested column shifts left — scrolling the skull across the source.
5 — Rainbow colour
A lit pixel receives colour hsl(${(i-20*t)%360},100%,50%). The hue depends on both the character index and the frame counter, so it continuously drifts and produces a smooth rainbow wave that travels across the skull independent of the scroll. Dark pixels use #111.
6 — Animation loop
setInterval(f=e=>{…}, t=99) sets up a 99 ms timer. The expression f=e=>{…} simultaneously defines the arrow function and stores it in f — making it available for self-reference in mechanism 2. Each tick increments t, advancing both the scroll and the rainbow.