Pure CSS Francine

https://github.com/cyanharlow/purecss-francine

by shdon • 8 years ago

239 52 8 years ago

shdon• 8 years ago

Firefox and Chrome seem render it flawlessly and Edge's performance isn't half bad either, but I am honestly surprised at how well it works even in IE11.

mattnewton2• 8 years ago

Looks like Safari is the new ugly stepchild. I’m on mobile Safari and it crashes the tab.

tehwebguy• 8 years ago

Works for me, has some imperfections though

fireattack• 8 years ago

Firefox seem render[s] it flawlessly

It doesn't. Almost all highlights are missing. Compare side by side with Chrome's.

Freak_NL• 8 years ago

I wonder which CSS declarations specifically are Chrome-only. It doesn't look like there's much needed to get it to render nicely in Firefox too.

jazoom• 8 years ago

Holy moly! I wouldn't have thought this was possible if I didn't see the code.

sexy_seedbox• 8 years ago

Looks great in IE7!

https://github.com/cyanharlow/purecss-francine/issues/3

acjohnson55• 8 years ago

Firefox for Android too!

Aardwolf2• 8 years ago

For me it looked fully correct in firefox for android (the actual website, not just the screenshot). It only made the app stop responding to button presses (not the first time it does that, fortunately restarting it fixes it and it can remember all its tabs)

flyGuyOnTheSly• 8 years ago

That's similar to a cubist picasso imho... not bad actually...

reificator• 8 years ago

I typically read the comments first to determine whether or not to read the article. So I saw this version before the normal one...

harrygeez• 8 years ago

That my friends, is how you get modern art

agildehaus• 8 years ago

Proof that "graceful" degradation is a lie.

alexanderdmitri• 8 years ago

An article about the piece: https://motherboard.vice.com/en_us/article/9kgx7p/painting-m...

maddyboo• 8 years ago

Another article [1] about how the piece renders in other old browsers.

I think it's super interesting that even mis-rendered versions have a really cool abstract look to them.

[1] https://www.vox.com/2018/5/3/17309078/digital-art-diana-a-sm...

eridius2• 8 years ago

This renders almost perfectly in Safari 11.1, except for the gradient on the shoulder.

mattnewton2• 8 years ago

On mobile safari it crashes the tab for me haha

X-Istence• 8 years ago

And the droopy eyes?

eridius2• 8 years ago

Oh you're right, I missed that, the corners of the eyes are boxy.

keithnz2• 8 years ago

I went to developer tools in firefox, slowed it down a bit trying to select elements!

Would love to see the process she goes through to create it

mygo• 8 years ago

Crazy huh? Just her text editor and the web inspector. modern art

keithnz2• 8 years ago

I asked her....

https://github.com/cyanharlow/purecss-francine/issues/28

brailsafe• 8 years ago

I don't even

mateusaugusto9• 8 years ago

amazing!

notatoad• 8 years ago

That's really cool, but is there an original work that it's recreating? My Google-ing is only turning up American dad references.

elliotec• 8 years ago

No, it is the original work. She did the art “in the style of 18th-century oil paintings.”

lucisferre• 8 years ago

One day in the far future AIs will marvel at how humans once made these by hand.

anikdas• 8 years ago

Her other work[1] is also pretty fascinating

[1] http://diana-adrianne.com/purecss-zigario/

edit: updated link

ddtaylor• 8 years ago

You can do some hilarious things via the inspector too

https://imgur.com/a/CaVlxWN

speeq• 8 years ago

https://github.com/cyanharlow/purecss-zigario

https://github.com/cyanharlow/purecss-vignes

Exuma• 8 years ago

Can anyone find a comment on how long this took? This is insane to me

daveFNbuck• 8 years ago

The main page shows 246 commits and the code frequency tab under insights shows commits going back to June 2017. https://github.com/cyanharlow/purecss-francine/graphs/code-f...

nneonneo• 8 years ago

She does mention that the first commit was already of a partially finished version:

Sadly the project began on my desktop, so my first git commits were of an already-in-progress drawing.

from https://github.com/cyanharlow/purecss-francine/issues/13#iss.... So, the actual amount of time taken is likely to be much longer.

Also very worth checking out the timelapse gif posted there: https://imgur.com/K2xLX3g

jonstewart• 8 years ago

How to make this easy? wz_jsgraphics.js FTW. RIP, WZ.

http://www.walterzorn.de/en/ http://www.bjarne.altervista.org/walterzorn.html

RandallBrown• 8 years ago

This takes me back to the first internship I ever had. I found this library and used it for displaying graphs in JS more than a decade ago.

I shudder at the code I wrote during that internship.

quickthrower2• 8 years ago

Would it be "pure css" if you did it in SVG and embeded that into the css?

rspeer• 8 years ago

She says on the Francine README that she used to have a few hand-coded SVG shapes, but then realized she could do without them.

If you allow exporting from a graphics editor, a <table> where each cell is a pixel is "pure HTML".

jypepin• 8 years ago

Lynn Fisher has also a great website that inspires me regularly. She draw using css and 1 single div. It's all about linear-gradient background. Very interesting.

https://a.singlediv.com/

tokyodude• 8 years ago

At this point someone should just make an SVG to CSS converter then you could export from Illustrator or whatever to CSS and be done with it. NOTE: not suggesting CSS should be used this way.

rootlocus• 8 years ago

Somebody sometime probably suggested someone should use JS to 'transpile' JS into HTML. And people listened.

elliottkember• 8 years ago

I posted it last time this was on HN, but here's what I managed to achieve in the web inspector: https://imgur.com/a/KKj82eZ

diiiimaaaa• 8 years ago

I didn't want to sleep anyway.

gaunab• 8 years ago

that's fun. https://imgur.com/a/bRhLp1M

ravenstine• 8 years ago

Boy, is that fun to Inspect Element on! :)

Aardwolf2• 8 years ago

Find the elements "eyebrow left" and "eyebrow right" and disable the checkbox of "border-color" of each to get super dark eyebrows!

antoineMoPa• 8 years ago

If only youtube makeup tutorials were so easy...

nmec• 8 years ago

A missed opportunity to use the <head> and <body> elements

okket• 8 years ago

Previous discussion from 2 weeks ago: https://news.ycombinator.com/item?id=16970774

niceperson• 8 years ago

literally why?

kowdermeister• 8 years ago

art

z3t4• 8 years ago

I wonder if it would be harder to make this in .css vs .less. It would be cool to see some hand written SVG as generated SVG is always ugly and bloated.

ebonassi• 8 years ago

let's look legacy browser AI art

https://www.browserstack.com/screenshots/58c71d032613ad8536d...

Pure CSS Francine

Related Stories