Exploring

Experiments and other curiosities

Theme Contrast & Palette

While writing the post Demonstrating Software Personalisation, I built these interactive theme components to offer a more interactive and explorable approach to the topic.

Code

100

200

300

400

500

600

700

800

900

1000

--color-theme-0: oklch(from var(--color-theme-raw) 1.00 calc(c * 0.09) h);
--color-theme-100: oklch(from var(--color-theme-raw) 0.91 calc(c * 0.27) h);
--color-theme-200: oklch(from var(--color-theme-raw) 0.82 calc(c * 0.45) h);
--color-theme-300: oklch(from var(--color-theme-raw) 0.73 calc(c * 0.64) h);
--color-theme-400: oklch(from var(--color-theme-raw) 0.64 calc(c * 0.82) h);
--color-theme-500: oklch(from var(--color-theme-raw) 0.55 calc(c * 1.00) h);
--color-theme-600: oklch(from var(--color-theme-raw) 0.45 calc(c * 0.82) h);
--color-theme-700: oklch(from var(--color-theme-raw) 0.36 calc(c * 0.64) h);
--color-theme-800: oklch(from var(--color-theme-raw) 0.27 calc(c * 0.45) h);
--color-theme-900: oklch(from var(--color-theme-raw) 0.18 calc(c * 0.27) h);
--color-theme-1000: oklch(from var(--color-theme-raw) 0.09 calc(c * 0.09) h);

Dot Matrix

I’ve come to like Bungie’s Marathon and its art style, which was surely assisted by the involvement of Kurppa Hosk, a design favourite of mine. What you see here is a customisable approximation of the game’s loading animation.

Usage Code