Cool. Sounds really hard though. To look realistic, the drops would have to merge into one another and also follow down previously established paths. It's pretty cool that you did this in just css but I think we have veered into WebGl territory.
Well that is impressive.
However I don't know if there's a way to check for collisions that don't include the mouse pointer in CSS. (and I would like that if one drop falls over another they both merge)
Enthusiastic noob here. I can usually fathom what is going in these neat CSS demos, but this one baffles me. Could someone provide a few pointers as to how it's doing what it does?
Each rain drop takes an image, scales it down, rotates it 180º, positions it according to the drop's position and crops in a round shape. Then a small border is added according to the drop's size. The trick is getting all those values right.
Many thanks for answering. Much appreciated. Conceptually, I understand each of those steps. I'm much less clear on how the drop appears to refract the underlying image.
