
Painting made out of CSS rules - jordigh
http://diana-adrianne.com/purecss-francine/
======
jordigh
She also made two more:

[http://diana-adrianne.com/purecss-vignes/](http://diana-adrianne.com/purecss-
vignes/)

[http://diana-adrianne.com/purecss-zigario/](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](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](https://glitch.social/@cute_weeds/99955935010341256)

~~~
mortenjorck
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](https://twitter.com/waxpancake/status/991412919656005632)

Opera Mobile:

[https://twitter.com/coreh/status/991395667720507393/photo/1](https://twitter.com/coreh/status/991395667720507393/photo/1)

Opera (unspecified older version):

[https://twitter.com/dz/status/991365966553591808/photo/1](https://twitter.com/dz/status/991365966553591808/photo/1)

IE 9 (my personal favorite):

[https://twitter.com/jamieparkinson/status/991329118267609088](https://twitter.com/jamieparkinson/status/991329118267609088)

~~~
globuous
They really look like Picasso versions, absolutely incredible !!!

So cubism's kinda like a bug ?? :p

~~~
redorb
The new acid test for browser compatibility

------
elliottkember
The most fun I've ever had in the web inspector
[https://imgur.com/a/KKj82eZ](https://imgur.com/a/KKj82eZ)

~~~
chimen
I was expecting something a little more...technical. Awesome! I really laughed
at this.

------
pathartl
From one of the other ones because I was bored
[https://i.imgur.com/V9porZ6.gifv](https://i.imgur.com/V9porZ6.gifv)

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

------
hartator
This is purely awesome:
[https://imgur.com/a/fiK8B1f](https://imgur.com/a/fiK8B1f)

------
tejasmanohar
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](https://en.wikipedia.org/wiki/Image_tracing)

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

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

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

------
strainer
Considering the curious shades and strokes, expression and fashion sculpted
meticulously on this awkward medium, the image herself is quite mesmerising.

------
digi_owl
Clever. But scrolling any of the images gave my old computer fits...

------
rhcom2
Wow super impressive. I wonder how long it took.

------
suyash
Doesn't loadup in Safari.

------
civilian
I found an easter egg or a WIP! There's an item with `display: none` on it. :]

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

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

