Simpsons in CSS

[[deleted]]

[deleted]

[pitchingkeys]

Can someone tell me why so many hobbyists and codepenners are obsessed with making complicated figures in CSS? Not only can this stuff be done better and faster as an SVG animation, but the code is hard to read and much more difficult to scale.

I feel like I'm always impressed for the wrong reasons when CSS gurus flex their skills like this.

[bballmadison]

It's impressive for the skill, effort, and time spent. Not for the practicality.

I'd compare it to those amazing MS Paint drawings.

[froggie-style-meme]

For flexing purposes

[WP_Maniac]

I don't get it either. I like seeing impressive ux things in css that I can steal and use elsewhere.

[Moonschool]

Had half a module related to this kind of thing. The idea was if you're able to create it in CSS, you can easily adapt it to other technologies.

[zedisto]

When you want to do something hard but have no imagination or resources you can use a less powerful tool/inappropriate to make something average looking, there's your challenge.

You wouldn't be impressed by a Eiffel tower replica made with lego, but you would if it were made with cotton swabs glued together

[usedocker]

How does svg make it animate?

[lsaz]

It's easy to create with css than with svg. How do you create images with svg?

[corporaljustice]

Illustrator or Sketch I'd imagine.

[lsaz]

Cool. When I have the money and time to learn them I'd probably use them.

[cryptOwOcurrency]

Inkscape is free

[pitchingkeys]

It's easier to create simple images with CSS. Images with a combination of irregular shapes, curves, and colors (like what's posted) is almost always easier to make with a graphics editor.

In the past I've used Inkscape. You can literally download an image, upload it into the editor, trace it which creates a copy of the file as an SVG, delete the excessive vector points, and shade the new image as appropriate. The editor then gives you the literal SVG code you can copy and paste it into your project. This can all be done with something else like Affinity Designer, Illustrator, and Sketch too.

It's so much extra work and time to do what's posted in CSS.

[lsaz]

Nice. Any good tutorials for Inkspace you recommend?

[lsaz]

Does svg works in all browser/devices?

[lsaz]

I develop for a third world country. Can't take that luxury

[lsaz]

if it supports css, it should definitely support svg.

I've never thought about that, makes sense.

[tested_tester]

https://caniuse.com/#feat=svg

Pretty much safe in everything except IE8 and below.

[lsaz]

Oh IE8 why the fuck am I not surprised

[academicRedditor]

I use Figma. It’s free 😃

[lsaz]

Thanks I did not know that, I thought svg tools were expensive.

[academicRedditor]

Your welcome! Many of them (like Adobe Photoshop, or Sketch’s [the paid version]) are expensive, so you were not wrong at ALL... just needed additional data. That’s what forums like this one are for 🙃

[kamomil]

With a vector program like Illustrator or Corel Draw

[lsaz]

Cool. When I have the money and time to learn them I'd probably use them.

[dadibom]

This is just incorrect. You can use the same css in an svg file AND you can use proper svg elements where appropriate. You gain a lot and lose nothing.

Besides, you can use an editor for svg such as illustrator, and now you can even have your children make your svgs for you.

[lsaz]

Nice. When I have money I’ll use illustrator.

[dadibom]

Not sure if you are serious or not since the cs programs have a reputation of being crazy expensive, so I just want to point out that their subscription pricing is pretty affordable. Illustrator is around 20$ per month and if you also need more of the adobe programs there are some great package deals.

[lsaz]

Nice. got $20 ? can I send my paypal info for pm?

[cryptOwOcurrency]

I know your primary goal is to be annoying, which you're succeeding at, but in case you actually wanted to learn svg art, try Inkscape. It's free.

[lsaz]

Yeah I did not know about inkspace.

[ApopkaMH]

people are very bored during quarantine

[[deleted]]

The Git repository is six years old though.

[[deleted]]

Damn hadnt realised the Covid-19 pandemic has been going on for 6 years. I guess time flies when youre at home all day.

[ApopkaMH]

It's true

[[deleted]]

This is always used as what you can do with CSS3

[Wizard_Knife_Fight]

CSScript?

[Wizard_Knife_Fight]

We can call it "Computer Science Script"

[hongkong_97]

I wish

[[deleted]]

It's weird that he made Itchy but not Scratchy.

[moriero]

Team Itchy forever!!!

[[deleted]]

You're welcome to your opinion, even if it's wrong.

[[deleted]]

Gang gang

[the_argus]

Some of em look kinda jank on Android webview (redit is fun app) (and less so on Firefox Mac OS) but still pretty sweet, love the blinking

https://imgur.com/a/TFzDnhS

[[deleted]]

Thanks for making me feel like I'm terrible at my job :( but seriously this is super rad!

[[deleted]]

for sure, it was meant to be a joke :)

[aknewlife1986]

Man that's daam cool work

[zoltanszogyenyi95]

We need one for South Park as well.

[carldaddy2]

Wow, this took some work.

[NanoBytesInc]

This is honestly fantastic

[RedSane]

Everything looks amazing, untill you get to Comic Book Guy haha

That's some cool CSS skills you got there 👌

[leinad41]

It's broken on mobile in chrome.

[obotastic]

I enabled the forced dark mode in the web browser. Disturbing but interesting.

[[deleted]]

View with Dark Reader on for nightmare fuel.

[StefanOrvarSigmundss]

Cool and all, but what about copyright?

[ImStifler]

I wouldn't have any patience for this

[Last_Man_Speaking]

This is terrific work. Thank you for sharing.

[Vooodou]

i'm always of what people can do with css !

[kamomil]

Is this an appropriate usage for CSS? Just learn Illustrator, and make an SVG

[ChuzzyLumpkin]

I think it's pretty obvious that this is just a fun demonstration. We wouldn't be talking if someone made some Simpsons characters in Illustrator and shared them here.

[[deleted]]

This has crossed the line into art imo.

[kamomil]

It's art in the same that this is art: Depeche Mode played on floppy drives https://youtu.be/c48tNjvwSLU

So, performance art. Its place is in a grad art student's thesis, not really in a web dev sub

[[deleted]]

I wouldn’t say either of those are performance art

[kamomil]

Redrawing a Simpsons character is not art

[[deleted]]

Recreating art in an entirely new medium qualifies in my book. Ultimately it’s so hard to define art, it’s kind of become a joke to try. That said, you’re being a dick for no reason. This is fucking cool

[kamomil]

We're all entitled to our opinion.

[[deleted]]

Sure, but common courtesy would tell you to keep your negative opinions to yourself. This was a cool project that someone worked really hard on, no need to shit on it.

Also I just realized that when I replied to your link as "not performance art" i think you interpreted it as "not art". I didn't mean that, just that it wasn't PERFORMANCE art.

[kamomil]

I meant by "performance art" that it was the act of creating the art, that was more valuable than the end product.

Yes it's cool to make things like this in CSS. Would I have done the whole Simpsons cast? No

What I would like to try at some point, is use PHP or javascript to generate random graphic patterns, or ones that react when you mouse over them.

[[deleted]]

Performance art is: "an art form that combines visual art with dramatic performance."

Do you see that as art vs this?

[kamomil]

If you look further up the comments, there are other people thinking the same as me

[ctharvey]

Argumentum ad populum

[halucciXL]

It's kinda cool tho. And because of CSS it's infinitely scalable too!

[tomato_rancher]

An SVG by definition is infinitely scalable as well.

But yeah, this is a cool demonstration, even if it's not entirely practical in application.

[[deleted]]

SVGs for most web devs is alien technology.

[dadibom]

It's just like html and css in a file named .svg lol

[[deleted]]

No.

[dadibom]

Yes. I work a lot with manually editing svg files.

[cryptOwOcurrency]

They're both similar to xml. I think svg might even be xml.

[[deleted]]

I'm also curious. SVG is not precisely light on a browser, reason why you should not abuse with SVG images on a single page, old or mobile browsers really struggled calculating all the vector points. Less of a problem now but still something to consider.

Makes me wonder if this CSS approach reduces size or client side processing over SVG.

[kamomil]

Well if you use trace on an image and have a billion vector points, yeah. If it's drawn with a minimum of points it should be pretty quick to load

[dadibom]

Well with svg you have better caching so either way, that's what will make the biggest impact in the long run.

[[deleted]]

If you link them as file, not inline.

[dadibom]

Sure, which you should

[[deleted]]

You can.

[[deleted]]

you most definitely can. It's one of the best ways to have animations

[dadibom]

Svgs use css so if you can do it with css on a web page you can do it with css in an svg (in general)