Liquid glass experiment

June 2025

A draggable liquid glass effect that distorts whatever's behind it using SVG displacement maps.

:
Phone mockup

The technique involves creating a displacement map using the Canvas API (essentially a two-channel image where red and green values tell the browser how to bend pixels horizontally and vertically). This map is then fed into an SVG filter that applies the distortion to whatever's behind the glass.

Currently only works in Chromium browsers. Safari and Firefox both have issues handling URL references in the backdrop-filter property.