CSS Doodles
I keep drawing small pictures using CSS just for fun all the time, arguably this isn't a 'project' but I have built up a good set of these over time that make a fair body of work.
Doodling with CSS I find very fun and frequently pushes me on my knowledge of CSS to achieve complex effects. I also find out about new techniques and research new ways to use styling which I can apply in my day job when styling actual UI.
Disclaimer; If any of these don't look right in your browser of choice, they have not been extensively tested and use a bunch of weird CSS. All standards based, though I'm pushing some values to do effects they weren't meant to. I have checked in a few browsers that all looks well, but I make no promises.
Radio
This is a nice easy one to get the ball rolling. Created with a single html div element and a handful of CSS gradients and box shadows.
I was really pushing with this one to only use a single element and came up with a handful of interesting ways to apply background clipping, several overlaid gradients, and multiple box shadows.
Single element speed round
Following on from that first doodle I did a series of others all using a single element and pushing further into massive amounts of gradients.
Planets
This drawing has a little bit of script needed to kick off the randomization but the actual drawing is fully CSS, and only uses a single html element.
The original implementation of this was done in Nunjucks as I was working on an 11ty project at the time. However I have rewritten it here as a React component for this site, so I can create the variations. Once calculated these random numbers are handed off as a few CSS variables.
I must admit to a minor amount of cheating to get the cloud textures on this. I have a couple of SVG elements that are inlined inside the stylesheet that use a fractal noise as a basis for the texturing. There is still no bitmaps, and it's all in the CSS file, so I count it as a win.
Animated Doodles
The next pair of doodles are playing around with similar ideas of animating CSS shapes in fun ways.
The second effect of the peeling circle is achieved mostly through an optical illusion and moving a set of circles around in sync with each other, as they get occluded.
Candles
This one was actually done as part of my day job and got implemented into a client website. The site in question was an e-commerce shop selling legally distinct wizarding school merchandise.
The fire effect here came out particularly nicely. It is created using a couple of box shadows that move upward, a little wobble on the scale transform, and a nice dose of the blur filter to blend it all together.
Stargate
Pulling this Stargate over from it's original environment proved a little tricky. I wrote this using SCSS when I was learning loops combined with some trigonometry functions, so there was a lot of code I needed to compile out into repetitive selectors with magic numbers. It was also written to be full screen and was making large use of vmin units, which all needed converting out to display here, which I did using a CSS variable as a stand-in for the viewport size.
Then finally there is more cheating. The CSS is not drawing all of the glyphs on the ring, this is a custom font, which is inlined in the CSS to stay within the bounds of the rules… and a small SVG also inlined to get the ripples on the surface going.
TARDIS
So, CSS can do 3D transforms for some neat effects. Here I pushed that to an extreme and started constructing a full model.
I have seen a tool out on the internet which makes this kind of thing easier to do using a UI that can drop in primitives and place them in 3D space to create a model, but it's all generated in JS, where here I coded this out by hand. But that's not a flex, I don't recommend this, don't be like me.
I think I pushed this about as far as I can without tooling or creating a massive headache of a stylesheet. But on the plus side, no cheating in this one, it's all pure CSS.
Honorable mentions
Clouds
This one has almost no CSS in it, it's really just an SVG, but I created it as an infinite background image that could support very large resolution displays without a break or loop point, as it can be set to any width and generates the cloud effect automatically.
Browser abuse
This last one I will link to with a warning; This drawing is very bad for your browser! I have made some attempts to reduce it to be run-able but only made limited gains. So view this live at your own risk.
Here's a static screenshot of it for the those not sporting a gaming PC:
There is a bunch of SVG in this one as well to get the ripples and the fog. But the real trick of this one is the reflection, as the 3D perspective needs to be really paid attention to when creating the reflection as the stacking is all reversed and needs to be positioned bearing in mind how it looks when viewed from below.