10 ms·
Pure CSS – Lace
- ramigb 7y agoIs there any video where the artist talks about the process? I'm really interested in understanding how the artist approached this. Anyways, beautiful work.
- necovek 7y agoWhile there is some commit history, it's definitely not low level enough to understand the process fully. But I am imagining, from a quick "inspect element" looking at a few of the elements, that it is inspired by "brush movements": basically, you do a single brush movement with a single styled/transformed element (probably even more granular since a brush would give you trail-lines by default).
- pfdzm 7y agoNot 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 7y agoEach of the images without one of the key properties is oddly satisfying in a semi-abstract kind of way
- mftrhu 7y agoI clicked on that link expecting just another CSS framework, but this is ridiculously impressive. Hats off to the author.
- leadingthenet 7y agoDoesn't seem to render correctly on Safari.
- Semaphor 7y ago> 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
- saagarjha 7y agoAn unfortunate side effect of abusing CSS to the boundaries of what it can do :(
- tonetheman 7y agoSafari is the new IE
- osrec 7y agoYou do not deserve to be downvoted. As a developer, I wholeheartedly agree with you (anyone remember Safari's super buggy indexed DB implementation?!)
- robin_reala 7y agoThe downvotes are happening because this would have been as possible to achieve in Safari as in Chrome had the author chosen to develop purely in that, and Chrome would have been one of the engines that look broken. At this level you’re relying on engine quirks rather than spec compatibility.
- ideepakmathur 7y agoThis is an advance version of CSS. I would like to know you did it.
- majewsky 7y agohttps://diana-adrianne.com/how/ https://diana-adrianne.com/how/
- houssem_fat 7y agoWow, amazing work !!
- Semaphor 7y agoFor 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
- nathell 7y agoIt's very worthwhile to check out her other pure HTML+CSS artwork. https://diana-adrianne.com/#portfolio https://diana-adrianne.com/#portfolio
- newsbinator 7y agoNot a dig, just found it interesting how this looks in Safari: https://i.imgur.com/z2vHvND.png https://i.imgur.com/z2vHvND.png
- blowski 7y agoShe 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 7y agoWorks 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 7y agoFor 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-conic-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-c...
- oneeyedpigeon 7y agoIt looks better but still not quite right in safari on iPad. Is there a reference image somewhere?
- jacquesl 7y agoIt looks normal on mobile safari.
- aurbano 7y agoAmazing! Now I really wanna code something up that will generate this, it seems like it would be a super fun weekend project :)
- ratsimihah 7y agoAs in applying GAN on this? Could be interesting
- lioeters 7y agoYes! Please create a higher-level abstraction so we can all be CSS painters in the Old Masters' style.
- Brajeshwar 7y agoI 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/
- Narushia 7y ago.iris { display: none; } :)
- ratsimihah 7y agoYou hacker!
- parkersweb 7y ago.iris { background-color: red !important; }
- gamman 7y agoIf you do the same with `.eye`, instead of empty eye holes you see closed eyelids. So apparently there's even more work than initially meets the eye.
- scrozier 7y agoNo pun intended?
- restlessmedia 7y agoEven make her perform a very awkward wink. setInterval(() => {var style = document.getElementsByClassName("iris")[0].style; style.display = style.display != 'none' ? 'none':'block'}, 2000)
- justusthane 7y agoBetter wink: setInterval(() => {var style = document.getElementsByClassName("eye")[0].style; style.display = style.display != 'none' ? 'none':'block'}, 2000)
- frebord 7y agoThis is just awesome, lmao!
- deleted 7y ago[deleted]
- hcarvalhoalves 7y agoBeautiful abuse of CSS. That fine line between mastery and subversion.
- lioeters 7y ago..also between genius and madness. It's brilliant and deserves a place in art history.
- thunderbong 7y agoThere 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
- mkl 7y agoAnother previous discussion: https://news.ycombinator.com/item?id=17058508 https://news.ycombinator.com/item?id=17058508
- acqq 7y agoAnd the interview: https://video.vice.com/en_ca/video/this-painting-is-made-of-pure-web-code/5b9ad409be40775f7049ff9f https://video.vice.com/en_ca/video/this-painting-is-made-of-... And how she actually produces this: https://github.com/cyanharlow/purecss-francine/issues/28 https://github.com/cyanharlow/purecss-francine/issues/28
- apexkid 7y agoIt will be great to read a blog or tutorial on how you made this.
- arondeparon 7y agoWow, 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.
- 0wins 7y agoThese two channels don't do nearly the quality that the original post has, but these two old youtube channels have CSS drawings and are pretty fun to watch Sasha Tran https://www.youtube.com/watch?v=wPJrnED45RM&list=PLTHpnjV0t8PrnbhEgQhPjGYmV84ChmvUD https://www.youtube.com/watch?v=wPJrnED45RM&list=PLTHpnjV0t8... Jeffrey Taylor https://www.youtube.com/watch?v=kSBT669yLyU&list=PLaGfdei15ACdrb62YehNJ_NxouEpU4h3f&index=5&t=6s https://www.youtube.com/watch?v=kSBT669yLyU&list=PLaGfdei15A...
- jgsimmerman 7y agoYeah, 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.
- hanniabu 7y agoSeems like some good twitch opportunity
- bilekas 7y agoI had the Dark Reader chrome extension on and it looked awful, then realised.. This is crazy impressive.
- danso 7y agoHaving 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.css https://github.com/cyanharlow/purecss-lace/blob/master/style...
- robin_reala 7y agoDevelopers 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.
- reaperducer 7y agono-one tests on the actual problem devices which are low- to mid-range android phones on slow connections. I do. But I work in healthcare for the rural and poor. Some of my target devices the kind of craptastic phones people on HN would buy as a joke burner, but for millions of people is their entire family's only connection to the internet.
- microcolonel 7y agoAt the other end of the spectrum, I've worked on an ecommerce site where I was instructed to ignore that our JS payload was taking more than six seconds to parse on flagship phones (setting aside the network entirely). Worse still, after loading that code up, only then would it request the manifest that described 90% of the above-the-fold content. The decadence of web development today, particularly with agencies and large corporate customers, is truly boundless.
- nkrisc 7y agoFascinatingly, at a previous ecommerce gig, we had a similar issue. On of the developers ran a test where on one of our main pages, he added performance improvements to get the fastest speed to a reasonable place, and then segmented traffic into buckets that deliberately slowed the server response by various, increasing amounts of time. And wouldn't you know, it made almost no difference on our primary conversion metrics. As far as we could tell his methodology was sound, but unfortunately it got buried when it was discovered the findings could be abused to show that performance doesn't matter.
- haydenkshaw 7y agoThe 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!
- rebolek 7y agoImage without JS? Oh the blasphemy! /s
- Touche 7y agoThis 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?
- ekianjo 7y ago> 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.
- Pigo 7y agoThe 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.
- SomethingNew71 7y agoNot responsive. Unusable. /s
- tannhaeuser 7y agoI 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 7y agoI 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 7y agoThe amazing MS Excel artist mentioned can be found here: https://pasokonga.com/ https://pasokonga.com/
- tiborsaas 7y agoYou are making a claim based on what's being an extreme application of a technology. We can push any technology to its limits but that doesn't mean that average usage should suffer from the edge case problems. We still have a rational media architecture with vector graphics support.
- tannhaeuser 7y agoYeah I was hesitant to post because of the negative vibe to it, but still, if all we've achieved in the last decade or so is a replacement syntax for what was already possible 20 years ago on the web (Adobe SVG plugin) and with today's browser out of the box, we ought to search our soul what our goals are with the web platform. Because absurd CSS complexity with some 20 different layout models (or any bikeshedding on syntactial issues really) just serves to dilute any future effort for implementing parts of the web stack for no good reason other than browser lock-in.
- elwell 7y agoWhat are the stab and spurt animations for?
- cyanharlow 7y agoLol 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
- stewartjarod 7y agowow! This is so impressive
- _hardwaregeek 7y agoThere'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.
- ape4 7y agoDoesn't scale when the browser window is resized.
- pcj-github 7y agoKnowing my own frustrations with CSS, I cannot imagine any project more maddening than this.
- dylan604 7y agoDoes this qualify as a new ACID test?
- X6S1x6Okd1st 7y agoIs it designed for chrome, not to conform to standards.
- alexwolfe 7y agoOne 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.
- ruffrey 7y agoTo 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.
- casedup 7y agoWow impressive