Mads Stoumann
Posted on July 5, 2023
The other day I received a newsletter from the author Robin Sloan, containing samples of some beautiful old pages from a Japanese fireworks catalog from 1883:
This coincided with Codepen's weekly challenge being "Fireworks" — so I just had to try to re-create these beauties.
This is what I ended up with — my own interpretation of a mix between item № 66 and item № 67:
It involves a lot of small, interesting stuff, that I'd like to share!
Grainy Overlay
To get that rough, grainy look, I added an overlay covering the whole page — it's on ::after on the <body>-tag, and was made using Grainy Gradients Playground.
Small Stars/Explosions
The smaller stars/explosions are using clip-path, made with my own tool, "Polygon to clip-path and SVG" — you can find it on Codepen:
This tool has a lot of sentimental value to me, as the original algorithm was coded by a dear friend of mine, who sadly passed away in 2020.
Large Star/Explosion
The main explosion consists of a grid with all items being placed center, using grid-column: 1/-1 and grid-row: 1/-1. It's the new position: absolute for me, but with added flexibility. Each <b>-sub-node has it's own --deg(degree)-property, a total of 36 with a 10 degree between them.
On top of these, I've placed a mask with a repeating-conic-gradient to "cut out" the inner stacks of <b>s:
--mask: repeating-conic-gradient(
from 45deg at 50% 50%,
var(--red) 0deg 7.5deg,
transparent 7.5deg 10deg);
Google Fonts API
I'm using two fonts, one for the numbers and one for the ampersand. It would be a complete waste of bandwidth to load the entire character-sets, so luckily Google Fonts support specifying only the characters you need, using the text-parameter in the URL:
/* Numero Sign and Numbers */
@import url('fonts.googleapis.com ... &text=№67');
/* Other font, Ampersand */
@import url('fonts.googleapis.com ... &text=%26');
Masks and other stuff
On the black background and on the box with numbers, I use a mask, I found on Open Props.
I'm using
cqi-units (container-queries), so it's fully responsive.I'm using native CSS nesting, so don't preview in Firefox ;-)
You can see the final result here:
Animated version
Posted on July 5, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
