
The Simpsons in CSS - CoreSet
https://pattle.github.io/simpsons-in-css/
======
pattle
I was wondering why I suddenly had an influx of Twitter followers this
morning...

Thanks to whoever shared this.

~~~
cmroanirgo
Nicely done. I was following the link to "How I did it" and noticed that I got
SSL cert errors for the site:

[https://www.chrispattle.com/blog/simpsons-in-
css/](https://www.chrispattle.com/blog/simpsons-in-css/)

You're using the cert for octopushr.app... Unfortunately port 80 is also
closed, so even the most recent wayback machine wasn't working. Here's a link
from 2016 which goes into your methods, which honestly, are a bit on the
sparse side (it doesn't detract at all from what you've done):

[https://web.archive.org/web/20160111044359/https://www.chris...](https://web.archive.org/web/20160111044359/https://www.chrispattle.com/blog/simpsons-
in-css/)

~~~
pattle
Thanks for the heads up, I've just removed those links for now. Wasn't
expecting anyone to come across them!

~~~
melicerte
Still, I remain interested to know how you did it :)

~~~
pattle
I just built the characters up using simple shapes that you can draw in CSS
(e.g squares, circles) and layer them on top of each other.

I guess an illustrator would do a similar thing.

------
davnicwil
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'

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.

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.

~~~
tomphoolery
Has anyone done Vaporwave Bart yet? ;)

~~~
rimlicker
His name is Dankmus.

