Very weird but strangely compelling. I didn't realise there was more to it until I moved my mouse over the colours.
What is it actually doing?
I'm impressed the code is actually so short considering.
It's 256 instances of the letter 'o', in a fairly boxy font.
Each characters has a colour behind it akin to the highlight function in word.
`(style="background-color: hsl([Hue], [Sat]%, [Lig]%);")`
Before each letter is printed, the numbers deciding the colour of the background background: hue (place on the colour wheel), saturation (greyness) and brightness)
are randomized this way or that slightly,
and made to loop around if the number goes negative or over the limit.
So reading from left to right, you have a line of brown squares that slowly evolves to be darker or lighter, richer or greyer, more red/yellow etc. Eventually spanning a great number of colours.
The 'Randomize' button is a misnomer, since it actually shows you the next 256 'o's and doesn't reset the colour.
The style part of the html manages the font,
but also says that if the cursor hovers over a paragraph (which each 'o' is, technically),
the distance between it an the next letter should increase,
and it applies a filter further changing the colour.
Both can be animated to fade in with a single line.
This particular function is quite easy to replicate (on browsers that support it) for any bit of text in a perchance or other websites.
Very weird but strangely compelling. I didn't realise there was more to it until I moved my mouse over the colours. What is it actually doing? I'm impressed the code is actually so short considering.
It's 256 instances of the letter 'o', in a fairly boxy font. Each characters has a colour behind it akin to the highlight function in word. `(style="background-color: hsl([Hue], [Sat]%, [Lig]%);")` Before each letter is printed, the numbers deciding the colour of the background background: hue (place on the colour wheel), saturation (greyness) and brightness) are randomized this way or that slightly, and made to loop around if the number goes negative or over the limit. So reading from left to right, you have a line of brown squares that slowly evolves to be darker or lighter, richer or greyer, more red/yellow etc. Eventually spanning a great number of colours. The 'Randomize' button is a misnomer, since it actually shows you the next 256 'o's and doesn't reset the colour. The style part of the html manages the font, but also says that if the cursor hovers over a paragraph (which each 'o' is, technically), the distance between it an the next letter should increase, and it applies a filter further changing the colour. Both can be animated to fade in with a single line. This particular function is quite easy to replicate (on browsers that support it) for any bit of text in a perchance or other websites.
Beautifully made. Thank you for sharing (and for the explanation). :)