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
Top comments (26)
Beautiful work and fantastic inspiration
Thank you!
Wow! This is AMAZING!
Thank you!
Absolutely beautiful!
Thank you!
cool~ I love this pen
Thanks!
Wow, very cool!
👍🏻
Very nice man. It's already included in my material for study.
Cool, thanks!
Love how whimsical this looks! Definitely a nice nod to the design principles of the past.
Thank you!
Very Cool.
Thank you!
wwow
👍🏻
I thought my CSS skills were solid but holy cow, these are some serious ninja moves. Really cool stuff, thanks for sharing!
Thank you! 🥷