Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Pure CSS Francine (github.com/cyanharlow)
239 points by shdon on May 14, 2018 | hide | past | favorite | 52 comments


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


I didn't want to sleep anyway.


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


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


Looks great in IE7!

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

:D


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


Proof that "graceful" degradation is a lie.


That my friends, is how you get modern art


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


Firefox for Android too!


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)


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/


More:

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

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


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


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


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.


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


Works for me, has some imperfections though


>Firefox seem render[s] it flawlessly

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


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.


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


On mobile safari it crashes the tab for me haha


And the droopy eyes?


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


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

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


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.


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.


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


Her other work[1] is also pretty fascinating

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

edit: updated link


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


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


I asked her....

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


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


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


If only youtube makeup tutorials were so easy...


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


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


You can do some hilarious things via the inspector too

https://imgur.com/a/CaVlxWN


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.


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


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


let's look legacy browser AI art

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


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


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


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


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


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


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


amazing!


literally why?


art


I don't even




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: