aniqa.dev
← Archive09 / 16

ExperimentNo. 09Updated

Index Tiles

Sixteen tiles use their index to set colour, angle, corner radius and spin timing. Adjust the shared values, pick a tile, and see how its properties are calculated.

Made
Oct 2023
Type
CSS study
Stack
CSS custom properties / calc()
Links
Code ↗v1 ↗
Animation controls
The formula for each tile
Tile you picked

--i: 7

Adjust a value · pick a tile

Idea

I wanted to see how one index could drive several CSS properties, and how changing the base hue and hue step shifts the HSL colors across all sixteen tiles.

Notes

  1. Each tile gets a different --i value. calc() uses it to set the hue, angle, corner radius, spin duration and delay.
  2. Changing one shared value updates all sixteen tiles. Picking a tile shows the values behind its style.

Revisited

  1. Oct 2023: first made on CodePen (v1).
  2. Nov 2026: rebuilt for the lab with adjustable values and details for each tile.