chenglou / pure-css-shaders-art

At the intersection of art and bad performance

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 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.

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:

• Book of Shaders
• Shadertoy
• Inigo Quilez' website

Credits

• Thanks to Johnathon Selstad for the SVG idea!

pure-css-shaders-art's Issues

Timer

Wonderful project and now I can delete my WebGL template! However, timer is a missing piece here so I tried to include this:

@property --t {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@keyframes timer {
  from {
    --t: 0;
  }
  to {
    --t: 1;
  }
}
:root {
  animation: timer 10s infinite steps(300);
}

And it worked (--atan-div: calc(var(--v) * var(--t) / (var(--u) + 0.001));)! Should we have it in the predefined CSS? Sadly @property is not yet supported by all modern browsers though :D