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.
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.
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”.
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.
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.
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.
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.
Considering the curious shades and strokes, expression and fashion sculpted meticulously on this awkward medium, the image herself is quite mesmerising.
24 comments
[ 15.2 ms ] story [ 56.9 ms ] threadhttp://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
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...
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
So cubism's kinda like a bug ?? :p
No master is born being able to work a challenge with self-imposed rules without first working up to that challenge without the restrictions.
[0]: https://en.wikipedia.org/wiki/Image_tracing
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.
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.