How to use feTurbulence and feDisplacementMap with `svg.filter.js`?

Question

This SVG filter:

<filter id="xkcdify" filterUnits="userSpaceOnUse" x="-5" y="-5" width="100%" height="100%">
  <feTurbulence 
      type="fractalNoise" baseFrequency="0.05" result="noise" 
  />
  <feDisplacementMap 
      scale="5" xChannelSelector="R" yChannelSelector="G" 
      in="SourceGraphic" in2="noise" 
  />
</filter>

is used by the Chart XKCD package, to apply a displacement map to SVG data.

I am trying to determine how to make similar filters using svg.filter.js, but what I have is not working:

    g.filterWith(add =>
      add
        .turbulence(0.05, 1, 0, "stitch", "fractalNoise")
        .displacementMap(add.SourceGraphic, 5, "R", "G")
    );

The above code generates this filter:

<filter id="SvgjsFilter1029">
  <feTurbulence 
    id="SvgjsFeTurbulence1027" 
    in="SourceGraphic"
    result="SvgjsFeTurbulence1027"  
    type="fractalNoise" stitchTiles="stitch" seed="115" 
    numOctaves="1" baseFrequency="0.05" 
  />
  <feDisplacementMap 
    id="SvgjsFeDisplacementMap1028" 
    in="SvgjsFeTurbulence1027" 
    result="SvgjsFeDisplacementMap1028"
    yChannelSelector="G" xChannelSelector="R" scale="5" 
  />
</filter>

Which does not do what I want.

It takes my input:

and turns it into this:

My goal is to generate a filter like the first one, which when applied to the input gives this:

Is there a way to do this with svg.filter.js?

you can have a look here for an animated example: https://codepen.io/fuzzyma/pen/XoMPEp — Fuzzyma, Jul 16 '20 at 05:27

score 2 · Accepted Answer · answered Jul 15 '20 at 22:11

Two things:

add.SourceGraphic should be add.$source (there are plenty of examples in the readme).
To get in/in2 in the right order for the feDisplacementMap, you need to create your filters in separate steps (no chaining).

rect.filterWith(add => {
    var noise = add.turbulence(0.05, 1, 0, "stitch", "fractalNoise");
    add.displacementMap(add.$source, noise, 5, "R", "G");
});

https://jsfiddle.net/yxobe2dp/

How to use feTurbulence and feDisplacementMap with `svg.filter.js`?

1 Answers1