Pure CSS Shaders Art

Shaders art made with pure CSS, with an editable code area also made in CSS.

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

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

FAQ

How does this work?

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

The live editor is a style tag with display: block and contenteditable="true" 😝

GitHub Markdown disables JS, <style />, <svg /> and anything interactive. So I put:
- Style inside an HTML page
- Inside a SVG <foreignObject />
- Inside an img link
- Inside GitHub README markdown which does support img
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!