I think a hidden gem here is at the end, when it says 'what's cool is, I can now do stuff like.. green Bart, colorless Bart'<p>That's something I've often thought is a real ace in the sleeve of CSS and also SVG, that ability to basically have artistic parameters as code and change them, animate them, etc.<p>Obviously you can do that offline so to speak in image applications, but the iteration time is hugely longer, stuff like caching becomes a problem, and you definitely can't automate it based on runtime inputs etc. It's almost like having that image application running in the browser, rendering whatever changes you need in real time.
CSS art always reminds me to the acid tests, back in the old days.
We come from far! <a href="https://en.wikipedia.org/wiki/Acid2" rel="nofollow">https://en.wikipedia.org/wiki/Acid2</a>
Cool pictures! Well done! That's quite a feat indeed!<p>Not being a fan of CSS, I think this (the CSS source code) shows fairly well why I'm not a fan of CSS.<p>Sure, doing things like this is not what CSS is meant for.<p>CSS is meant for making HTML do things it wasn't meant for.
Viewing this page with Dark Reader enabled makes for quite a harrowing experience...<p><a href="https://i.imgur.com/AUTXPfW.png" rel="nofollow">https://i.imgur.com/AUTXPfW.png</a>
Very cool but can you fill in the eye whites instead of leaving them as background color? The characters looked really odd with a dark mode extension enabled so all the eyes were completely black :D
My first reaction when I saw the title was "oh, not this again", but this looks neat and the CSS source, surprisingly clean!<p>I really enjoyed the first attempts at 3d in CSS (in pre-canvas, WebGL times). Can't find the right example, but in a nutshell, the approach involved using border-width to create triangles, and thus triangle meshes.<p>You might like this one: <a href="https://keithclark.co.uk/labs/css-fps/desktop/" rel="nofollow">https://keithclark.co.uk/labs/css-fps/desktop/</a>
Animated even and the code looks hand-drawn. I <3 it.<p>Fun fact: I worked at a nuclear engineering consultancy in the 90's. That's the not the fun fact. The hostnames of the computers were all Simpsons' character names.<p><pre><code> rsh blinky
ftp homer</code></pre>
This is cool - CSS art is one of the first things I tried when learning to program. I wonder if we will ever see a CSS art exhibition at a gallery or something.<p>Krusty looks pretty terrifying though.
583 lines of CSS just to create Homer!!<p>Wow, with this, you don't need a resume, and can probably quote <i>any</i> price you want.<p>Very impressive!!
these are still no match for <a href="https://github.com/cyanharlow/purecss-francine" rel="nofollow">https://github.com/cyanharlow/purecss-francine</a>
Damn, this is dope! (Learnt that from my sons)<p>Now just give me a design surface tool that takes my raster drawn images and converts it to these CSS and I will be on it like a rash.
SVG would be a better fit. Hand written SVG is underrated. But maybe it would not be difficult enough to make them in SVG. Whenever you feel the CSS get a bit hacky, like backgrounds with round shapes, it can usually be solved in a few lines of SVG.
SVG also has classes and CSS, yes you can have CSS in SVG for style reusability and abstraction. You can also create SVG on the fly using JavaScript.