WarpFor developers · SVG filter
SVG displacement map generator
Adjust the turbulence, watch the sample distort, copy the filter. Apply it to any element with filter: url(#warp).
Frequently asked questions
What does feDisplacementMap do?
It moves each pixel of the source by an amount read from a second image, the map. Pairing it with feTurbulence gives liquid, heat-shimmer and glass-like distortion with no JavaScript.
Does it work in every browser?
SVG filters are supported in all modern browsers. Applied through CSS filter: url(#id) they also work on HTML elements, though Safari has had bugs with filters on backdrop-filter elements.
Is it expensive to render?
Turbulence with many octaves on a large element can drop frames on mobile. Keep numOctaves at 1 or 2 and apply the filter to a small element when animating.