Liquid SVG Glass

A draggable pane of refractive glass floating over plain rich text. The distortion is pure SVG — a feDisplacementMap driven by a generated gradient map, applied through backdrop-filter.

How it works

An off-screen SVG defines a filter. Its first primitive, feImage, loads a tiny data-URI SVG: a rounded rectangle painted with a red gradient running horizontally and a blue gradient running vertically. Those two channels become displacement vectors — red pushes pixels in X, blue pushes them in Y.

Three copies of the displacement run at slightly different scales, one per RGB channel, then get screen-blended back together. That per-channel offset is what produces the subtle chromatic aberration fringe at the edges of the lens, like real thick glass splitting light.

Displacement mapping reads color as geometry: brightness in the map becomes motion in the image beneath it.

Why backdrop-filter

Applying the filter with backdrop-filter: url(#glass) means the element itself stays untouched — only whatever renders behind it is warped, live, as you drag the pane around. Combine it with a faint blur() and saturate() and the pane reads as physical material rather than a screenshot trick.

Browser support note: filter-URL values inside backdrop-filter work in Chromium. Safari and Firefox fall back to plain blur here.

Filler prose for dragging over

Typography survives refraction surprisingly well. Serifs smear, counters wobble, and line breaks bend around the lens edge, yet the text stays legible near the center where the displacement map is neutral gray. Lorem ipsum dolor sit amet, consectetur adipiscing elit — sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus, nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.

• Red channel → horizontal displacement
• Blue channel → vertical displacement
• Neutral 0x80 gray → no displacement at all
• Edge falloff → the “meniscus” ring around the lens

Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi.