Painting made out of CSS rules

She also made two more:

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

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

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.

Now I feel stupid for thinking I need a wacom tablet to draw properly

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.