[https://www.youtube.com/channel/UCfITAHFPUbFwCbMYrhMJJCw](https://www.youtube.com/channel/UCfITAHFPUbFwCbMYrhMJJCw)

~~~
artificial
I'm compelled to link the Bed Goes Up song!
[https://www.youtube.com/watch?v=a4HuUmwWesA](https://www.youtube.com/watch?v=a4HuUmwWesA)

------
Nition
I love how even something as silly and unimportant as this has 13 open issue
reports on GitHub.

~~~
avian
If you check the pull requests tab there's also a showcase of why some people
resist putting stuff on GitHub. Most of the pull requests are low-effort
tickets like "update bart.css" with no further explanation and a bunch of
random changes in the diff.

~~~
OJFord
Those almost certainly come from people using GitHub's web editor - the
default commit message is 'Update {filename}'. I despise it, I don't know why
they encourage such useless commit messages, there should be no default
message because there can be no useful default.

------
jtangelder
CSS art always reminds me to the acid tests, back in the old days. We come
from far!
[https://en.wikipedia.org/wiki/Acid2](https://en.wikipedia.org/wiki/Acid2)

~~~
mFixman
Those tests were definitely fun, and gave me lots of "my browser is better
than yours" bragging rights.

I'm surprised that it's the year 2020 and Firefox still doesn't score 100% in
the Acid3 test.

~~~
heydabop
Shit, Firefox Developer 74.0b8 is even failing Acid2 for me

~~~
lutoma
Firefox 73.0.1 on Linux seems to render it fine

~~~
52-6F-62
73.0.1 on mac reporting—it's almost perfect but the eyes are flawed. There's
some ghosting
[https://i.imgur.com/r9kycp8.png](https://i.imgur.com/r9kycp8.png)

------
dusted
Cool pictures! Well done! That's quite a feat indeed!

Not being a fan of CSS, I think this (the CSS source code) shows fairly well
why I'm not a fan of CSS.

Sure, doing things like this is not what CSS is meant for.

CSS is meant for making HTML do things it wasn't meant for.

------
DiabloD3
Some of these do not seem to render correctly on Firefox. Seems to rely on
Chrome-specific behavior.

~~~
JosephRedfern
Same here: [https://i.imgur.com/M07sFus.png](https://i.imgur.com/M07sFus.png).
FF72 (just realised I'm a bit out of date).

~~~
gnulinux
FF73 on OSX, I see the same result as that image.

------
Sharparam
Viewing this page with Dark Reader enabled makes for quite a harrowing
experience...

[https://i.imgur.com/AUTXPfW.png](https://i.imgur.com/AUTXPfW.png)

~~~
jordigh
:-(

Everyone forgets that white is not the default background colour. There is no
default background colour!

~~~
MrManatee
Some forget. This page explicitly sets the background white. If the user runs
a browser extension that overrides this setting, what can the page do?

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

------
rpastuszak
My first reaction when I saw the title was "oh, not this again", but this
looks neat and the CSS source, surprisingly clean!

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.

You might like this one: [https://keithclark.co.uk/labs/css-
fps/desktop/](https://keithclark.co.uk/labs/css-fps/desktop/)

------
anonsivalley652
Animated even and the code looks hand-drawn. I <3 it.

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.

    
    
       rsh blinky
    
       ftp homer

~~~
richthegeek
I work at a place now that uses USS Starship names for projects.

Really brings home the old adage about the hardest parts of computer science
being naming things when the decision comes down to a discussion of the
philosophical implications of a TV episode from 1994.

~~~
Phrenzy
A long time ago I was a sysadmin for a company that gave us a Windows client
desktop, and a desktop running Windows Server. The rule was that you had to
name the server after a brewery. I'm not a beer drinker, so I named mine A&W.
Spelled as "Ayeanddubya." (Aye and dubya) That was fun for a while, people
would call it names like "Abbadabba." I later switched it to Duff.

During that time our manager, who wasn't that bright, rushed over and
exclaimed. "There is a rouge server on the network!"

We did some looking around and discovered that she had seen my coworker's
server, named after Rouge Brewery.

------
runarberg
Previously posted 6 years ago:
[https://news.ycombinator.com/item?id=7937070](https://news.ycombinator.com/item?id=7937070)

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

Krusty looks pretty terrifying though.

~~~
jolmg
Comic book guy, too.

------
MR4D
583 lines of CSS just to create Homer!!

Wow, with this, you don't need a resume, and can probably quote _any_ price
you want.

Very impressive!!

------
leeoniya
these are still no match for [https://github.com/cyanharlow/purecss-
francine](https://github.com/cyanharlow/purecss-francine)

------
ak39
Damn, this is dope! (Learnt that from my sons)

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.

~~~
dusted
Why would you do that when SVG exists? You could hand-write SVG more readable
and taking up less space.

~~~
ak39
No, you're right. I wouldn't choose CSS based "vector" graphics over SVG at
all. But as a playing tool, I would definitely give a CSS based _drawing tool_
a test-drive.

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

~~~
peterkelly
I suspect you may be missing the point of this exercise

~~~
rpastuszak
If everything I did had a practical purpose, I'd die from boredom without
learning anything beforehand. Kudos to the poster for sharing this.

Also, if I was hiring a developer with decent CSS knowledge, and found this
attached to their CV, it'll help me skip a ton of questions (and I'll be less
bored during the interview).

Next step: ensure that the related Simpons characters' images are build using
CSS cascade:)

Sidenote: I think we should put more energy in replying to the OP, rather than
feeding trolls (I'm up for constructive criticism, but genuinely think that
the parent comment doesn't add anything to the discussion).

~~~
imtringued
>but genuinely think that the parent comment doesn't add anything to the
discussion

I am so tired of having to use flawed tools to achieve a certain goal. Why
can't there be a non flawed tool? Often it doesn't exist and then people start
cursing. This HN submission is not like that. Proper tools like SVG exist and
they make this work like this painless. This is an example of someone going
out of his way to feel pain. I don't like pain and I don't want to encourage
others to inflict "self harm" upon themselves just because it's cool.

~~~
rpastuszak
Better tools exist. Someone was just trying to have fun, ffs.

Your approach to work/learning might not necessarily reflect the others'.

Picking a technical detail (bear in mind, almost everyone here knows about
SVG, WebGL etc...) seems a bit ironic to me, as you mention "pain" and "self
harm", whereas the reply by itself seems to lack empathy. Or, an understanding
of context.

------
jiofih
Needs (2015) tag.

------
it
Nice work! Can you describe the process?

------
A4ET8a8uTh0
That is neat. It only goes to show that it is often not just about tools, but
about the artist behind them.

------
chrisweekly
Mods: consider adding (2014) to title?

------
rambojazz
Seriously, how are these things made? Is there a GIF2CSS converter or anything
like that?

~~~
Cub3
When I was a mid level front ender I would manually craft a lot of these for
fun, really helps improve your css knowledge

------
AdmiralAsshat
Spot-on! They even do the creepy blinking animation like the Simpsons arcade
game!

------
jonluca
This is really cool. Everyone looks a bit... wispy? though

------
cryptozeus
This is crazy good, didn’t know css has come this far.

~~~
jiofih
This page is over five years old.

------
mwexler
Love the blinking!

------
calcar
digging a cave with a spoon. if hand-made, hat off to patience

------
dillonmckay
No date in title?

This is a classic.

------
ww520
Very nicely done!

------
vivanchuk
That's crazy!

------
sleepychu
If you like css art... [https://a.singlediv.com](https://a.singlediv.com)

~~~
anonsivalley652
Holy mackerel's ghost.

That's mighty _damn_ impressive.

More skills I will never have, like penmanship and singing. Give me about a
week, and I'll have a red square and a blue circle aligned.

------
brainscdf
Fun question: Is CSS Turing complete yet?

