pure-css-shaders-art

Pure CSS Shaders Art

Dear GitHub: please don’t disable this! This is harmless

Shaders art made with pure CSS, with an editable highlighted code area also made in pure CSS. Zero JavaScript!

The demos are responsive & editable even on mobile. Check out this repo’s various html or svg sources.

Happy Valentines
One Ring (warning: slow)
Apple Squircle with Anti-Aliasing from iOS since CSS can’t do squircles natively

How does this work?

It’s a grid of <p /> with background-color calculated using CSS calc(), :hover, keyframes and custom properties. Just your typical CSS + math.

The live editor is a style tag made visible with display: block that’s contenteditable 😝. It uses a special font that recognizes language grammars and replace characters with their colored counterpart (!). Since this is done in the font file, still no JS required. More info here.

To embed this into GitHub Markdown, which not only disable JS, but also <style />, <svg /> and anything interactive, I shoved:
- Style inside an HTML page
- Inside a SVG <foreignObject />
- Inside an img link
- Inside GitHub README markdown, which does support img…
For the magical highlighted font, I used CSS @font-face but with the entire woff2 file inlined as base64 data URL, since GitHub markdown blocks those network requests. The extra benefit is that there’s no flash of unloaded font upon page load.
Why bother keeping the code clean if no one will read or modify this nonsense?

I bet they will! I bet you are =P
Is this a joke?

CSS or shaders?
What else can you do with it?

iOS & macOS previews disable JavaScript for security reasons. Fortunately, this doesn’t use JS, so you can sling around HTML shaders and they’ll just drift off in a distributed fashion, forever.

Make your own CSS shader art and spread the joy! Ping me on Twitter; I’d like to see what you’ve made!