Skip to main content
SVG Distortion
Updated over a week ago

SVG Distortion processes an image using the SVG filter causing a displacement map created with.

Depth Factor: define the amount of displacement.


  • Static: simply apply the image distortion effect without transitions;

  • Animated: produce the effect repeatedly;

  • Rollover: generate the effect as the cursor passes over the element;

  • Scroll: apply the animation effect only when the item is displayed at the scroll.


Take a look at this working example

Did this answer your question?