Gradients of pride flags (lesbian, trans, trans & lesbian), stripes of them are arranged in a hexagon pattern, with a rotation applied to them.
This forms an iris pattern.
How about changing the transform of these on hover (or by clicking the button!)?
The same gradients as above. on hovering/pressing of a button the rotation of every stripe as getting increased over time.
This makes it look as if the iris is closing further.
Let's smooth that out a bit more!
on hover the shapes abruptly turn into an edgy ring shape,
with strands of pride gradients being further out in the beginning and closing in over time
OOOOO! Now that's the kinda happy accident I love to see!
This time the shapes transition smoothly from the closed iris, to opening iris, and into a the ring shape from above
Now that is at least a smooth transition! But still not quite what I wanted.
This time the shapes don't turn into a ring, but still the iris transitions to opening
Okay, a bit more towards what I want. Let's try a different flavour!
The stripes of gradients abruptly get bigger, then over time (on hover) the iris clothes further
Okay, seems like background-size can't be manipulated that way. A shame. (Same goes for background-image, so no flag swapping)
I have one more pridy cool thing!
cw: flashing ligths (better save then sorry, only on hover/button press)
A gradients of pride flags (lesbian, trans, lesbian again) layed on top of each other.
On hover/button a rotation is applied to them (increasing over time), forming a kinda dancing pride flower!
Hidden Stuff
Let's experiment with hiding things and revealing them via transition!
red square on top of a blue square, on hover the red square moves to the right
two red squares on top of a large blue rectangle, on hover both move out of the way
Cool! Now something more complicated!
red square on top of a blue square, on hover the red square moves to the right,
and 3 lesbian pride flag gradients on top of a blue square, that rotate to the left
Okay, I thank I can do better.
same as above, with the stripes covering the blue square completly, and them moveing upwards once they moved to the left
Maybe another approach?
this time the stripes get smaller then the above them over time
Better, but I'd like a different style!
very similar to above, but a bit less smooth of a transition
Oh yeah! I kinda like it! Though not very smooth.
Editors note: this one just kinda ended abruptly, the result of me not working on this for months!
