The-Real-Thisas / svg-distortion-effect-demo

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.

Cuberto SVG Distortion Demo

Frontend dependencies

GSAP (https://greensock.com/gsap/)

Setup demo project

Install

npm install

Start develop server

gulp or gulp serve deploy app and start browsersync server + watchers

File structure

├── /tmp/                       # Temporary served files
└── /src/                       # The source code of the application
    ├── /js/                    # JavaScript source
        └── particles.js        # Library main
    ├── /pug/                   # Pug templates
        └── /_includes/         # Pug partials
    ├── /scss/                  # SCSS styles
        └── particles.scss      # Library additional css
    ├── /static/                # Static files (fonts, images, videos, etc..)