SVG.js动画系列4-滤镜动画

给滤镜加上动画，是一个什么样的效果呢。效果图如下：本示例是anime.js的滤镜动画的翻版，用SVG.js实现。代码：

var draw = SVG().addTo('body').size(800, 600)

  const points1 = "64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100";
  const points2 = "64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96";
  var polygon, filter, turbulence, displacementMap;
  function make() {
    const color = SVG.Color.random();
    polygon = draw.polygon(points1).attr({fill:color});
    filter = polygon.filterWith(function(add){
      turbulence = add.turbulence({
        baseFrequency:".05",
        numOctaves:"2"
      });

      const scale = "15";
      const xChannelSelector = "R";
      const yChannelSelector = "G";
      displacementMap = add.displacementMap("SourceGraphic", turbulence, scale, xChannelSelector, yChannelSelector);
    })
    polygon.move(400, 200);
  }

  make();
  const duration = 700
  turbulence.animate({duration,times:100,swing: true}).attr("baseFrequency", 0)
  displacementMap.animate({duration,times:100,swing: true}).attr("scale", 0)
  polygon.animate({duration,times:100,swing: true}).ease('sineInOut').plot(points2).move(400, 200)