Skip to content

Instantly share code, notes, and snippets.

@Krinkle
Last active March 14, 2026 16:56
Show Gist options
  • Select an option

  • Save Krinkle/ace3f2023a250ff387d432bdb5c22c83 to your computer and use it in GitHub Desktop.

Select an option

Save Krinkle/ace3f2023a250ff387d432bdb5c22c83 to your computer and use it in GitHub Desktop.

01. Extract shapes

https://upload.wikimedia.org/wikipedia/commons/1/17/Wikimedia_Hackathon_Northwestern_Europe_2026_logo.svg

  • Discard the background rectangles.
document.querySelectorAll('.st0').forEach(n => n.remove())
  • Extract all the rects inside g#logo.

02. Convert to HTML for messing about

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/02-workspace.html

 width="26.7" height="5.1"/>
></rect>
fill:
background:

03. Render as wrapped grid

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/03-workspace.html

04. Total

  • 1692 pixels, in 16 different colors. If hex, each pixel is a 4-bit value. With 4 bits you can make 16 possible values (1bit: 2, 2bit: 4, 3bit: 8, 4bit: 16).

  • 846 pairs of 2 pixels (8-bit pairs, 1 byte).

05. Alternate visual wrapping

The given rendering gives us 24 pixels per row, over 70.5 rows. That leaves the last row incomplete, it ends exactly halfway.

If you want an even visual rendering, we probably don't want a remainder.

List of divisors of 846
↑↓
1
2
3
6
9
18 <
47 <
94 < 
141 <
282
423
846

06. Treat as ASCII bytes

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/06-workspace.html

  • Frequency analysis
0    ["st6-st2", 73]
1    ["st11-st5", 52]
2    ["st8-st15", 49]
3    ["st11-st13", 43]
4    ["st11-st12", 38]
5    ["st5-st14", 30]
6    ["st5-st3", 30]
7    ["st6-st13", 27]
8    ["st11-st10", 27]
9    ["st11-st1", 26]
10   ["st1-st3", 25]
11   ["st8-st6", 25]
12   ["st8-st1", 22]
13   ["st11-st2", 22]
14   ["st11-st9", 22]
15   ["st1-st9", 22]
16   ["st6-NULL", 19]
17   ["st1-st15", 18]
18   ["st1-NULL", 18]
19   ["st11-st15", 17]
20   ["st1-st14", 17]
21   ["st6-st4", 15]
22   ["st6-st10", 15]
23   ["st8-st5", 13]
24   ["st1-st7", 9]
25   ["st1-st6", 9]
26   ["st11-st3", 8]
27   ["st8-st10", 8]
28   ["st6-st6", 8]
29   ["st11-st8", 8]
30   ["st11-st11", 8]
31   ["st8-st14", 7]
32   ["st11-st4", 7]
33   ["st8-st3", 7]
34   ["st1-st1", 7]
35   ["st6-st5", 6]
36   ["st1-st11", 6]
37   ["st1-st5", 6]
38   ["st8-NULL", 5]
39   ["st6-st14", 5]
40   ["st11-st6", 4]
41   ["st5-st15", 4]
42   ["st11-st14", 4]
43   ["st11-NULL", 4]
44   ["st15-st3", 3]
45   ["st15-st2", 3]
46   ["st15-st1", 3]
47   ["st6-st3", 3]
48   ["st8-st4", 3]
49   ["st8-st11", 3]
50   ["st8-st8", 3]
51   ["st6-st15", 3]
52   ["st1-st4", 3]
53   ["st15-st4", 2]
54   ["st15-st11", 2]
55   ["st6-st9", 2]
56   ["st1-st8", 2]
57   ["st6-st12", 2]
58   ["st8-st9", 2]
59   ["st15-st9", 2]
60   ["st15-st10", 1]
61   ["st15-st14", 1]
62   ["st15-st5", 1]
63   ["st1-st13", 1]
64   ["st8-st7", 1]
65   ["st11-st7", 1]
66   ["st5-st2", 1]
67   ["st1-st10", 1]
68   ["st6-st7", 1]
69   ["st15-st12", 1]
  • A-Z, a-z, 0-9, space, punctuation.
  • Python? Seems unlikely, no repeated indentation as would be required.
  • JavaScript? Could be.

07. Use a code sample from MediaWiki as inspiration

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/07-workspace.html

mediawiki$
vendor/wikimedia/minify/bin/minify js resources/src/startup/mediawiki.loader.js | sed 's/[A-Za-z]*/A/g' | pbcopy
FREQUENCY   OCCURANCES  CHARACTER
1st     4513    A
2nd     513 (
3rd     513 )
4th     405 ;
5th     399 .
6th     398 =
7th     366 
8th     266 '
9th     258 {
10th    258 }
11th    198 ,
12th    167 [
13th    167 ]
14th    102 +
15th    93  :
16th    55  |
17th    50  !
18th    43  0
19th    39  &
20th    35  /
21st    30  <
22nd    22  ?
23rd    21  $
24th    20  1
25th    12  \
26th    12  -
27th    10  2
28th    10  "
29th    8   ^
30th    7   3
31st    7   >
32nd    6   5
33rd    5   @
34th    4   7
35th    4   *
36th    3   4
37th    2   8
38th    2   9
39th    2   #
40th    1   6
  • Allocate some high frequency chars to semicolon or comma.
  • Allocate some frequency pairs to square brackets or parenthesis.

