// the find
shuding/liquid-glass
Copy-paste Liquid Glass shader with SVG
A single JavaScript file that adds a Liquid Glass-style refraction to page elements using SVG filters, meant to be pasted into a browser console. It suits front-end developers who want to see the effect on a live page quickly or need a starting point for their own SVG shader experiments.
- No build step and no dependencies. The whole effect is one file, so you can try the technique without touching a project.
- It stays within SVG filter primitives rather than WebGL or canvas, so the displacement setup lives in the DOM where you can inspect and adjust it in devtools.
- The lineage is clear: it applies the ideas from shuding/svg-shaders, and a second script, liquid-diamond.js, follows the same single-file format for a different shape.
- The README is one usage line. It has no option list, no description of which elements the script targets, and no teardown path, so you have to read the source to apply it to your own page or remove it.
- SVG filters are handled unevenly across browsers, and the README does not say which browsers the effect has been tested in.
- Displacement filters are expensive to repaint on large or animating surfaces, and the README gives no performance guidance.
- Console-paste distribution means no version pinning and no clean way to upgrade a site that uses it. The demo is a v0.dev chat link rather than a runnable page in the repo.