Extras

anthemion-achlys

A misted window, and the pointer wipes it

Ported from a sketch that fogged a photograph the buyer handed it. What is behind the glass here is DRAWN unless you put something there, so it ships wanting nothing and its effect does not depend on somebody else’s picture — and putting an <img> or a <video> inside puts that behind the glass instead. Here for the shelf’s one test: everybody has drawn on a misted window, and nobody has one on a web page. Not Greek, and naming it in Greek does not make it so.

There is no blur pass anywhere in this component, and that is the reason for drawing the scene rather than taking one. A defocused point source does not need approximating with a gaussian — it *is* a disc of the lens’s circle of confusion, dimming as that disc grows — so the field of lamps is evaluated tight and spread in the same loop and the wipe mask picks between them. The mist takes its brightness from the scene behind it rather than from a flat plate, which is what puts the halo around each lamp and leaves the rest of the pane nearly black. Water is pushed rather than deleted: it leaves the swept disc, beads up in a band around the rim, and sheds runners in proportion to the area the stroke swept. Beads refract the sharp field, never the fogged one, which is what makes condensation read as glass instead of as a second blur. Move the pointer and the glass clears in its wake; leave it and the pane mists over again at the rate you set. Put an <img> or a <video> inside the element and that goes behind the glass instead of the drawn street — a child element rather than a src attribute, so srcset, loading and alt all keep working, the tag says which it is, and with no JavaScript at all the picture is still there covering the frame. A wiped streak resolves to the picture exactly as supplied: it is fogged, defocused and refracted, never remapped. Cross-origin media needs crossorigin="anonymous", or the pane falls back to the drawn scene and says so.