Oh, so they have internet on computers now!

April 30, 2008 12:15 PM

Homer Simpson in CSS"...I stayed with the idea in mind that more complex designs could be made using the Verdana font and absolute positioning in CSS, thus generating vector drawings directly embedded in the code html." [via]
posted by mewithoutyou (52 comments total)

Oh wow . . . he's layering letters and adjusting their color and position to create the image. It's a whole new dimension in ASCII art. I'm floored.
posted by aladfar at 12:18 PM on April 30, 2008

That's completely insane. Does it really actually work in IE? Wow.
posted by blacklite at 12:19 PM on April 30, 2008

¡Ay Caramba!
posted by Guy_Inamonkeysuit at 12:20 PM on April 30, 2008 [1 favorite]

(cheatsheet for this thread)

Milhouse: We gotta spread this stuff around. Let's put it on the Internet!
Bart: No! We have to reach people whose opinions actually matter!
posted by ALongDecember at 12:24 PM on April 30, 2008 [1 favorite]

This guy must have Asperger's Syndrome.
posted by zorro astor at 12:24 PM on April 30, 2008

How many characters did that take?
posted by luriete at 12:24 PM on April 30, 2008

Drag your mouse over it like you're trying to cut and paste. It's really crazy.
posted by zorro astor at 12:25 PM on April 30, 2008 [2 favorites]

What a character (set)!
posted by spiderskull at 12:26 PM on April 30, 2008 [2 favorites]

I didn't quite get it until I copied and pasted everything from the line above the "image" to the line below:

He optado por Homer Simpson dado que es lo suficientemente popular y reconocible:

oooo(OOO\L(OOOOO\L(O||\\||\\\\((8ooo((8oooo))boOoooooo)boOooooooooo///•••••___•••CCO(-

El resultado es cross-browser; está comprobado en los siguientes navegadores bajo Windows:

Homer's in the middle (line breaks removed).
posted by Armitage Shanks at 12:26 PM on April 30, 2008

Totally mad.

Now, someone just needs to write a plugin that'll convert raw bezier vectors into ASCII/CSS "vectors".

How many characters did that take?

Not as many as a traditional grid-style ASCII art piece. Click/drag to select some of the characters.

Though, all the CSS formatting may actually increase the true character count, but as far as displayed/rendered characters, it looks like a total of maybe 50 or 100 individual characters, rather than the thousands required for a "high resolution" ASCII image.
posted by loquacious at 12:27 PM on April 30, 2008

Internet King!
posted by porn in the woods at 12:29 PM on April 30, 2008

86 characters, according to Armitage Shanks' copy-paste. Unless I miscounted.
posted by loquacious at 12:29 PM on April 30, 2008

Who says we need an IMG tag?
posted by terrapin at 12:31 PM on April 30, 2008

We do. Because there's no way Matt is going to let us inject custom CSS into our posts and comments.

Though, that would be awesome. If dangerous.
posted by loquacious at 12:33 PM on April 30, 2008 [1 favorite]

Copy pasting it into Word is fun.
posted by Kattullus at 12:34 PM on April 30, 2008

Wow. Wow. Wow.

Made even cooler by the fact that I didn't know what he'd done and what the big deal was until I came in here and read the comments.
posted by papercake at 12:35 PM on April 30, 2008 [1 favorite]

WHOA. Okay, yeah, I'm impressed. This falls into the category of things that I MIGHT be able to do, but most assuredly would not. If that doesn't fall outside my technical level it definitely surpasses my patience. wow.
posted by Stunt at 12:51 PM on April 30, 2008

¿Quién podría ser más gracioso que Homer Simpson?
posted by Gary at 12:51 PM on April 30, 2008

Ctrl +++ !
posted by steef at 12:55 PM on April 30, 2008

Googles translation of the page kind of spoils it a bit!
posted by TwoWordReview at 12:58 PM on April 30, 2008 [2 favorites]

Somehow, that's the perfect encapsulation of the Presidency of George W. Bush:

oooo`0(\-0`-o··o(00~oooo0000(`(oooooooo-‘-/00oooooo·•O´oo`/·(·´)`\··oo00•``•//----oo0oooooooo----••••oo-•••••••´--((\(
posted by Kattullus at 12:59 PM on April 30, 2008 [2 favorites]

Man, that's great.
posted by cortex at 1:08 PM on April 30, 2008

I have to wonder what people like that did before computers and the web.
posted by tommasz at 1:12 PM on April 30, 2008 [1 favorite]

almost as awesome as DHTML lemmings.
posted by mkb at 1:14 PM on April 30, 2008

Reminds me of CSS based pixel art:

Mario Pipe

Mushroom

There are more detailed examples around the net, but that's the basic idea.
posted by autodidact at 1:16 PM on April 30, 2008

I first thought the quote was supposed to be attributed to Homer Simpson, and thought "Damn, they've really changed that character since the last time I saw The Simpsons."
posted by owtytrof at 1:28 PM on April 30, 2008 [1 favorite]

Mmmmmm, donuts absolute positioning...
posted by ook at 1:35 PM on April 30, 2008 [1 favorite]

Very impressive that the image scales fairly well with the font size.
posted by breaks the guidelines? at 1:38 PM on April 30, 2008

Ho. Lee. Fuck. That's amazing.

Here's my ASCI tinkerbell: *
posted by brundlefly at 2:13 PM on April 30, 2008 [1 favorite]

Did anyone else look at the Source code? (First <>/*<>>>VpK) LRKpMctVRK)WywKbWfP.=LogMTMsocrfMcGMfTQ wgcrffTL )crftfT=xrftfTWP.=)bTtpRrfSMMo:WW>>>VpK) LRKpMctVRK)WywKbW>o-RKLMcLMWMSc)ctWpK) LRKpMctW=) bctWtc pRSVb=ifT>=xMSrf20fTSc=bSMrf20fT wMrf/gtR pfTtMswcrfoKt=M=KL:Tpcw M=Qc;TMKo:T4oG;T) pb=L-wciM:T4oG;TRgptKp:ToK=LMcp;fTKLRw=Rvrftc pRSiKp)Vtgy)=Mu";fTWP.WiKp)P';var b=new Array();b[32]='a';b[60]='G';b[62]='w';b[46]='<>';b[81]='v';b[82]='c';b[83]='h';b[84]=' ';b[85]='R';b[86]='.';b[87]='/';b[88]='K';b[89]='j';b[90]='P';var c='';for (n=0; n*/

posted by CCBC at 2:19 PM on April 30, 2008

Nuts! I thought I had the code doctored so it would show properly. It worked in preview! Anyway, some of the code above is correct but it's missing "Script type" and some other stuff at the beginning.
posted by CCBC at 2:22 PM on April 30, 2008

WIN.
posted by RockCorpse at 2:30 PM on April 30, 2008

If you "Select All", it looks like a Homer X-Ray. (creepy)
posted by jozxyqk at 2:33 PM on April 30, 2008 [1 favorite]

Copy pasting it into Word is fun. --Kattullus

It is fun. For anyone who hasn't tried it yet, it pastes all the characters with their formating, size, and color, but without superimposing them.
posted by Bugg at 2:38 PM on April 30, 2008

CCBC: This is the main chunk of code. It's a decoder for what's in the var a and b. If you run that piece of code locally you get a search box for his site.

var c=''
for (n=0; n < a.length; n++)
   if (b[a.charCodeAt(n)])
      c+=b[a.charCodeAt(n)];
   else
     c+=a.charAt(n);
document.write(c);
posted by Gary at 2:43 PM on April 30, 2008

Though, I should add, is there a good reason for actually encoding stuff like that? (Other than preventing the aliens from reading your thoughts, I mean)
posted by Gary at 2:45 PM on April 30, 2008

Stunt writes "If that doesn't fall outside my technical level it definitely surpasses my patience."

Yeah, I think that's it. It's like creating a mosaic. I think I could probably figure out how to do this with trial and error, but who has that kind of time and the desire to make it happen? Apparently ... Román Cortés. And I'm glad for it.
posted by krinklyfig at 3:52 PM on April 30, 2008

tommasz writes "I have to wonder what people like that did before computers and the web."

Oh ... probably making art cars, ships in bottles, domino toppling ... other impossibly complicated but aesthetically pleasing projects.
posted by krinklyfig at 3:55 PM on April 30, 2008

wow, wow, wow. all i can say is wow.
posted by cell divide at 4:04 PM on April 30, 2008

I don't get to say this much but…truly the best of the web! Nice find!
posted by paddysat at 4:40 PM on April 30, 2008

That's nice. Now animate it. I'm not going to be impressed until I see CSStube.
posted by Fiasco da Gama at 4:45 PM on April 30, 2008

Wow. That's... novel, and horrifying. It pretty much flies in the face of everything CSS was intended for. But then, I suppose that's what makes it awesome. Heh.
posted by verb at 5:07 PM on April 30, 2008

... can't believe no one has said this yet ...

d'oh!

actually what i really want to say is: holy fuck!
posted by jammy at 5:10 PM on April 30, 2008

This must prove some rule of human ingenuity. Pretty amazing.
posted by pombe at 5:22 PM on April 30, 2008

WTF? All I see is a picture of Homer! ; )
posted by ericb at 5:34 PM on April 30, 2008

Oh ... probably making art cars, ships in bottles, domino toppling ... other impossibly complicated but aesthetically pleasing projects.

Building a replica of the Brooklyn Bridge out of toothpicks?
posted by A dead Quaker at 6:53 PM on April 30, 2008

I expected Homer Simpson discussing the virtues of CSS and how, "more complex designs could be made".
posted by geekyguy at 8:10 PM on April 30, 2008 [2 favorites]

Creativity loves constraint!

But what I'd really like to see is this in CSS.
posted by erniepan at 8:56 PM on April 30, 2008 [1 favorite]

now THAT is netart
posted by liza at 9:32 PM on April 30, 2008

It's fun to highlight his face.
posted by Sys Rq at 10:30 AM on May 1, 2008

Someone put together a nice animation of the letters going in one at a time to form Homer. It's a lot easier to see how he created it. If you had the right tools it might not require limitless patience to make one of these.
posted by Gary at 1:20 PM on May 1, 2008 [3 favorites]

CSS 2.d'oh!
posted by kirkaracha at 3:50 PM on May 7, 2008