A data structure of sorts is emerging in the center.

[
    [2,7],
    [3,7],
    [4,7],
    [2,7],
    [5,8],
    [5,8],
    [9,6],
    [1,7],
    [2,7],
    [3,7],
    [1,7],
    [9,8],
    [9,8],
    [4,6],
    [2,7],
    [3,7],
    [4,7],
    [2,7],
    [4,8],
    [9,8],
    [3,7],
    [2,7],
    [1,8],
    [9,8],
    [4,6]
],

Sorted:

[
    [1,7],
    [1,7],
    [1,8],
    [2,7],
    [2,7],
    [2,7],
    [2,7],
    [2,7],
    [2,7],
    [3,7],
    [3,7],
    [3,7],
    [3,7],
    [4,6],
    [4,6],
    [4,7],
    [4,7],
    [4,8],
    [5,8],
    [5,8],
    [9,6],
    [9,8],
    [9,8],
    [9,8],
    [9,8],
]

The first and second value don't overlap. They might represent different concepts. Probably not a coordinate system, where both axis would have common numbers.

The data structure features four by three distinct values.

Value A uses: 1, 2, 3, 4, 9. Value B uses: 6, 7, 8.

Number 5 is not used.

The first four values all end with 7.

08. const and document

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/08-workspace.html

  • We believe an = would likely be in front of the found data structure.

  • That means there is also an equal sign as the 6h letter of the program.

  • That means we're assinging to something that starts with a number, which isn't valid.

  • We can't have numbers at the start of a program.

  • Perhaps the data structure uses variables and not raw numbers.

  • The code looks minified, so we're likely assigning a bunch of single letter variables.

  • The program has more than one character at the start before the first suspected equal sign.

  • Does a keyword fit there? We'd need a four-letter keyword, probably a space. ABCD X=….

  • const would fit.

CONST X=_OC__XNT,

Codesearch: \b.oc...nt\b

document

const e = document,

09. More

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/09-workspace.html

const 
e=document, 
t=e{{st6-st13}}{{st11-st6}}od{{st8-st10}}{{st1-st14}}t{{st6-st13}}3nner{{st15-st4}}
  • dot, e.
const 
e=document, 
t=e.{{st11-st6}}od{{st8-st10}}{{st1-st14}}t.3nner{{st15-st4}}
  • body, document.body as e.body
  • semicolon
const 
e=document, 
t=e.body;t.3nner{{st15-st4}}
  • inner
const 
e=document, 
t=e.body;t.inner{{st15-st4}}{{st5-st15}}{{st15-st3}}{{st15-st2}}={{st6-st6}}{{st15-st1}}{{st15-st2}}{{st15-st10}}{{st15-st1}}{{st15-st14}} 
  • innerHTML
  • quote?
const 
e=document, 
t=e.body;t.innerHTML={{st6-st6}}{{st15-st1}}L{{st15-st10}}{{st15-st1}}{{st15-st14}} 
M{{st15-st5}}{{st6-st6}}, 
const 
e=document, 
t=e.body;t.innerHTML="{{st15-st1}}L{{st15-st10}}{{st15-st1}}{{st15-st14}} 
M{{st15-st5}}", 
e.onc{{st11-st2}}ic{{st11-st14}}={{st6-st4}}{{st6-st10}}={{st1-st13}}{{st8-st14}}t.sty{{st11-st2}}e="b{{st11-st9}}c{{st11-st14}}{{st11-st8}}round{{st1-st7}}b{{st11-st2}}{{st11-st9}}c{{st11-st14}}; 
  • onclick
const 
e=document, 
t=e.body;t.innerHTML="{{st15-st1}}L{{st15-st10}}{{st15-st1}}{{st15-st14}} 
M{{st15-st5}}", 
e.onclick={{st6-st4}}{{st6-st10}}={{st1-st13}}{{st8-st14}}t.style="b{{st11-st9}}ck{{st11-st8}}round{{st1-st7}}bl{{st11-st9}}ck; 
  • background: black
const 
e=document, 
t=e.body;t.innerHTML="{{st15-st1}}L{{st15-st10}}{{st15-st1}}{{st15-st14}} 
M{{st15-st5}}", 
e.onclick={{st6-st4}}{{st6-st10}}={{st1-st13}}{{st8-st14}}t.style="background:black; 
{{st11-st11}}ont{{st6-st3}}si{{st8-st7}}e:7{{st1-NULL}}{{st1-NULL}}{{st8-NULL}}{{st8-st4}}; 
dis{{st8-NULL}}lay:{{st11-st11}}le{{st8-st4}}; 
{{st11-st7}}usti{{st11-st11}}y{{st6-st3}}content:center; 
align{{st6-st3}}items:center; 
  • display: flex
  • justify-
  • font-size
  • overflow: hidden
