Pixelate Svg Filter

1interface PixelateSvgFilterProps {
2  id: string
3  size?: number
4  crossLayers?: boolean
5}
6 
7export default function PixelateSvgFilter({
8  id = "pixelate-filter",
9  size = 16,
10  crossLayers = false,
11}: PixelateSvgFilterProps) {
12  return (
13    <svg className="absolute inset-0">
14      <defs>
15        <filter id={id} x="0" y="0" width="1" height="1">
16          {"First layer: Normal pixelation effect"}
17          <feConvolveMatrix
18            kernelMatrix="1 1 1
19                          1 1 1
20                          1 1 1"
21            result="AVG"
22          />
23          <feFlood x="1" y="1" width="1" height="1" />
24          <feComposite
25            operator="arithmetic"
26            k1="0"
27            k2="1"
28            k3="0"
29            k4="0"
30            width={size}
31            height={size}
32          />
33          <feTile result="TILE" />
34          <feComposite
35            in="AVG"
36            in2="TILE"
37            operator="in"
38            k1="0"
39            k2="1"
40            k3="0"
41            k4="0"
42          />
43          <feMorphology operator="dilate" radius={size / 2} result={"NORMAL"} />
44          {crossLayers && (
45            <>
46              {"Second layer: Fallback with full-width tiling"}
47              <feConvolveMatrix
48                kernelMatrix="1 1 1
49                              1 1 1
50                              1 1 1"
51                result="AVG"
52              />
53              <feFlood x="1" y="1" width="1" height="1" />
54              <feComposite
55                in2="SourceGraphic"
56                operator="arithmetic"
57                k1="0"
58                k2="1"
59                k3="0"
60                k4="0"
61                width={size / 2}
62                height={size}
63              />
64              <feTile result="TILE" />
65              <feComposite
66                in="AVG"
67                in2="TILE"
68                operator="in"
69                k1="0"
70                k2="1"
71                k3="0"
72                k4="0"
73              />
74              <feMorphology
75                operator="dilate"
76                radius={size / 2}
77                result={"FALLBACKX"}
78              />
79              {"Third layer: Fallback with full-height tiling"}
80              <feConvolveMatrix
81                kernelMatrix="1 1 1
82                              1 1 1
83                              1 1 1"
84                result="AVG"
85              />
86              <feFlood x="1" y="1" width="1" height="1" />
87              <feComposite
88// … truncated