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.
- Happy Valentines
- One Ring (a bit slow)
- Real Squircle with Anti-Aliasing from iOS since CSS can't do squircles natively
FAQ
-
How does this work?
It's a grid of
<p />
with a single p style forbackground-color
, calculated using CSScalc()
,:hover
, keyframes and custom properties. Just your typical CSS + math.The live editor is a
style
tag withdisplay: block
andcontenteditable="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.
Contribute
Make your own CSS shader art and spread the joy! Ping me on Twitter; I'd like to see what you've made!
Further Reading
Wanna get started on shaders? Try:
Credits
- Thanks to Johnathon Selstad for the SVG idea!