---
title: "Making Switch with SVG Distortion Effect"
description: "Making Switch with SVG Distortion Effect | Cuberto BlogServicesProjectsCompanyBlogContactsMenuServicesProjectsCompanyBlogContactsGet in touchinfo@cuberto.comOur workflowcontact-contact-contact-contact-Dev Source12/13/2021Making Switch with SVG Distortion EffectThis example is dedicated to how you can use the SVG Turbulence and…"
url: https://nexonsoftware.com/making-switch-with-svg-distortion-effect/
date_published: 2026-06-07T17:24:57+00:00
date_modified: 2026-06-20T10:56:55+00:00
site: "Nexonsoftware"
agent_standard: ugentic/1.0
---

Making Switch with SVG Distortion Effect | Cuberto Blog
[https://nexonsoftware.com/?page_id=20&preview=true](https://nexonsoftware.com/?page_id=20&preview=true)[https://nexonsoftware.com/?page_id=20&preview=true](https://nexonsoftware.com/?page_id=20&preview=true)
[Services](https://nexonsoftware.com/?page_id=21&preview=true)
[Projects](https://nexonsoftware.com/?page_id=22&preview=true)
[Company](https://nexonsoftware.com/?page_id=23&preview=true)
[Blog](https://nexonsoftware.com/?page_id=24&preview=true)
[Contacts](https://nexonsoftware.com/?page_id=25&preview=true)
### Menu
[Services](https://nexonsoftware.com/?page_id=21&preview=true)
[Projects](https://nexonsoftware.com/?page_id=22&preview=true)
[Company](https://nexonsoftware.com/?page_id=23&preview=true)
[Blog](https://nexonsoftware.com/?page_id=24&preview=true)
[Contacts](https://nexonsoftware.com/?page_id=25&preview=true)
### Get in touch
[info@cuberto.com](mailto:info@cuberto.com)
[Our workflow](https://nexonsoftware.com/?page_id=20&preview=true)
[https://nexonsoftware.com/?page_id=25&preview=true](https://nexonsoftware.com/?page_id=25&preview=true)
Dev Source
12/13/2021
# Making Switch with SVG Distortion Effect
This example is dedicated to how you can use the SVG Turbulence and Displacement Map filters to create an interesting switching effect for pictures and videos.
![Making Switch with SVG Distortion Effect](https://nexonsoftware.com/wp-content/uploads/ugentic-clones/ugentic-clone-6a25a82190a88/cuberto.com/40cbc993a9cf-vlcsnap_2025_07_22_01h17m10s656_84d6e3d741_h1050.webp)
This example shows how to apply SVG Turbulence and Displacement Map filters to create a dynamic transition effect for images and videos. Instructions for running the demo are available in the README.md file.
[https://github.com/Cuberto/svg-distortion-effect-demo](https://github.com/Cuberto/svg-distortion-effect-demo)
Share
[https://www.facebook.com/sharer/sharer.php?u=https://cuberto.co/blog/making-switch-svg-distortion-effect/](https://www.facebook.com/sharer/sharer.php?u=https://cuberto.co/blog/making-switch-svg-distortion-effect/)
[https://www.linkedin.com/sharing/share-offsite/?url=https://cuberto.co/blog/making-switch-svg-distortion-effect/](https://www.linkedin.com/sharing/share-offsite/?url=https://cuberto.co/blog/making-switch-svg-distortion-effect/)
[https://twitter.com/intent/tweet?url=https://cuberto.co/blog/making-switch-svg-distortion-effect/](https://twitter.com/intent/tweet?url=https://cuberto.co/blog/making-switch-svg-distortion-effect/)
Related Posts
[Dynamic Background Effect Using WebGL](https://nexonsoftware.com/?page_id=33&preview=true)
[Sequence Scrolling JS Effect](https://nexonsoftware.com/?page_id=55&preview=true)
[Cuberto Particles (JS Library)](https://nexonsoftware.com/?page_id=30&preview=true)
## Have an idea?
[Tell us](https://nexonsoftware.com/?page_id=25&preview=true)
[info@cuberto.com](mailto:info@cuberto.com)
Main office
901 N Pitt Street
Alexandria VA, 22314
[+1 301 549 9309](tel:+13015499309)
Second office
Na Perstyne
342/1, 11000 Prague
[Services](https://nexonsoftware.com/?page_id=21&preview=true)[Blog](https://nexonsoftware.com/?page_id=24&preview=true)[Projects](https://nexonsoftware.com/?page_id=22&preview=true)[Workflow](https://nexonsoftware.com/?page_id=20&preview=true)[Company](https://nexonsoftware.com/?page_id=23&preview=true)[Contacts](https://nexonsoftware.com/?page_id=25&preview=true)
[Privacy Policy](https://nexonsoftware.com/?page_id=26&preview=true)
2026, Cuberto
[https://www.instagram.com/cubertodesign/](https://www.instagram.com/cubertodesign/)
[https://www.youtube.com/channel/UCzestFrXpwSGCfcbO2pObwQ](https://www.youtube.com/channel/UCzestFrXpwSGCfcbO2pObwQ)
[https://github.com/Cuberto](https://github.com/Cuberto)
[https://www.facebook.com/Cuberto.design/](https://www.facebook.com/Cuberto.design/)
[https://dribbble.com/cuberto](https://dribbble.com/cuberto)
[https://www.behance.net/cuberto](https://www.behance.net/cuberto)