Gooey Svg Filter

1const GooeySvgFilter = ({
2  id = "gooey-filter",
3  strength = 10,
4}: {
5  id?: string
6  strength?: number
7}) => {
8  return (
9    <svg className="hidden absolute">
10      <defs>
11        <filter id={id}>
12          <feGaussianBlur
13            in="SourceGraphic"
14            stdDeviation={strength}
15            result="blur-sm"
16          />
17          <feColorMatrix
18            in="blur-sm"
19            type="matrix"
20            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
21            result="goo"
22          />
23          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
24        </filter>
25      </defs>
26    </svg>
27  )
28}
29 
30export default GooeySvgFilter