I've been playing around with rendering pixel text using only CSS. No JS in the final result, and no per-pixel DOM elements (too heavy).

The demo page is rendered as a long list of CSS linear-gradients. Each letter is an 8x8 matrix. Each pixel becomes a tiny background image.

Demo: https://taktek.io Gallery/Debugger: https://taktek.io/gallery Code: https://github.com/taktekhq/taktekhq.github.io

At first, I wrote each linear-gradient pixel manually... When I came to resize each pixel's size, I wrote the generator script.

1. It takes the text -> 2. breaks it into letters -> 3. gets its matrix -> 4. returns the linear-gradients list.

It chooses a variant based on the context window. For example, a period after a sentence ("hello.") should look different than inside a domain ("example.com").

My workflow now is: open the gallery -> generate the CSS in the console -> copy the result into the static page.

It's very small and a dumb tool, but I want it for an upcoming project.

If you have any feedback, maybe some pitfalls, or a better approach, I'd love to hear them.