Some progress on this weekends web dev project, I'm making a little advent calendar generator ☺️
So far:
- Manged to randomize values into the cells, learning about the Fisher-Yates shuffle algorithm in the process
- Ended up hand coding the SVG to get it setup right
- Good groundwork for things to come, I think
Some issues:
- Turns out scaling text & line-wrapping within an SVG is a _whole_ issue. Either I'll have to do some funky stuff in JS or find another way here. Looking into <foreignObject>
- Still not decided how to tackle freeform placement. HTML canvas might help? then turn that into SVG 🤔
🎁 Here's a CSS one liner that can achieve a nice gradient across siblings (A couple of variables too, but not needed)
fill: hsl(from var(--base) h s calc(l + var(--step-size) * (sibling-index() - 1)));
Demo: https://codepen.io/HejChristian/pen/NPrzNdy
(No good in firefox)
Christian Alder