This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
I’ve been playing with some random stuff lately. I created billions and billions of random layouts, random rectangles, random triangles, random quadrilaterals, random ducks, random white images of random size, and random blobs. These are all generated images with random dimensions and random colours. Nothing interactive really, and not very dynamic either. I decided to create an animated blob. I wanted to learn how animations work in SVG (weird!), and I wanted to see what dynamic randomness looks like.
rgb(29,62,62) in the available steps? And if so, does this result in the most smooth transition possible?
I have no idea.
And I really can’t get my head around it, so I can’t even theoretically think what it does exactly. So I decided to create six alternative ways to transition from one colour to another. They might result in more smooth transitions, or so I thought. Instead of using RGB — which is for computers — I decided to use HSL, which is for humans. And instead of transitioning the Hue, Saturation and Lightness channels all at once, I decided to transition them one by one to see what happens. All transitions from one colour to the other happen in approximately three seconds. So one second for each channel:
- Arbitrary transitions: it’s up to the browser to decide how to do it (probably everything at the same time).
- First hue, then saturation and finally lightness.
- First hue, then lightness and finally saturation.
- First saturation, then lightness and finally hue.
- First saturation, then hue and finally lightness.
- First lightness, then hue and finally saturation.
- First lightness, then saturation and finally hue.
If you think time should be spent in a profitable manner, this was a pretty useless exercise. But if you don’t mind wasting a few hours on some random nonsense, it was time well spent. Now that I see it, I understand that yes, of course, three transitions in a row are much more obvious to see than three transitions all at once. And if somebody had told that a few days ago, I wouldn’t have created these. Lucky for you, nobody told me. You can now see with your own eyes how it works. You might even find a use for it!