SVG Displacement Distortion
Also called feTurbulence Distortion, Displacement Map Effect
An SVG filter warps text or shapes with animated noise.
Use for
Liquid or ripple hover
Variants
- turbulence wobble
- displacement map surface
Also called feTurbulence Distortion, Displacement Map Effect
An SVG filter warps text or shapes with animated noise.
Liquid or ripple hover
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add an "SVG Displacement Distortion" hover effect (also called a displacement map effect) to [where].
While the pointer is over it, the text or shape should ripple and wobble as if seen through moving water, fading in softly, and return to crisp when the pointer leaves.
Apply the distortion filter only while the effect is active so it costs nothing at rest, and show the same effect on keyboard focus.