At first glance, Bad Apple!! appears quite simple: black, white, and a silhouette. In motion, it becomes a complex 2D animation built from constantly transforming shapes, fine contours, particles, hard cuts, and tightly choreographed movement.
The animation has become an unofficial benchmark for 2D render engines: if it can render Bad Apple!!, it can render anything. The challenge is routinely carried onto devices that were never designed—or remotely equipped—to display an animation like this. Terminals, tiny displays, unusual hardware, and wildly inventive output systems all become a stage. Reconstructing the original video is as much a creative ritual as it is a technical test.
This experiment brings that tradition into the browser and asks the same question of its entire spectrum of 2D surfaces, from the most obvious to the decidedly not-so-obvious. The same decoded frames pass through Canvas 2D, SVG, CSS, an ASCII <pre>, and a matrix of thousands of real HTML checkboxes. Every frame you see is drawn by the selected rendering technology.
Media Credits
Shadow-art PV: あにら (Anira)
Japanese audio: Bad Apple!! feat. nomico — Alstroemeria Records
German audio: German vocals and lyrics by StrawbellyCake.
English audio: English vocals and lyrics by JubyPhonic.
