Hacker News Reader

Comment by PcChip | Hacker News Reader

Can someone ELI5 what this is and why it’s impressive?

Each drawing is created with CSS and within a single div. This is not a SVG or PNG etc.

Its just pure CSS, even the animations of course.

Basically each graphic is a single `div` element and everything else comes from CSS. Early days of codepen were also used to be filled with these kind of fun little CSS Art.

Do we know if these were all hand-coded?

I gather there's vector drawing tools that can make these kinds of graphics.. But perhaps those tools can't output CSS attached to one div?

I would be surprised if any aren’t hand coded. You have to be extremely economical with shapes with this technique - generally (unless I’m out of date on css art techniques) you have your original element, a before and an after element, and an arbitrary number of box shadows of those elements which you can use to duplicate them in different colours and positions. So you have to pick 3 basic shapes to draw with. In some of these you can see that limited shape palette at play but some of them hide it very well.

Makes sense, so it's an exercise in efficiency and crafty creative use of shapes and keyframing. I wonder if the ability is within reach of AI to achieve a similar arrangement of CSS. It may be too hard due to the trial and error nature of making these. Prompt: "give me CSS for an animated column of rising smoke, 5 second duration, seamless loop."

The fun part about this "exercise" is that the final graphic is usually created just by iterating and eye balling your mistakes. I remember the most I did back then was to create a Snowman and it took me more than 1 hr.

Depends what you mean by hand coded. When the page was made vector graphics tools couldn't just output to CSS. I'm not sure if they can now.

However some of divs were probably made by drawing in a vector tool that could export to text then converted with a script.

Reply on news.ycombinator.com