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)
@tylersticka Ah thanks!
I forgot to update here but I ended up trying it it and it's working great... Except in Safari 🙃
display: flex/grid; are a no go, and some other seemingly random properties don't work lol,
So I declare this project not suitable for Safari 😅 I will try to address it at a later point, maybe if I switch out to HTML Canvas? but right now it's a blocker to other stuff I want to add.
@hejchristian @tylersticka Yeah, I’ve fought my fair share with foreignObject and Safari. 😅
There are workarounds, but not for everything, sadly. 😅
Christian Alder
Tyler Sticka
Amadeus Maximilian