
Pure CSS – Lace - robin_reala
https://diana-adrianne.com/purecss-lace/
======
thunderbong
There are more at the website. All very impressive!

[https://diana-adrianne.com/](https://diana-adrianne.com/)

[https://cyanharlow.github.io/purecss-
zigario/](https://cyanharlow.github.io/purecss-zigario/)

[https://cyanharlow.github.io/purecss-
vignes/](https://cyanharlow.github.io/purecss-vignes/)

[https://cyanharlow.github.io/purecss-
francine/](https://cyanharlow.github.io/purecss-francine/)

Previous discussions [https://news.ycombinator.com/from?site=diana-
adrianne.com](https://news.ycombinator.com/from?site=diana-adrianne.com)

~~~
acqq
And the interview:

[https://video.vice.com/en_ca/video/this-painting-is-made-
of-...](https://video.vice.com/en_ca/video/this-painting-is-made-of-pure-web-
code/5b9ad409be40775f7049ff9f)

And how she actually produces this:

[https://github.com/cyanharlow/purecss-
francine/issues/28](https://github.com/cyanharlow/purecss-francine/issues/28)

------
danso
Having been inured to loading 100KB-200KB of boilerplate CSS for a web
project, I'm just amazed that the raw CSS for this is 43KB, un-minified:

[https://github.com/cyanharlow/purecss-
lace/blob/master/style...](https://github.com/cyanharlow/purecss-
lace/blob/master/style.css)

~~~
robin_reala
Developers don’t care about performance, and haven’t for multiple years now.
Multi-megabyte JS packages for normal websites are visible across most of the
web, and no-one tests on the actual problem devices which are low- to mid-
range android phones on slow connections.

~~~
z3t4
Its the buisness side that doesnt care. For my personal buisness i make sure
everythig is fast, lightweight, and accessible, works on browsers that has
below 0.1% usage, do not track users, nor store personal info. But I do not
make any extra money doing it.

~~~
lucasmullens
I think you'd be surprised how much speed matters. Google factors in page load
time for SEO, and there's quite a few examples of companies seeing page speed
directly relate to sales:

[https://developers.google.com/web/fundamentals/performance/w...](https://developers.google.com/web/fundamentals/performance/why-
performance-matters)

------
haydenkshaw
The author's absolutely earnt the right to call themselves a CSS expert on
their personal site, I had no idea CSS could do something like this!

------
_hardwaregeek
There's something oddly lovely about making art with such strict constraints.
I've started making fun little pieces of my own with React and CSS. It's a
great way to harness creativity through restrictions. Also requires some fun
math on occasion. A good exercise is to make a Bauhaus or Swiss style poster,
then animate it.

------
Semaphor
For those who want some background, the github repo [0] has more info.

Money quote: "All elements must be typed out by hand"

[0]: [https://github.com/cyanharlow/purecss-
lace](https://github.com/cyanharlow/purecss-lace)

------
Narushia

      .iris {
          display: none;
      }
    

:)

~~~
restlessmedia
Even make her perform a very awkward wink.

setInterval(() => {var style =
document.getElementsByClassName("iris")[0].style; style.display =
style.display != 'none' ? 'none':'block'}, 2000)

~~~
justusthane
Better wink:

setInterval(() => {var style =
document.getElementsByClassName("eye")[0].style; style.display = style.display
!= 'none' ? 'none':'block'}, 2000)

~~~
frebord
This is just awesome, lmao!

------
hcarvalhoalves
Beautiful abuse of CSS. That fine line between mastery and subversion.

~~~
lioeters
..also between genius and madness. It's brilliant and deserves a place in art
history.

------
arondeparon
Wow, this is amazing.

I would love to watch something like this being live-coded. Heck, I assume
people would probably even pay for watching it.

~~~
jgsimmerman
Yeah, I would definitely spend money on a book or video series that goes
through this process.

The authors How page is interested but it leaves me with a bit of a "Draw the
rest of the fucking owl" feeling.

------
newsbinator
Not a dig, just found it interesting how this looks in Safari:

[https://i.imgur.com/z2vHvND.png](https://i.imgur.com/z2vHvND.png)

~~~
blowski
She mentions on the GitHub repo that she only coded for Chrome.

> Because of the artistic nature of this project I have not concerned myself
> with cross-browser-compatibility, so the live preview will most likely look
> laughable in anything other than chrome.

~~~
dmix
Works fine in Firefox except for the really nice brown iris design. I'm
curious why that one part doesn't load (not _that_ curious I would find out
myself though :P).

~~~
lol768
For the curious: the artist used "repeating-conic-gradient()" which (along
with conic-gradient) only works in Webkit browsers:
[https://developer.mozilla.org/en-
US/docs/Web/CSS/repeating-c...](https://developer.mozilla.org/en-
US/docs/Web/CSS/repeating-conic-gradient)

------
ramigb
Is there any video where the artist talks about the process? I'm really
interested in understanding how the artist approached this. Anyways, beautiful
work.

~~~
pfdzm
Not exactly what you are asking for, but she does provide more information on
the 5 key properties: [https://diana-adrianne.com/how/](https://diana-
adrianne.com/how/)

~~~
notahacker
Each of the images without one of the key properties is oddly satisfying in a
semi-abstract kind of way

------
Pigo
The eyes are extremely impressive. Playing with the properties it makes sense
how she did it, but I can't imagine how long I'd have to play with transforms
and gradients to recreate that from scratch.

------
pcj-github
Knowing my own frustrations with CSS, I cannot imagine any project more
maddening than this.

------
leadingthenet
Doesn't seem to render correctly on Safari.

~~~
Semaphor
> Because of the artistic nature of this project I have not concerned myself
> with cross-browser-compatibility, so the live preview will most likely look
> laughable in anything other than chrome.

But it works without a problem in FF

~~~
ekianjo
Did you compare it with the rendering on Chrome? Colors are quite different.

~~~
Semaphor
Good point. The eyes are wrong in FF, everything else looks almost the same
though :)

------
aurbano
Amazing! Now I really wanna code something up that will generate this, it
seems like it would be a super fun weekend project :)

~~~
Brajeshwar
I think this was on HackerNews before

[https://javier.xyz/img2css/](https://javier.xyz/img2css/)

Code:
[https://github.com/javierbyte/img2css/](https://github.com/javierbyte/img2css/)

------
Touche
This is great! On my tablet the perf isn't great though (no fault to the
author). I'm wondering what CSS properties cause perf to degrade on a use like
this? Looking at the CSS myself I'm guessing it's the box-shadow usage. But I
could be wrong. Any chance some of this could be put on the GPU?

------
bilekas
I had the Dark Reader chrome extension on and it looked awful, then realised..
This is crazy impressive.

------
nathell
It's very worthwhile to check out her other pure HTML+CSS artwork.

[https://diana-adrianne.com/#portfolio](https://diana-adrianne.com/#portfolio)

------
ekianjo
> I have not concerned myself with cross-browser-compatibility, so the live
> preview will most likely look laughable in anything other than chrome.

Indeed it looks much worse on Firefox than on Chrome.

~~~
welly
In Chrome 78.0.3904.70

[https://i.imgur.com/n0MoNfY.png](https://i.imgur.com/n0MoNfY.png)

In Firefox 69.0.2

[https://i.imgur.com/UKw3SGf.png](https://i.imgur.com/UKw3SGf.png)

Much worse? She just looks a bit more sleepy!

~~~
ekianjo
I think you inverted the pictures. The first one is what i get in Firefox, not
Chrome.

~~~
welly
You're quite right! Just looked again in Firefox.

------
apexkid
It will be great to read a blog or tutorial on how you made this.

------
ruffrey
To get a sense for how this is done, one can use the Inspect Element tool in
the browser, Pick an Element from the page, and either highlight it or delete.

------
alexwolfe
One of the most amazing things I have seen in a long time. The patience alone
(not to mention the insane skill level) is off the charts.

------
mftrhu
I clicked on that link expecting just another CSS framework, but this is
ridiculously impressive. Hats off to the author.

------
ideepakmathur
This is an advance version of CSS. I would like to know you did it.

~~~
majewsky
[https://diana-adrianne.com/how/](https://diana-adrianne.com/how/)

------
elwell
What are the stab and spurt animations for?

~~~
cyanharlow
Lol oh shit I forgot id originally been using this file to demo some shit to
my team. I was demoing how to do an animated angry stabby emoji. Good catch. I
hope I have that original version saved, gonna check

------
rebolek
Image without JS? Oh the blasphemy! /s

------
dylan604
Does this qualify as a new ACID test?

~~~
X6S1x6Okd1st
Is it designed for chrome, not to conform to standards.

------
houssem_fat
Wow, amazing work !!

------
casedup
Wow impressive

------
ape4
Doesn't scale when the browser window is resized.

------
SomethingNew71
Not responsive. Unusable. /s

------
tannhaeuser
I know, i know, it's awesome. But, unless it's specifically to make a point
regarding the absurdity of today's web (such as eg demonstrating CSS Turing
completeness), I can't help finding such hacks sad, because it just blends in
to demonstrate how far we've striven from what once was a vision for a
rational media architecture with a dedicated vector graphic format.

~~~
toddmorey
I don’t think that’s fair, exactly. The point of this exercise is to show
artistic expression by pushing a medium outside of its intended use. There’s
also an artist that paints in MS Excel, for example.

SVG is an incredible and underrated format. You can create illustrations in
svg with modern graphics tools, yet still hack and animate them with css and
js. And CSS Houdini is a really exciting development, too.

Some things about the web platform are frustrating for sure, but this sort of
project isn’t any kind of statement on the effort required to build modern web
graphics and illustrations because you’d never approach it this way. It’s just
a fun puzzle for the artist, and every tech and medium has examples of this
sort of thing.

~~~
SanchoPanda
The amazing MS Excel artist mentioned can be found here:

[https://pasokonga.com/](https://pasokonga.com/)

