Pure CSS Francine(github.com)
github.com
Pure CSS Francine
https://github.com/cyanharlow/purecss-francine
26 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
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/
https://a.singlediv.com/
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...
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.
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
How to make this easy? wz_jsgraphics.js FTW. RIP, WZ.
http://www.walterzorn.de/en/ http://www.bjarne.altervista.org/walterzorn.html
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.
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
[1] http://diana-adrianne.com/purecss-zigario/
edit: updated link
[deleted]
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
Would love to see the process she goes through to create it
Crazy huh? Just her text editor and the web inspector. modern art
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
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.
let's look legacy browser AI art
https://www.browserstack.com/screenshots/58c71d032613ad8536d...
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".
If you allow exporting from a graphics editor, a <table> where each cell is a pixel is "pure HTML".
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
> 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!
I don't even