• Stars
    star
    121
  • Rank 293,924 (Top 6 %)
  • Language
    HTML
  • Created over 2 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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.

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?

    Quick Look

    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

More Repositories

1

react-motion

A spring that solves your animation problems.
JavaScript
21,680
star
2

react-tween-state

React animation.
JavaScript
1,742
star
3

react-treeview

Easy, light, flexible tree view made with React.
JavaScript
1,086
star
4

react-radio-group

Better radio buttons.
JavaScript
442
star
5

node-huxley

Codeless front-end testing.
JavaScript
365
star
6

react-state-stream

React animation on steroid.
JavaScript
361
star
7

chenglou.github.io

HTML
338
star
8

RCSS

Turn your JavaScript objects into CSS classes.
JavaScript
286
star
9

intro-to-reason-compilation

Ready up!
Shell
269
star
10

react-spinner

Zero configuration loading spinner.
JavaScript
186
star
11

tween-functions

Robert Penner's easing functions, slightly modified
JavaScript
182
star
12

data-structures

Fast, light and hassle-free JavaScript data structures, written in CoffeeScript.
JavaScript
147
star
13

cards

Prototyping the UI of 2030
OCaml
109
star
14

jeason

The crappy js-to-reason converter anyone can contribute to!
OCaml
106
star
15

react-chosen

React wrapper for Chosen jQuery.
HTML
96
star
16

react-dash

React documentation source for [Dash](http://kapeli.com/dash)
JavaScript
90
star
17

require-polyfill

Make `require` work in browsers, at runtime. No code bundling needed!
JavaScript
42
star
18

reason-project-ideas

40
star
19

png-diff

Small PNG diff utility, written in pure JS for Node.
JavaScript
40
star
20

react-lights-out

Simple demo of the React framework's power and flexibility.
JavaScript
27
star
21

upgrade-reason-react

OCaml
27
star
22

png-crop

Small PNG cropping utility, written in pure JS for Node.
JavaScript
23
star
23

grunt-huxley

Grunt task for node-huxley.
JavaScript
21
star
24

jon-blow-video-outlines

Outlines for Jon Blow's YouTube videos on games, programming and more.
20
star
25

multitouch-line-art

JavaScript
17
star
26

code-snippets

Code Snippets, algorithms, etc.
CoffeeScript
13
star
27

flexbox-see

Flexbox visualizer.
JavaScript
10
star
28

react-placeholder-shim

Form placeholder for input and textarea in ie8 and 9.
JavaScript
9
star
29

huxley-example

Demo from node-huxley's README
7
star
30

shaderjoy

TypeScript
6
star
31

phone-parser

Parse the phone input into an output format of your choice. Good for formatting a user input.
JavaScript
6
star
32

flappy-2048-side-by-side

An experiment in time wasting.
CSS
5
star
33

sublime-config

My configurations for Sublime Text.
JavaScript
4
star
34

the-game

yada yada
JavaScript
3
star
35

valid-css-props

Check for the validity of a CSS property name.
JavaScript
3
star
36

flip-it.safariextension

Flipboard Safari extension for adding a stuff on the web to your personal magazine.
CoffeeScript
3
star
37

l-system

Fun experiment in pattern generation, with a visualizer.
JavaScript
3
star
38

ocaml-bench

OCaml
3
star
39

bootstrap-everywhere.safariextension

Safari extension for turning websites more Californian
JavaScript
2
star
40

elastic

Something something OCaml
OCaml
2
star
41

mememe

OCaml
1
star
42

super-spy

JavaScript
1
star
43

reasonable

JavaScript
1
star
44

chalk-time

JavaScript
1
star