The Simpsons in CSS(pattle.github.io)
pattle.github.io
The Simpsons in CSS
https://pattle.github.io/simpsons-in-css/
104 comments
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...
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!
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.
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
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.
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.
- 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.
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.
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.
I'm surprised that it's the year 2020 and Firefox still doesn't score 100% in the Acid3 test.
It's 2020, and Chrome doesn't score 100% on Acid3. It's unlikely that any browser will, since the standards have changed.
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
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
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.
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.
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 :)
Good work though :)
I get this on Chrome/Mac so maybe it's an OSX thing.
Nope. It looks a lot like what I get on Firefox/Windows.
Same on iOS
Same here: https://i.imgur.com/M07sFus.png. FF72 (just realised I'm a bit out of date).
FF73 on OSX, I see the same result as that image.
(this was FF72 on 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/
Same type of scary ovals.
Still a fantastic job!
Reminds me of another exercise in CSS: https://diana-adrianne.com/purecss-francine/
Same for Vivaldi, which is Chromium-based...
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.
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
:-(
Everyone forgets that white is not the default background colour. There is no default background colour!
Everyone forgets that white is not the default background colour. There is no default background colour!
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?
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.
Krusty looks about right.
The Simpsons meets Coraline!
In a classic case of "Simpsons did it"...
https://en.wikipedia.org/wiki/Treehouse_of_Horror_XXVIII#Cor...
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.
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.
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/
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.
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 homerI 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
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).
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).
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.
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.
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.
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 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'."
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.
I used Animaniacs characters at one job. That worked really well until I used Dot.
Previously posted 6 years ago: https://news.ycombinator.com/item?id=7937070
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!!
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.
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.
"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?"
― Theodore Roosevelt
Would it be too inconvenient to first appreciate the art before barfing all over someone else's "birthday cake?"
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.
Barely related... My favorite bathroom sign says "we don't swim in your toilet, don't pee in our pool".
I suspect you may be missing the point of this exercise
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).
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.
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.
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.
I suspect the exercise may be missing the point (there is none). Parent is right.
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?
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.
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.
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.
[deleted]
Fun question: Is CSS Turing complete yet?
Thanks to whoever shared this.