const 
e=document, 
t=e.body;t.innerHTML="{{st15-st1}}L{{st15-st10}}{{st15-st1}}{{st15-st14}} 
M{{st15-st5}}", 
e.onclick={{st6-st4}}{{st6-st10}}={{st1-st13}}{{st8-st14}}t.style="background:black; 
font-size:7{{st1-NULL}}{{st1-NULL}}px; 
display:flex; 
justify-content:center; 
align-items:center; 
height:6{{st1-NULL}}{{st1-NULL}}vh; 
margin:{{st1-NULL}}; 
padding:{{st1-NULL}}; 
overflow: 
hidden;", 
t.innerHTML="{{st5-st2}}u{{st8-st14}}6{{st15-st11}}76{{st1-NULL}}{{st8-st3}}";let 
e={{st1-NULL}};{{st6-st9}}function 
n{{st6-st4}}{{st6-st10}}{{st8-st14}}e{{st6-st14}}{{st6-st14}}, 
t.style.background={{st11-NULL}}hsl{{st6-st4}}{{st6-st15}}{{st8-st14}}e{{st6-st5}}{{st1-st1}}{{st1-st11}}{{st1-NULL}}{{st8-st3}}, 
{{st1-st8}}{{st1-NULL}}{{st6-st5}}, 
{{st1-st11}}{{st1-NULL}}{{st6-st5}}{{st6-st10}}{{st11-NULL}}, 
t.style.transform={{st11-NULL}}rotate{{st6-st4}}{{st6-st15}}{{st8-st14}}e{{st6-st5}}{{st1-st1}}{{st1-st11}}{{st1-NULL}}{{st8-st3}}deg{{st6-st10}} 
scale{{st6-st4}}{{st6-st15}}{{st8-st14}}6{{st6-st14}}e{{st6-st12}}6{{st1-NULL}}{{st1-NULL}}{{st6-st5}}6.{{st1-st5}}{{st8-st3}}{{st6-st10}}{{st11-NULL}}, 
re{{st8-st9}}uest{{st15-st9}}nimation{{st15-st11}}rame{{st6-st4}}n{{st6-st10}}{{st8-st3}}{{st6-st4}}{{st6-st10}};const 
n=6{{st1-NULL}}{{st1-st1}}.{{st1-st4}}{{st1-st1}}, 
o=66{{st1-st11}}.{{st1-st5}}7, 
i=6{{st1-st1}}{{st1-NULL}}.{{st1-st4}}6, 
c=6{{st1-st1}}{{st1-st4}}.{{st1-st5}}{{st1-st10}}, 
r=6{{st1-st5}}{{st1-st5}}.{{st1-st5}}{{st1-st11}}, 
s=6{{st1-st8}}7.{{st1-st11}}6, 
a=
[
  • requestAnimationFrame
const 
e=document, 
t=e.body;t.innerHTML="{{st15-st1}}L{{st15-st10}}{{st15-st1}}{{st15-st14}} 
M{{st15-st5}}", 
e.onclick={{st6-st4}}{{st6-st10}}={{st1-st13}}{{st8-st14}}t.style="background:black; 
font-size:7{{st1-NULL}}{{st1-NULL}}px; 
display:flex; 
justify-content:center; 
align-items:center; 
height:6{{st1-NULL}}{{st1-NULL}}vh; 
margin:{{st1-NULL}}; 
padding:{{st1-NULL}}; 
overflow: 
hidden;", 
t.innerHTML="{{st5-st2}}u{{st8-st14}}6F76{{st1-NULL}}{{st8-st3}}";let 
e={{st1-NULL}};{{st6-st9}}function 
n{{st6-st4}}{{st6-st10}}{{st8-st14}}e{{st6-st14}}{{st6-st14}}, 
t.style.background={{st11-NULL}}hsl{{st6-st4}}{{st6-st15}}{{st8-st14}}e{{st6-st5}}{{st1-st1}}{{st1-st11}}{{st1-NULL}}{{st8-st3}}, 
{{st1-st8}}{{st1-NULL}}{{st6-st5}}, 
{{st1-st11}}{{st1-NULL}}{{st6-st5}}{{st6-st10}}{{st11-NULL}}, 
t.style.transform={{st11-NULL}}rotate{{st6-st4}}{{st6-st15}}{{st8-st14}}e{{st6-st5}}{{st1-st1}}{{st1-st11}}{{st1-NULL}}{{st8-st3}}deg{{st6-st10}} 
scale{{st6-st4}}{{st6-st15}}{{st8-st14}}6{{st6-st14}}e{{st6-st12}}6{{st1-NULL}}{{st1-NULL}}{{st6-st5}}6.{{st1-st5}}{{st8-st3}}{{st6-st10}}{{st11-NULL}}, 
requestAnimationFrame{{st6-st4}}n{{st6-st10}}{{st8-st3}}{{st6-st4}}{{st6-st10}};const 
n=6{{st1-NULL}}{{st1-st1}}.{{st1-st4}}{{st1-st1}}, 
o=66{{st1-st11}}.{{st1-st5}}7, 
i=6{{st1-st1}}{{st1-NULL}}.{{st1-st4}}6, 
c=6{{st1-st1}}{{st1-st4}}.{{st1-st5}}{{st1-st10}}, 
r=6{{st1-st5}}{{st1-st5}}.{{st1-st5}}{{st1-st11}}, 
s=6{{st1-st8}}7.{{st1-st11}}6, 
a=
[], 
l=new 
Audio{{st15-st1}}ontext;let 
d={{st1-NULL}};{{st6-st9}}function 
e{{st6-st4}}{{st6-st10}}{{st8-st14}}let 
t=8{{st6-st7}}a
[d]
[{{st1-NULL}}], 
n=6e{{st1-st1}}{{st6-st12}}a
[d]
[6], 
o=l.create{{st15-st12}}scillator{{st6-st4}}{{st6-st10}};o.type="sawtooth", 
o.frequency.value=t, 
o.connect{{st6-st4}}l.destination{{st6-st10}}, 
o.start{{st6-st4}}{{st6-st10}}, 
o.stop{{st6-st4}}l.currentTime{{st6-st14}}.6{{st6-st10}}, 
d={{st6-st4}}d{{st6-st14}}6{{st6-st10}}{{st6-st5}}a.length, 
setTimeout{{st6-st4}}e, 
n{{st6-st10}}{{st8-st3}}{{st6-st4}}{{st6-st10}}{{st8-st3}};
  • AudioContext
  • createOscillator()
function 
e(){{st8-st14}}let 
  • curly brace
e.onclick=()={{st1-st13}}{t.style="background:black; 
  • arrow function
e.onclick=()=>{t.style="background:black; 
font-size:7{{st1-NULL}}{{st1-NULL}}px; 
display:flex; 
justify-content:center; 
align-items:center; 
height:{{st1-st9}}{{st1-NULL}}{{st1-NULL}}vh; 
margin:{{st1-NULL}}; 
padding:{{st1-NULL}}; 
  • zero?
const e=document,t=e.body;t.innerHTML="CL{{st15-st10}}C{{st15-st14}} M{{st15-st5}}",
  • CLICK ME?
const e=document,t=e.body;t.innerHTML="CLICK ME",e.onclick=()=>{t.style="background:black; font-size:{{st1-st15}}00px; display:flex; justify-content:center; align-items:center; height:{{st1-st9}}00vh; margin:0; padding:0; overflow: hidden;",t.innerHTML="{{st5-st2}}u{{{st1-st9}}F{{st1-st15}}{{st1-st9}}0{{st8-st3}}";let e=0;{{st6-st9}}function n(){e{{st6-st14}}{{st6-st14}},t.style.background='hsl({{st6-st15}}{e{{st6-st5}}{{st1-st1}}{{st1-st11}}0{{st8-st3}},{{st1-st8}}0{{st6-st5}},{{st1-st11}}0{{st6-st5}})',t.style.transform='rotate({{st6-st15}}{e{{st6-st5}}{{st1-st1}}{{st1-st11}}0{{st8-st3}}deg) scale({{st6-st15}}{{{st1-st9}}{{st6-st14}}e{{st6-st12}}{{st1-st9}}00{{st6-st5}}{{st1-st9}}.{{st1-st5}}{{st8-st3}})',requestAnimationFrame(n){{st8-st3}}();const n={{st1-st9}}0{{st1-st1}}.{{st1-st4}}{{st1-st1}},o={{st1-st9}}{{st1-st9}}{{st1-st11}}.{{st1-st5}}{{st1-st15}},i={{st1-st9}}{{st1-st1}}0.{{st1-st4}}{{st1-st9}},c={{st1-st9}}{{st1-st1}}{{st1-st4}}.{{st1-st5}}{{st1-st10}},r={{st1-st9}}{{st1-st5}}{{st1-st5}}.{{st1-st5}}{{st1-st11}},s={{st1-st9}}{{st1-st8}}{{st1-st15}}.{{st1-st11}}{{st1-st9}},a=[[o,{{st1-st15}}],[i,{{st1-st15}}],[c,{{st1-st15}}],[o,{{st1-st15}}],[s,{{st1-st6}}],[s,{{st1-st6}}],[r,{{st1-st9}}],[n,{{st1-st15}}],[o,{{st1-st15}}],[i,{{st1-st15}}],[n,{{st1-st15}}],[r,{{st1-st6}}],[r,{{st1-st6}}],[c,{{st1-st9}}],[o,{{st1-st15}}],[i,{{st1-st15}}],[c,{{st1-st15}}],[o,{{st1-st15}}],[c,{{st1-st6}}],[r,{{st1-st6}}],[i,{{st1-st15}}],[o,{{st1-st15}}],[n,{{st1-st6}}],[r,{{st1-st6}}],[c,{{st1-st9}}]],l=new AudioContext;let d=0;{{st6-st9}}function e(){let t={{st1-st6}}{{st6-st7}}a[d][0],n={{st1-st9}}e{{st1-st1}}{{st6-st12}}a[d][{{st1-st9}}],o=l.createOscillator();o.type="sawtooth",o.frequency.value=t,o.connect(l.destination),o.start(),o.stop(l.currentTime{{st6-st14}}.{{st1-st9}}),d=(d{{st6-st14}}{{st1-st9}}){{st6-st5}}a.length,setTimeout(e,n){{st8-st3}}(){{st8-st3}};
  • closing curly brace
const e=document,
t=e.body;
t.innerHTML="CLICK ME",
e.onclick=()=>{
    t.style="background:black; font-size:{{st1-st15}}00px; display:flex; justify-content:center; align-items:center; height:{{st1-st9}}00vh; margin:0; padding:0; overflow: hidden;",
    t.innerHTML="{{st5-st2}}u{{{st1-st9}}F{{st1-st15}}{{st1-st9}}0}";
    let e=0;
    {{st6-st9}}function n(){
        e{{st6-st14}}{{st6-st14}},
        t.style.background='hsl({{st6-st15}}{e{{st6-st5}}{{st1-st1}}{{st1-st11}}0},{{st1-st8}}0{{st6-st5}},{{st1-st11}}0{{st6-st5}})',
        t.style.transform='rotate({{st6-st15}}{e{{st6-st5}}{{st1-st1}}{{st1-st11}}0}deg) scale({{st6-st15}}{{{st1-st9}}{{st6-st14}}e{{st6-st12}}{{st1-st9}}00{{st6-st5}}{{st1-st9}}.{{st1-st5}}})',
        requestAnimationFrame(n)
    }();
    const n={{st1-st9}}0{{st1-st1}}.{{st1-st4}}{{st1-st1}},
    o={{st1-st9}}{{st1-st9}}{{st1-st11}}.{{st1-st5}}{{st1-st15}},
    i={{st1-st9}}{{st1-st1}}0.{{st1-st4}}{{st1-st9}},
    c={{st1-st9}}{{st1-st1}}{{st1-st4}}.{{st1-st5}}{{st1-st10}},
    r={{st1-st9}}{{st1-st5}}{{st1-st5}}.{{st1-st5}}{{st1-st11}},
    s={{st1-st9}}{{st1-st8}}{{st1-st15}}.{{st1-st11}}{{st1-st9}},
    a=[[o,{{st1-st15}}],[i,{{st1-st15}}],[c,{{st1-st15}}],[o,{{st1-st15}}],[s,{{st1-st6}}],[s,{{st1-st6}}],[r,{{st1-st9}}],[n,{{st1-st15}}],[o,{{st1-st15}}],[i,{{st1-st15}}],[n,{{st1-st15}}],[r,{{st1-st6}}],[r,{{st1-st6}}],[c,{{st1-st9}}],[o,{{st1-st15}}],[i,{{st1-st15}}],[c,{{st1-st15}}],[o,{{st1-st15}}],[c,{{st1-st6}}],[r,{{st1-st6}}],[i,{{st1-st15}}],[o,{{st1-st15}}],[n,{{st1-st6}}],[r,{{st1-st6}}],[c,{{st1-st9}}]],
    l=new AudioContext;
    let d=0;
    {{st6-st9}}function e(){
        let t={{st1-st6}}{{st6-st7}}a[d][0],
        n={{st1-st9}}e{{st1-st1}}{{st6-st12}}a[d][{{st1-st9}}],
        o=l.createOscillator();
        o.type="sawtooth",
        o.frequency.value=t,
        o.connect(l.destination),
        o.start(),
        o.stop(l.currentTime{{st6-st14}}.{{st1-st9}}),
        d=(d{{st6-st14}}{{st1-st9}}){{st6-st5}}a.length,
        setTimeout(e,n)
    }()
};
  • IIFE at {{st6-st9}} +, or 0, or ~. Unclear.
'hsl({{st6-st15}}{`
  • Curly brace, template string, dollar sign.
  • Single quote is wrong, use backtick for template string literal instead.
  • We now have enough syntax for automatic prettifier.
const e = document,
    t = e.body;
t.innerHTML = "CLICK ME", e.onclick = () => {
    t.style = "background:black; font-size:_00px; display:flex; justify-content:center; align-items:center; height:_00vh; margin:0; padding:0; overflow: hidden;", t.innerHTML = "_u{_F__0}";
    let e = 0;
    _function n() {
        e__,
        t.style.background = `hsl(${e___0},_0_,_0_)`,
        t.style.transform = `rotate(${e___0}deg) scale(${__e__00__._})`,
        requestAnimationFrame(n)
    }();
    const n = _0_.__,
        o = ___.__,
        i = __0.__,
        c = ___.__,
        r = ___.__,
        s = ___.__,
        a = [
            [o, _],
            [i, _],
            [c, _],
            [o, _],
            [s, _],
            [s, _],
            [r, _],
            [n, _],
            [o, _],
            [i, _],
            [n, _],
            [r, _],
            [r, _],
            [c, _],
            [o, _],
            [i, _],
            [c, _],
            [o, _],
            [c, _],
            [r, _],
            [i, _],
            [o, _],
            [n, _],
            [r, _],
            [c, _]
        ],
        l = new AudioContext;
    let d = 0;
    _function e() {
        let t = __a[d][0],
            n = _e__a[d][_],
            o = l.createOscillator();
        o.type = "sawtooth", o.frequency.value = t, o.connect(l.destination), o.start(), o.stop(l.currentTime_._), d = (d__) _a.length, setTimeout(e, n)
    }()
};
  • Unicode character. Backslash.
t.innerHTML = "_u{_F__0}";

t.innerHTML="{{st5-st2}}u{{{st1-st9}}F{{st1-st15}}{{st1-st9}}0}";
  • Hint: Goat emoji. U+1F410.
const e = document,
    t = e.body;
t.innerHTML = "CLICK ME", e.onclick = () => {
    t.style = "background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;", t.innerHTML = "\u{1F410}";
    let e = 0;
    _function n() {
        e__,
        t.style.background = `hsl(${e___0},_0_,_0_)`,
        t.style.transform = `rotate(${e___0}deg) scale(${1_e_100_1._})`,
        requestAnimationFrame(n)
    }();
    const n = 10 _.__,
        o = 11 _._4,
        i = 1 _0._1,
        c = 1 __.__,
        r = 1 __.__,
        s = 1 _4._1,
        a = [
            [o, 4],
            [i, 4],
            [c, 4],
            [o, 4],
            [s, _],
            [s, _],
            [r, 1],
            [n, 4],
            [o, 4],
            [i, 4],
            [n, 4],
            [r, _],
            [r, _],
            [c, 1],
            [o, 4],
            [i, 4],
            [c, 4],
            [o, 4],
            [c, _],
            [r, _],
            [i, 4],
            [o, 4],
            [n, _],
            [r, _],
            [c, 1]
        ],
        l = new AudioContext;
    let d = 0;
    _function e() {
        let t = __a[d][0],
            n = 1e __a[d][1],
            o = l.createOscillator();
        o.type = "sawtooth", o.frequency.value = t, o.connect(l.destination), o.start(), o.stop(l.currentTime_ .1), d = (d_1) _a.length, setTimeout(e, n)
    }()
};
const e = document,
    t = e.body;
t.innerHTML = "CLICK ME", e.onclick = () => {
    t.style = "background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;", t.innerHTML = "\u{1F410}";
    let e = 0;
    _function n() {
        e__,
        t.style.background = `hsl(${e___0},_0_,_0_)`,
        t.style.transform = `rotate(${e___0}deg) scale(${1_e_100_1._})`,
        requestAnimationFrame(n)
    }();
    const n = 10 _.__,
        o = 11 _._4,
        i = 1 _0._1,
        c = 1 __.__,
        r = 1 __.__,
        s = 1 _4._1,
        a = [
            [o, 4],
            [i, 4],
            [c, 4],
            [o, 4],
            [s, _],
            [s, _],
            [r, 1],
            [n, 4],
            [o, 4],
            [i, 4],
            [n, 4],
            [r, _],
            [r, _],
            [c, 1],
            [o, 4],
            [i, 4],
            [c, 4],
            [o, 4],
            [c, _],
            [r, _],
            [i, 4],
            [o, 4],
            [n, _],
            [r, _],
            [c, 1]
        ],
        l = new AudioContext;
    let d = 0;
    _function e() {
        let t = __a[d][0],
            n = 1e __a[d][1],
            o = l.createOscillator();
        o.type = "sawtooth", o.frequency.value = t, o.connect(l.destination), o.start(), o.stop(l.currentTime_ .1), d = (d_1) _a.length, setTimeout(e, n)
    }()
};

09. It compiles!

const e=document,t=e.body;t.innerHTML="CLICK ME",e.onclick=()=>{t.style="background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;",t.innerHTML="\u{1F410}";let e=0; st6_st9 function n(){e st6_st14  st6_st14 ,t.style.background=`hsl(${e st6_st5  st1_st1  st1_st11 0}, st1_st8 0 st6_st5 , st1_st11 0 st6_st5 )`,t.style.transform=`rotate(${e st6_st5  st1_st1  st1_st11 0}deg) scale(${1 st6_st14 e st6_st12 100 st6_st5 1. st1_st5 })`,requestAnimationFrame(n)}();const n=10 st1_st1 . st1_st4  st1_st1 ,o=11 st1_st11 . st1_st5 4,i=1 st1_st1 0. st1_st4 1,c=1 st1_st1  st1_st4 . st1_st5  st1_st10 ,r=1 st1_st5  st1_st5 . st1_st5  st1_st11 ,s=1 st1_st8 4. st1_st11 1,a=[[o,4],[i,4],[c,4],[o,4],[s, st1_st6 ],[s, st1_st6 ],[r,1],[n,4],[o,4],[i,4],[n,4],[r, st1_st6 ],[r, st1_st6 ],[c,1],[o,4],[i,4],[c,4],[o,4],[c, st1_st6 ],[r, st1_st6 ],[i,4],[o,4],[n, st1_st6 ],[r, st1_st6 ],[c,1]],l=new AudioContext;let d=0; st6_st9 function e(){let t= st1_st6  st6_st7 a[d][0],n=1e st1_st1  st6_st12 a[d][1],o=l.createOscillator();o.type="sawtooth",o.frequency.value=t,o.connect(l.destination),o.start(),o.stop(l.currentTime st6_st14 .1),d=(d st6_st14 1) st6_st5 a.length,setTimeout(e,n)}()};
const e = document,
    t = e.body;
t.innerHTML = "CLICK ME", e.onclick = () => {
    t.style = "background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;", t.innerHTML = "\u{1F410}";
    let e = 0;
    st6_st9
    function n() {
        e st6_st14 st6_st14, t.style.background = `hsl(${e st6_st5  st1_st1  st1_st11 0}, st1_st8 0 st6_st5 , st1_st11 0 st6_st5 )`, t.style.transform = `rotate(${e st6_st5  st1_st1  st1_st11 0}deg) scale(${1 st6_st14 e st6_st12 100 st6_st5 1. st1_st5 })`, requestAnimationFrame(n)
    }();
    const n = 10 st1_st1.st1_st4 st1_st1,
        o = 11 st1_st11.st1_st5 4,
        i = 1 st1_st1 0. st1_st4 1,
        c = 1 st1_st1 st1_st4.st1_st5 st1_st10,
        r = 1 st1_st5 st1_st5.st1_st5 st1_st11,
        s = 1 st1_st8 4. st1_st11 1,
        a = [
            [o, 4],
            [i, 4],
            [c, 4],
            [o, 4],
            [s, st1_st6],
            [s, st1_st6],
            [r, 1],
            [n, 4],
            [o, 4],
            [i, 4],
            [n, 4],
            [r, st1_st6],
            [r, st1_st6],
            [c, 1],
            [o, 4],
            [i, 4],
            [c, 4],
            [o, 4],
            [c, st1_st6],
            [r, st1_st6],
            [i, 4],
            [o, 4],
            [n, st1_st6],
            [r, st1_st6],
            [c, 1]
        ],
        l = new AudioContext;
    let d = 0;
    st6_st9
    function e() {
        let t = st1_st6 st6_st7 a[d][0],
            n = 1e st1_st1 st6_st12 a[d][1],
            o = l.createOscillator();
        o.type = "sawtooth", o.frequency.value = t, o.connect(l.destination), o.start(), o.stop(l.currentTime st6_st14 .1), d = (d st6_st14 1) st6_st5 a.length, setTimeout(e, n)
    }()
};
  • plus plus
const e=document,t=e.body;t.innerHTML="CLICK ME",e.onclick=()=>{t.style="background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;",t.innerHTML="\u{1F410}";let e=0; st6_st9 function n(){e++,t.style.background=`hsl(${e st6_st5  st1_st1  st1_st11 0}, st1_st8 0 st6_st5 , st1_st11 0 st6_st5 )`,t.style.transform=`rotate(${e st6_st5  st1_st1  st1_st11 0}deg) scale(${1+e st6_st12 100 st6_st5 1. st1_st5 })`,requestAnimationFrame(n)}();const n=10 st1_st1 . st1_st4  st1_st1 ,o=11 st1_st11 . st1_st5 4,i=1 st1_st1 0. st1_st4 1,c=1 st1_st1  st1_st4 . st1_st5  st1_st10 ,r=1 st1_st5  st1_st5 . st1_st5  st1_st11 ,s=1 st1_st8 4. st1_st11 1,a=[[o,4],[i,4],[c,4],[o,4],[s, st1_st6 ],[s, st1_st6 ],[r,1],[n,4],[o,4],[i,4],[n,4],[r, st1_st6 ],[r, st1_st6 ],[c,1],[o,4],[i,4],[c,4],[o,4],[c, st1_st6 ],[r, st1_st6 ],[i,4],[o,4],[n, st1_st6 ],[r, st1_st6 ],[c,1]],l=new AudioContext;let d=0; st6_st9 function e(){let t= st1_st6  st6_st7 a[d][0],n=1e st1_st1  st6_st12 a[d][1],o=l.createOscillator();o.type="sawtooth",o.frequency.value=t,o.connect(l.destination),o.start(),o.stop(l.currentTime+.1),d=(d+1) st6_st5 a.length,setTimeout(e,n)}()};
  • st6_st5 as percentage sign 0% in CSS hsl. num % num in JS.
const e=document,t=e.body;t.innerHTML="CLICK ME",e.onclick=()=>{t.style="background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;",t.innerHTML="\u{1F410}";let e=0; st6_st9 function n(){e++,t.style.background=`hsl(${e% st1_st1  st1_st11 0}, st1_st8 0%, st1_st11 0%)`,t.style.transform=`rotate(${e% st1_st1  st1_st11 0}deg) scale(${1+e st6_st12 100%1. st1_st5 })`,requestAnimationFrame(n)}();const n=10 st1_st1 . st1_st4  st1_st1 ,o=11 st1_st11 . st1_st5 4,i=1 st1_st1 0. st1_st4 1,c=1 st1_st1  st1_st4 . st1_st5  st1_st10 ,r=1 st1_st5  st1_st5 . st1_st5  st1_st11 ,s=1 st1_st8 4. st1_st11 1,a=[[o,4],[i,4],[c,4],[o,4],[s, st1_st6 ],[s, st1_st6 ],[r,1],[n,4],[o,4],[i,4],[n,4],[r, st1_st6 ],[r, st1_st6 ],[c,1],[o,4],[i,4],[c,4],[o,4],[c, st1_st6 ],[r, st1_st6 ],[i,4],[o,4],[n, st1_st6 ],[r, st1_st6 ],[c,1]],l=new AudioContext;let d=0; st6_st9 function e(){let t= st1_st6  st6_st7 a[d][0],n=1e st1_st1  st6_st12 a[d][1],o=l.createOscillator();o.type="sawtooth",o.frequency.value=t,o.connect(l.destination),o.start(),o.stop(l.currentTime+.1),d=(d+1)%a.length,setTimeout(e,n)}()};
  • Fill remaining placeholders with semirandom numbers based on the token numbers.
const e=document,t=e.body;t.innerHTML="CLICK ME",e.onclick=()=>{t.style="background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;",t.innerHTML="\u{1F410}";let e=0;69function n(){e++,t.style.background=`hsl(${e%111110},180%,1110%)`,t.style.transform=`rotate(${e%111110}deg) scale(${1+e612100%1.15})`,requestAnimationFrame(n)}();const n=1011.1411,o=11111.154,i=1110.141,c=11114.15110,r=11515.15111,s=1184.1111,a=[[o,4],[i,4],[c,4],[o,4],[s,16],[s,16],[r,1],[n,4],[o,4],[i,4],[n,4],[r,16],[r,16],[c,1],[o,4],[i,4],[c,4],[o,4],[c,16],[r,16],[i,4],[o,4],[n,16],[r,16],[c,1]],l=new AudioContext;let d=0;69function e(){let t=1667a[d][0],n=1e11612a[d][1],o=l.createOscillator();o.type="sawtooth",o.frequency.value=t,o.connect(l.destination),o.start(),o.stop(l.currentTime+.1),d=(d+1)%a.length,setTimeout(e,n)}()};
  • 69function, that's st6_st9. Still undecided between + - ~ !. Not used elsewhere. I guess it doesn't matter. Let's use bang for now.
const e=document,t=e.body;t.innerHTML="CLICK ME",e.onclick=()=>{t.style="background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;",t.innerHTML="\u{1F410}";let e=0;!function n(){e++,t.style.background=`hsl(${e%111110},180%,1110%)`,t.style.transform=`rotate(${e%111110}deg) scale(${1+e612100%1.15})`,requestAnimationFrame(n)}();const n=1011.1411,o=11111.154,i=1110.141,c=11114.15110,r=11515.15111,s=1184.1111,a=[[o,4],[i,4],[c,4],[o,4],[s,16],[s,16],[r,1],[n,4],[o,4],[i,4],[n,4],[r,16],[r,16],[c,1],[o,4],[i,4],[c,4],[o,4],[c,16],[r,16],[i,4],[o,4],[n,16],[r,16],[c,1]],l=new AudioContext;let d=0;!function e(){let t=1667a[d][0],n=1e11612a[d][1],o=l.createOscillator();o.type="sawtooth",o.frequency.value=t,o.connect(l.destination),o.start(),o.stop(l.currentTime+.1),d=(d+1)%a.length,setTimeout(e,n)}()};
let t=1667a[d][0],n=1e11612a[d][1],
let t= st1_st6  st6_st7 a[d][0],
  • st1_st6 is most likely a number, or maybe letter.

  • st6_st7 must be an operator instead of a number to form valid syntax. ^ & are unlikely. % - already used. Could be ~ * + etc.

    Trying * for now.

n=1e st1_st1 st6_st12 a[d][1],
  • Here too, one of them must be an operator instead of a number.
  • st1_st1 must be a number, right afer 1e for exponent number syntax.
  • st6_st12 must thus be an operator. Let's try +.
const e=document,t=e.body;t.innerHTML="CLICK ME",e.onclick=()=>{t.style="background:black; font-size:400px; display:flex; justify-content:center; align-items:center; height:100vh; margin:0; padding:0; overflow: hidden;",t.innerHTML="\u{1F410}";let e=0;!function n(){e++,t.style.background=`hsl(${e% st1_st1  st1_st11 0}, st1_st8 0%, st1_st11 0%)`,t.style.transform=`rotate(${e% st1_st1  st1_st11 0}deg) scale(${1+e+100%1. st1_st5 })`,requestAnimationFrame(n)}();const n=10 st1_st1 . st1_st4  st1_st1 ,o=11 st1_st11 . st1_st5 4,i=1 st1_st1 0. st1_st4 1,c=1 st1_st1  st1_st4 . st1_st5  st1_st10 ,r=1 st1_st5  st1_st5 . st1_st5  st1_st11 ,s=1 st1_st8 4. st1_st11 1,a=[[o,4],[i,4],[c,4],[o,4],[s, st1_st6 ],[s, st1_st6 ],[r,1],[n,4],[o,4],[i,4],[n,4],[r, st1_st6 ],[r, st1_st6 ],[c,1],[o,4],[i,4],[c,4],[o,4],[c, st1_st6 ],[r, st1_st6 ],[i,4],[o,4],[n, st1_st6 ],[r, st1_st6 ],[c,1]],l=new AudioContext;let d=0;!function e(){let t= st1_st6 *a[d][0],n=1e st1_st1 +a[d][1],o=l.createOscillator();o.type="sawtooth",o.frequency.value=t,o.connect(l.destination),o.start(),o.stop(l.currentTime+.1),d=(d+1)%a.length,setTimeout(e,n)}()};

We have several placeholders still undefined, but they are likely just numbers. Let's fill in something and compile with eval.

  // Unsure
  'st6_st7': '*',
  'st6_st12': '+',

  // TODO: These are most likely numbers
  'st1_st1': 2, // 0, 1, and 4 already used above
  'st1_st10': 3,
  'st1_st11': 5,
  'st1_st4': 6,
  'st1_st5': 7,
  'st1_st6': 8,
  'st1_st8': 9,

11. Finale?

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/10-workspace.html

  • Nothing appears on screen. No animation or sound. Let's flip the operators.
  'st6_st7': '*',
  'st6_st12': '+',

This renders a zoom-booming circling goat. Progress, but it is a bit broken and some numbers are missing.

Change in tactics.

12. Decode by half-byte instead of whole-byte

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/12-workspace.html

https://people.wikimedia.org/~krinkle/wmhack2026-puzzle/13-workspace.html

https://en.wikipedia.org/wiki/ASCII#Printable_character_table

  • const e=
  • background
var preferred = {
  'NULL': '0',
  'st1': '3',
  'st2': 'C',
  'st3': 'D',
  'st4': '8',
  'st5': '5',
  'st6': '2',
  'st7': 'A',
  'st8': '7',
  'st9': '1',
  'st10': '9',
  'st11': '6',
  'st12': 'F',
  'st13': 'E',
  'st14': 'B',
  'st15': '4',
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment