The Illegal Graphics Card: Inside pure-css-shaders-art
How Cheng Lou turned the browser's layout engine into a GPU, bypassed GitHub's Markdown filters, and built a zero-JavaScript shader using pure CSS.
Shaders art made with pure CSS, with an editable highlighted code area also made in pure CSS. Zero JavaScript!
- Cheng Lou bypassed strict Markdown filters by embedding interactive HTML inside an SVG tag to render live graphics in a GitHub README.
- The project simulates a GPU fragment shader by rendering 10,000 individual DOM nodes that each calculate their own color via CSS math functions.
- A custom font utilizing OpenType ligatures provides zero-JavaScript syntax highlighting for a functional, live code editor.
The Impossible README
You open a GitHub repository and see a glowing, undulating mathematical shape. It reacts to your mouse. You can edit the code next to it, and the shape updates in real time.
This is visually jarring because GitHub explicitly strips out JavaScript, WebGL, and interactive elements from Markdown files. Delivering a live fragment shader in this environment should be impossible.
Turning the DOM into a GPU
Cheng Lou approached the browser's layout engine as if it were a graphics card. Instead of drawing pixels on a single canvas element, the project generates a massive grid of individual paragraph tags. Each tag acts as a single pixel.
A build script generates thousands of lines of CSS, assigning normalized coordinate variables to every paragraph tag. The animation is driven by a CSS property defining a time variable that ticks precisely. The browser then uses mathematical functions to evaluate sine and cosine values for every single DOM node on every frame.
The Syntax Highlighting Loophole
Providing a live code editor typically requires a heavy JavaScript library to parse and colorize strings. Since JavaScript was strictly forbidden, Lou found a typographic loophole.
The editor is a simple style tag set to display as a block and accept text input. The syntax highlighting is handled entirely by a custom font. Using OpenType ligatures, the font physically replaces specific code strings with pre-colored glyphs at the rendering level. The logic is baked into the typeface itself.
The SVG Inception Trick
Even with pure CSS, GitHub's Markdown sanitizes raw style tags. The final deployment payload requires an elaborate nesting doll of web standards.
The entire HTML and CSS structure is wrapped inside a foreign object tag within an SVG. That SVG is then embedded into the README as a standard image link. This exploits a browser quirk where SVGs embedded as images still execute their internal CSS, bypassing the Markdown filters entirely.
The Joy of Bad Performance
Pushing 10,000 DOM nodes to recalculate complex CSS on every frame is objectively terrible for performance. It is a deliberate, joyful abuse of web standards.
At the intersection of art and bad performance
| Feature | pure-css-shaders-art | Shadertoy (WebGL) |
|---|---|---|
| Rendering Engine | CSS Object Model (DOM) | GPU via WebGL |
| Language | CSS calc() | GLSL |
| DOM Nodes | 10,000+ | 1 (Canvas) |
| GitHub README Support | Yes (via SVG) | No |
| Primary Use Case | Technical Flex | Production Graphics |
While tools like Shadertoy remain the correct choice for production graphics, this project proves that CSS has quietly evolved into a functional programming language. It is a reminder that the most interesting engineering often happens when developers ignore what a tool is supposed to do.