Re-creating a Japanese Fireworks Catalog from 1883 in CSS

#css #codepen #webdev #showdev

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: