
Pure CSS Francine - shdon
https://github.com/cyanharlow/purecss-francine
======
elliottkember
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](https://imgur.com/a/KKj82eZ)

~~~
diiiimaaaa
I didn't want to sleep anyway.

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

------
sexy_seedbox
Looks great in IE7!

[https://github.com/cyanharlow/purecss-
francine/issues/3](https://github.com/cyanharlow/purecss-francine/issues/3)

:D

~~~
acjohnson55
Firefox for Android too!

~~~
Aardwolf
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)

------
jypepin
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/](https://a.singlediv.com/)

------
speeq
More:

[https://github.com/cyanharlow/purecss-
zigario](https://github.com/cyanharlow/purecss-zigario)

[https://github.com/cyanharlow/purecss-
vignes](https://github.com/cyanharlow/purecss-vignes)

------
alexanderdmitri
An article about the piece:
[https://motherboard.vice.com/en_us/article/9kgx7p/painting-m...](https://motherboard.vice.com/en_us/article/9kgx7p/painting-
made-with-code-html-pure-css-browser-art-diana-smith)

~~~
maddyboo
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...](https://www.vox.com/2018/5/3/17309078/digital-art-diana-a-smith-
francine-coded-browser-art)

------
shdon
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.

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

~~~
tehwebguy
Works for me, has some imperfections though

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

~~~
X-Istence
And the droopy eyes?

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

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

[http://www.walterzorn.de/en/](http://www.walterzorn.de/en/)
[http://www.bjarne.altervista.org/walterzorn.html](http://www.bjarne.altervista.org/walterzorn.html)

~~~
RandallBrown
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.

------
tokyodude
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
Somebody sometime probably suggested someone should use JS to 'transpile' JS
into HTML. And people listened.

------
anikdas
Her other work[1] is also pretty fascinating

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

edit: updated link

------
keithnz
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
Crazy huh? Just her text editor and the web inspector. modern art

~~~
keithnz
I asked her....

[https://github.com/cyanharlow/purecss-
francine/issues/28](https://github.com/cyanharlow/purecss-francine/issues/28)

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

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

~~~
antoineMoPa
If only youtube makeup tutorials were so easy...

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

------
okket
Previous discussion from 2 weeks ago:
[https://news.ycombinator.com/item?id=16970774](https://news.ycombinator.com/item?id=16970774)

------
ddtaylor
You can do some hilarious things via the inspector too

[https://imgur.com/a/CaVlxWN](https://imgur.com/a/CaVlxWN)

------
z3t4
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.

------
notatoad
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
No, it is the original work. She did the art “in the style of 18th-century oil
paintings.”

------
ebonassi
let's look legacy browser AI art

[https://www.browserstack.com/screenshots/58c71d032613ad8536d...](https://www.browserstack.com/screenshots/58c71d032613ad8536d199c459e533701384c9e0)

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

~~~
rspeer
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".

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

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

~~~
daveFNbuck
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...](https://github.com/cyanharlow/purecss-
francine/graphs/code-frequency)

~~~
nneonneo
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...](https://github.com/cyanharlow/purecss-
francine/issues/13#issuecomment-386201939). 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](https://imgur.com/K2xLX3g)

------
mateusaugusto9
amazing!

------
niceperson
literally why?

~~~
kowdermeister
art

------
brailsafe
I don't even

