The Simpsons in CSS | Hacker News Reader

The Simpsons in CSS

pattle.github.io

554 pointsCoreSet101 comments

I was wondering why I suddenly had an influx of Twitter followers this morning...

Thanks to whoever shared this.

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/

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

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

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

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.

Amazing achievement. How long did it take you to do each?

From memory a couple of hours for each character

And I'm sitting here trying to figure out how to align those god damn boxes...

Looks like someone posted it on Product Hunt for you, too! https://www.producthunt.com/posts/the-simpsons-in-css-2

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.

Has anyone done Vaporwave Bart yet? ;)

Got you fam: https://jsbin.com/rofemujofo

His name is Dankmus.

https://www.youtube.com/channel/UCfITAHFPUbFwCbMYrhMJJCw

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

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

The license one was opened nearly 6 years ago.

It seems reasonable for the author not to put a license on what's clearly someone else's trademarks and copyright.

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.

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.

There are two extremely simple solutions to that:

- Disable issues (pretty sure Github didn't give that option to me alone)

- Write on the readme that you're not working on this and will ignore/close any submitted issues

"Resisting" putting stuff on GitHub is not necessary.

For projects that are "finished" and will not be updated, I think using the archive function could be helpful. Marking a project as archived removes the issues tab among other things and clearly communicates that the owner is not interested in continued development.

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

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.

That is because the acid3 test is broken or expects non standard behavior.

It will never have. And that is also fine.

Acid3 was a great step forward at its time, but it just isn't that useful any more. There are so many more specs that are more important.

More infos here: https://news.ycombinator.com/item?id=15256890

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

Firefox 73.0.1 on Linux seems to render it fine

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

It's 2020, and Chrome doesn't score 100% on Acid3. It's unlikely that any browser will, since the standards have changed.

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.

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

looks ok to me. FF 73

Both FF73 and Chrome, on mac, messes up for me. It's most noticeable on Comic-book-guy but many of the later ones are messed up to various degrees, mainly hair/whiskers, sometimes spurious lines/strokes outside the main image.

Same for Vivaldi, which is Chromium-based...

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

(this was FF72 on Windows)

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

Some of them are slightly problematic on Safari Mac, too https://imgur.com/a/5CCu9K8 shows quite a few spurious ovals showing up.

Good work though :)

I get this on Chrome/Mac so maybe it's an OSX thing.

Same on iOS

Nope. It looks a lot like what I get on Firefox/Windows.

Some of them do not render correctly on Chrome Version 80.0.3987.122 for Win10 either.

Same type of scary ovals.

Still a fantastic job!

Reminds me of another exercise in CSS: https://diana-adrianne.com/purecss-francine/

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

https://i.imgur.com/AUTXPfW.png

The Simpsons meets Coraline!

In a classic case of "Simpsons did it"...

https://en.wikipedia.org/wiki/Treehouse_of_Horror_XXVIII#Cor...

Season 29 ... wow. I loved the show as a kid. I'll occasionally watch one or two every few years. Most of it seems meh when I catch it.

Still this CSS is pretty amazing, with all the neat stuff you can do with it just by changing some CSS or enabling dark mode.

:-(

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

Quora is bad about this. I change my default background to a grey and I always notice it on their site because they have a white central element surrounded by grey.

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?

Krusty looks about right.

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!

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/

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

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.

I worked at a place once where we were told to pick a naming system for the releases. We chose "Genesis" as the first one.

Our boss, whom we didn't know was religious, says, "that's fantastic! Books of the bible, yes?! Next release is 'Exodus'?"

"Er, no it's Start Trek, next release is gonna be called 'Picard'."

My first work encounter with Unix (SunOS, Solaris) had a weather phenomena naming scheme, "lightning", "thunder" and so on, all very exciting. When I and the other new hire called ours "overcast" and "mizzle", the older coders were nonplussed, but couldn't really complain about our sarcasm.

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.

I used Animaniacs characters at one job. That worked really well until I used Dot.

I went to a university where the authentication servers were named after nuclear accidents.

  tokaimura.doc.ic.ac.uk
  chalk-river.doc.ic.ac.uk
  three-mile-island.doc.ic.ac.uk

An older server was sellafield, but it had been decommissioned.

So that's where the Sun 2 box was UUCPing email from. ;) Decomm... that sounds painful.

One of their main products, CORETRAN, was a Monte Carlo reactor simulator written in millions of lines of FORTRAN by nuclear engineers over ~60 years. I helped port to Win32 and sped it up 300% by disabling swap (128 MiB of RAM in 1997 was a lot).

Previously posted 6 years ago: https://news.ycombinator.com/item?id=7937070

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.

Comic book guy, too.

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

these are still no match for https://github.com/cyanharlow/purecss-francine

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.

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

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.

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.

I suspect you may be missing the point of this exercise

I suspect the exercise may be missing the point (there is none). Parent is right.

Demonstrating prowess with CSS is the point, which they have succeeded.

and in general making art on unconventional media is a time honoured endeavour.

The point is that art does not need to “have a point”.

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

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

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.

I like unconventional solutions and hacks as much as the next guy, but a good hack should be better than the conventional solution in at least some way (like simplicity or tweakability). If the hack is worse in every way - the CSS is both longer and harder to write than the equivalent SVG - it's not as interesting to me.

You are also missing the point.

This is not a good hack.

It is art.

"It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat."

― Theodore Roosevelt

Would it be too inconvenient to first appreciate the art before barfing all over someone else's "birthday cake?"

Barely related... My favorite bathroom sign says "we don't swim in your toilet, don't pee in our pool".

Some art you need to know how hard it is to make in order to appreciate it. Next time you are stuck with a CSS problem, you might think that if this guy can paint freaking Simpons in CSS why can't I get this simple curve to look like I want!? Then you solve the problem in SVG instead. And start to appreciate the art even more. You can however cheat in CSS "art" by creating lots of div's with absolute positioning, where a SVG solution would be more elegant.

Needs (2015) tag.

Nice work! Can you describe the process?

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

Mods: consider adding (2014) to title?

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

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

Trial and error with lots of time at hand

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

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

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

This page is over five years old.

Love the blinking!

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

No date in title?

This is a classic.

Very nicely done!

That's crazy!

If you like css art... https://a.singlediv.com

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.

Fun question: Is CSS Turing complete yet?

Reply on news.ycombinator.com