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


  • 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

See also:

Source and Class of Output

ViewBox values


Here a working example

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us