How to use the snapsvg.filter function in snapsvg

Persona.prototype._applyVisualFilter = function(amount) {
    if (this.mVisualFocusEffectEnabled) {
        if (!this.mVisualFocusFilter) {
            this.mVisualFocusFilter = this.paper.filter(Snap.filter.grayscale(this.mVisualFocusGrayScaleAmount));
            this.mVisualFocusFilter.attr({filterUnits: 'objectBoundingBox', x: '-0.1', y: '-0.1', width: '1.2', height: '1.2'});
        }

        if (!amount) {
            this.attr({opacity: 1, filter: null });
        } else {
            /* horrible Edge hack */
            /* eslint-disable */
            /* TODO: remove once Edge fixes its `innerHTML` implementation */
            /* eslint-enable */
            if (!this.mIsEdge) {
                this.mVisualFocusFilter.node.innerHTML = Snap.filter.grayscale(this.mVisualFocusGrayScaleAmount * amount);
            }
            var attributes = {
                opacity: 1.0 - ((1.0 - this.mVisualFocusOpacityAmount) * amount),
            };
            if (!this.mVisualFocusEffectCompatibilityMode) { /* snap svg filters like the grayscale are not compatible with Firefox/IE */
                attributes.filter = this.mVisualFocusFilter;
            }

            this.attr(attributes);
        }
    }
};

const opt = self.option

    if (opt.button && typeof opt.button === 'string') {
      return
    }

    const r = opt.buttonWidth / 2
    const center = opt.center
    const deg = (180 - opt.buttonDeg) / 2
    const [pathArc, , , end] = describeArc(center[0], center[1], r, deg - 360, 360 - deg)
    const top = [center[0], center[1] - r / Snap.cos(deg)]
    const pathD = `${pathArc}L${top[0]},${top[1]}L${end.x},${end.y}L${center[0]},${center[1]}`
    const b = svg.path(pathD)
    b.attr({
      fill: opt.color.button,
      filter: svg.filter(Snap.filter.shadow(0, 3, 3, 'black', 0.5))
    })

    let text = null
    if (opt.buttonText !== '') {
      const maxLen = r * 2 * 0.8
      let fontSize = opt.buttonFontSize ? opt.buttonFontSize : baseFontSize
      let textSum = 0
      for (let i = 0; i < opt.buttonText.length; ++i) {
        if (opt.buttonText[i].match(/\w/)) {
          textSum += 1
        } else textSum += 2
      }
      if (!opt.buttonFontSize) {
        fontSize = fontSize * textSum / 2 > maxLen ? maxLen / textSum * 2 : fontSize
      }
      text = svg.text(center[0], center[1], opt.buttonText)