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