Slashdot Mirror
Homer Simpson Drawn With Web 2.0-Style ASCII Art
boogi78 writes "Remember ASCII art? This is the Web 2.0 CSS version of ASCII art featuring Homer Simpson. Here is a CSS G.W. Bush. There's also an program that automatically converts jpegs into 'CSS images,' but it's a Windows executable. I found no sources for it, but I got it to work with WINE."
Actually, this is a bit different - and much more unique and impressive, IMHO. I can't get to the first link (slashdotted already), but the Bush portrait and this Homer are both made using overlapping bits of various font characters, sized and colored using CSS, to make the curves and lines of the picture.
View source on that Homer "image" to see what I mean - the artist basically used font characters as a palette of vectors, and clipped out just the partial shape of each character that he wanted, using CSS properties.
As a result, instead of bloating to many MB, that Homer picture is only ~16KB. Bush is only ~32KB.
Translating pixels into an HTML table is not that interesting now.. I mean, I was excited when my brother wrote an app to do that about 8 years ago, and I even wrote a little companion app that parsed ANSI escape sequences and turned ANSI art into HTML tables too, but that was back then. :)
This, on the other hand, is really original and unique. I'm pretty impressed by it.
This space intentionally left blank.
It needs Verdana from MS TrueType core fonts, so it doesn't work across multiple platforms. The link is slashdotted anyway. Here's a version that's still available: http://www.romancortes.com/blog/homer-css/
Here's how i see it: http://img225.imageshack.us/img225/9183/homeraz4.png