Painting made out of CSS rules(diana-adrianne.com)
diana-adrianne.com
Painting made out of CSS rules
http://diana-adrianne.com/purecss-francine/
24 comments
The way it breaks in older browsers is incredible, and far more diverse and interesting than I would have ever imagined.
Chrome 17, Firefox 3.6, Chrome 9, IE 5.1.7 Mac:
https://twitter.com/waxpancake/status/991412919656005632
Opera Mobile:
https://twitter.com/coreh/status/991395667720507393/photo/1
Opera (unspecified older version):
https://twitter.com/dz/status/991365966553591808/photo/1
IE 9 (my personal favorite):
https://twitter.com/jamieparkinson/status/991329118267609088
Chrome 17, Firefox 3.6, Chrome 9, IE 5.1.7 Mac:
https://twitter.com/waxpancake/status/991412919656005632
Opera Mobile:
https://twitter.com/coreh/status/991395667720507393/photo/1
Opera (unspecified older version):
https://twitter.com/dz/status/991365966553591808/photo/1
IE 9 (my personal favorite):
https://twitter.com/jamieparkinson/status/991329118267609088
This really drives home for me how powerful the web is in terms of graceful degradation.
I wonder how much time it took to code them.
Judging by her commit history, she started June 24 and the last commit is from two days ago. There are several commits for every month, at varying densities. So, this project has been continuously gestating for about 9 months.
Here's probably most of the interesting raw data, extracted with Mercurial, in case someone else wants to do a visualisation of her workflow.
http://paste.debian.net/1022858/
There's some interesting stuff in the history. For example, at one point, the painting looked quite different.
https://github.com/cyanharlow/purecss-francine/blob/519afdd7...
Here's probably most of the interesting raw data, extracted with Mercurial, in case someone else wants to do a visualisation of her workflow.
http://paste.debian.net/1022858/
There's some interesting stuff in the history. For example, at one point, the painting looked quite different.
https://github.com/cyanharlow/purecss-francine/blob/519afdd7...
The most fun I've ever had in the web inspector https://imgur.com/a/KKj82eZ
From one of the other ones because I was bored https://i.imgur.com/V9porZ6.gifv
It’s funny how the human brain works. I was prepared to be amazed yet the very first thoughts through my mind was literally: “her eyes look wonky, her left eye is bleeding, her ears are really odd”. Only then did I even notice the rest of the picture and think “This is actually really impressive for pure css”.
This is purely awesome: https://imgur.com/a/fiK8B1f
Wow! It'd be hilariously impressive if someone wrote something like an image tracer [0] that outputted CSS. Not useful at all (AFAICT) but would be a cool project.
[0]: https://en.wikipedia.org/wiki/Image_tracing
[0]: https://en.wikipedia.org/wiki/Image_tracing
Doesn't look like anything to me ...
Seriously - in latest Vivaldi it's so large that even zooming out the furthest (20%) I can't make out anything. The static images from the glitched browsers in the comments above are great though.
Seriously - in latest Vivaldi it's so large that even zooming out the furthest (20%) I can't make out anything. The static images from the glitched browsers in the comments above are great though.
Now I feel stupid for thinking I need a wacom tablet to draw properly
Don't feel that way. She probably has used a wacom tablet or similar. She wasn't born knowing how to do this. She worked hard and probably used tools to help her get to the point where she can make this. Now her effort has paid off and now she can work without those tools.
No master is born being able to work a challenge with self-imposed rules without first working up to that challenge without the restrictions.
No master is born being able to work a challenge with self-imposed rules without first working up to that challenge without the restrictions.
Considering the curious shades and strokes, expression and fashion sculpted meticulously on this awkward medium, the image herself is quite mesmerising.
Clever. But scrolling any of the images gave my old computer fits...
Wow super impressive. I wonder how long it took.
Doesn't loadup in Safari.
I found an easter egg or a WIP! There's an item with `display: none` on it. :]
Not trying to rain on his/her parade, they're definitively cool and well done.
But "CSS only" used to mean super hacky things that CSS wasn't supposed to be able to do but at this point it's basically the same rendering engine under the covers as SVG.
But "CSS only" used to mean super hacky things that CSS wasn't supposed to be able to do but at this point it's basically the same rendering engine under the covers as SVG.
Agree, this is cool trickery but from real world use case, waste of time and effort. I don't see any advantage that pure CSS brings out for such art work. Cool demo nevertheless.
http://diana-adrianne.com/purecss-vignes/
http://diana-adrianne.com/purecss-zigario/
She's avoiding SVG as a self-imposed challenge.
> Rules I have for myself:
> All elements must be typed out by hand
> Only Atom text editor and Chrome Developer Tools allowed.
> SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor.
https://github.com/cyanharlow/purecss-francine
Looks like people on birdsite have already been playing with this and it starts to get funny if you try it on older browsers:
https://glitch.social/@cute_weeds/99955935010341256