For me, 2022 was a year that cemented my mad love for 3D CSS. I've been at it for almost 3 years, and people have asked me why I do it - as did I. It has zero mercy for the CPU, and as such, limited practical application and commercial appeal.
And yet I can't help myself.
( click the ▶ button in the top left corner to play - and pause with || )
Complex three-dimensional solids fascinate me. I grew up with movies like Tron, played around with 3D Studio as a teen, and even went on to work with CAD software for a living. But it was only recently that I started to really try and understand them. 3D software tends to do all the heavy lifting for you, giving you basic primitives on a silver platter, or at least providing a simple, short procedure to generate them (extrusion, rotation, sketches, surfaces, etc).
Now it's up to me to figure out the formulae and put everything in place - with code.
I would've devoted the entirety of 2022 to the dodecahedron - gladly! But then Firefox finally got support for backdrop-filter - so that sent me on a quest in an entirely new direction. I wanted to combine 3D and blur, in an effort to create a glass-like structure. This proved harder than I thought. For one, the backdrop-filter didn't quite work at first, and when it finally did, it produced weird artifacts and glitches. There's promise there, and I will figure this out - but for the time being I had to make do with something simpler.
It didn't go without a hitch, either. Mix-blend-modes are a marvel, but 3D adds a new dimension of pain to the process. But I got it to work, and I could stare at what it produced endlessly.
But there was no time to waste.
Autumn came and with it the grim specter of Halloween - which sparked the obsessive-compulsive streak in me. See, last year I carved out a 3D pumpkin for a CSS challenge:
So it is only natural - if you're crazy, like me - to continue this secular tradition. And to try to one-up the previous year's entry. It needed to be bigger, better, and faster. With neater geometry and finer detail. Dynamic faux shading and lots and lots of motion. All that took a lot of testing. A lot of trial and error, and many, many failures, time and time again. October came. Halloween drew closer. Midnight struck. The moment came - and went. November flew by. Winter started.
And finally, at the peak of the holiday frenzy, on the eve of Xmas eve...
(you'll want to pause this one before moving on down, spheres are CPU-heavy)
Yes, 2022 was mostly me mucking about. By virtue of doing something else for a living, I was able to be a CSS arteest in my spare time. I just like creating wild, colorful graphics, and overcoming limitations - whether technical (CPUs don't like too many dancing objects, especially when they go into hundreds) or self-imposed (limited color palettes and such).
That said, I do try to do some adulting, too. Practicing designing apps from scratch, and all the dreaded back-end stuff that comes with it (I'm more of a front-end guy, and mostly a dead-end type). Cobbled together a little Gimp plugin in Python, too. But I did not stick with it. Haven't tried Laravel yet, either.
Oh well. Next year. Small steps.
One thing I'd like to pat myself on the back for is overcoming my crippling fear of interacting with tech communities online. Gathered the courage to write some e-mails and reach out to people. And just last week finally started to blog - after some encouragement from one of my contacts. I have tons of useless knowledge that aches to break out of my head and infect new minds.
Top comments (0)