Deprecated: Using ${var} in strings is deprecated, use {$var} instead in /var/www/u3315689/data/www/snip_php/_str29.php on line 3

Warning: Undefined variable $filterId in /var/www/u3315689/data/www/snip_php/_str29.php on line 311

Animating SVG Filters

Using SVG can add considerable advantage to the looks of your webpage. Vector graphic instruments allow to add visual elements to page to enhance its visual performance

More interesting could be to use SVG filters and even animate properties of these filters.

One of mostly interesting filters is Perlin Noise. People are slightly tired of rectngular forms on pages and are always interested to encounter moving and flowing elements. Though one should keep usage of such elements limited.

Below is the example of such animated filter. Flag blowing in the wind is most trivial way to illustrate Perlin Noise in action.

Start/Stop morphing

Firstly you need to define filter. Add filter id to css definition of element

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgNoise" class="u-svg-none">
<defs>
    <filter id="noiseEffect" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="1" seed="1" stitchTiles="stitch" result="particle">
      <feDisplacementMap scale="80" in="SourceGraphic" in2="particle" xChannelSelector="R" yChannelSelector="G">
        
      </feDisplacementMap>

	</defs>  
    
  </svg>

Set js function to animate filter. Filter is just part of DOM and you can assign js var name to it

const filter = document.querySelector("#noiseEffect");
let bf=0.001;
let runs=false;
var sd=1;
let sc=80;
  const filterElement = filter.querySelector('feTurbulence');
  const filterElement1 = filter.querySelector('feDisplacementMap');
  document.getElementById('btn').addEventListener("change", function () {
if(!runs){
interVal=setInterval(step, 200);
runs=true;
}
else{
clearInterval(interVal);
 runs=false;}
  });

To animate filter call function step() each 200 msc to change filter attributes. It requires sertain effort to ajust interval and attribute range to modify for the final result to look good. Here is a quick and rough solution, but it is place to start.

To achieve 'flag in the wind' effect i modify base frequency within 0.004 and 0.008, scale within 80 to 110. Exeeding these valued leed to distortion of image.

let bfi=1;
let sci=1;

function step(){

sd+=1;

if(bf>=0.008){bfi=-1;}
if(bf<=0.004){bfi=1;}
if(sc>=110){sci=-1;}
if(sc<=80){sci=1;}
bf+=0.0002*bfi;
sc+=3*sci;
filterElement.setAttribute('seed', sd);
filterElement.setAttribute('baseFrequency', bf);
filterElement1.setAttribute('scale', sc);
} 

You can use filter on every element on page. The example below illustarates the way how distortion filter can be applied to submit form. It is hardly a good idea for real life application, but still can be dode.Try to change the number of bottles in order:)