Liquid Glass on the Web with SVG Displacement Maps

The article recreates Apple’s Liquid Glass by computing refraction from surface normals and Snell’s law, then encoding the field as an SVG displacement map. It adds a simple rim-light specular, composites via SVG filters, and applies as a Chrome-only backdrop-filter. The prototype works well but is experimental, performance-costly on dynamic changes, and needs fallback strategies in non-Chromium browsers.

Key Points

• Refraction is computed from Snell’s law using a surface function and its derivative to get the normal; four bezel profiles (convex circle, convex squircle, concave, lip) shape the displacement.
• Displacement magnitude is symmetric around a circular bezel, so it’s precomputed along one radius (127 samples), normalized, then rotated to form the full field.
• The refraction field is encoded as an RG displacement map (8-bit channels, 128 neutral) and applied with feDisplacementMap; the filter’s scale equals the maximum precomputed displacement.
• A simple rim-light specular highlight is composited over the refracted result using SVG filter stages (feImage + feBlend) for artistic control.
• Full “backdrop-filter” use of SVG filters is Chrome-only, making the effect Chromium-bound for production; elsewhere, a blurred fallback can be used and dynamic updates are performance-costly.

Sentiment

Overall positive on the technical achievement and educational value, but mixed to skeptical about performance, browser support, and practicality for production UX.

In Agreement

• Technically superb and pedagogically excellent; the interactive explanations and physics-based approach are standout.
• Using feDisplacementMap with a precomputed vector field is the “right” way versus turbulence hacks.
• The CSS/SVG approach integrates cleanly with the DOM and can display on first frame (no JS/render-to-texture boot-up).
• The results convincingly approximate Apple’s effect, especially for focused components like a magnifying glass.
• Adding dispersion/chromatic aberration and higher-resolution filters could elevate the realism further.
• After a quick fix by the author, performance improved notably for some Chromium users.
• The article’s quality and visuals are comparable to best-in-class technical blogs.

Opposed

• Performance is often poor (jank, high GPU, fan noise), making it questionable for real-world UI.
• Chrome-only full effect is frustrating; some want the title to say Chromium-only to set expectations.
• Firefox and Safari lack true backdrop refraction, so the demo feels incomplete or wrong in those browsers.
• WebGL shaders may be a better path for cross-browser performance, despite integration drawbacks.
• Edges show harsh, single-pixel artifacts; anti-aliasing and resolution limits are noticeable.
• Liquid Glass as a design language can hurt readability/accessibility and waste battery for little UX gain.
• Even if technically feasible, compatibility/perf concerns limit viability on production websites.