Monorail – Turn CSS animations into interactive SVG graphs

Cool stuff! Flattening things like colours into a 1D value is an interesting challenge here. How did you decide to weigh the R channel an order of magnitude higher than G and so on? I might've tried working with HSV for instance, since it feels like animations would often be along one of those axes, but maybe not.

Is that what’s happening with the color? I assumed it was doing (R+G+B)•Opacity, so the max would be 255•3=765 and the min would be 0.

Yeah I dug up the relevant function because I was curious how one would solve this.

    return (r * 1000 + g * 100 + b * 10 + a * 255) / 10000;

https://github.com/Stanko/monorail/blob/2da287a4e822705a99d7...

Thank you! As for color conversion, I didn’t spend too much time thinking about the conversion. Because I’m using canvas to transform CSS colors to RGBA, I just went and multiplied them in order by powers on 10.

It can definitely be improved. Using HSL or even OKLch would probably give nicer results. I may look into it.