Svg Distortion

Svg Distortion processes an image using the svg filter <feImage> causing a displacement map created with <feDisplacementMap>.

Depth Factor: define the amount of displacement.

Triggers

• 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.

Demo

Take a look at this working example