Codrops
  • All Posts
  • Demos Hub
  • Webzibition
  • The Collective

distortion filter svg

Sketch 020: Image Motion Effect with SVG Filter

An image motion effect with an SVG distortion filter on mouse move.
By Manoela Ilic on April 10, 2022
Demo Code

Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →

Sketch 019: Image Motion Effect with SVG Filter
Sketch 021: SVG Path Page Transition (Vertical)
Meco
Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox. Try it, unclutter your inbox.
Scrimba
Want to build websites but don’t know where to start? Scrimba's Frontend Developer Career Path is the perfect beginner-friendly course to kickstart your journey! Created with Mozilla MDN, it teaches you modern web development skills step by step. Codrops readers get 20% off Pro plans!
Explore the site
  • Home
  • Articles
  • Tutorials
  • Playground
  • Demos Hub
  • Webzibition
  • The Collective
  • CSS Reference
  • Freebies
  • About
  • Get in touch
  • Advertise
  • Privacy Policy
  • License
Follow Codrops
  • GitHub
  • Bluesky
  • Instagram
  • Facebook
  • Telegram
  • Mastodon
  • X
  • RSS Feed
  • Proudly hosted by Liquid Web hosting Liquid Web logo
  • Content delivered by
  • © Codrops 2025
Support us on Patreon logo