01
export default function App() {
02
  return (
03
    <div className="w-full h-full flex flex-col items-center justify-center rounded-xl p-8 relative overflow-hidden">
04
      <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
05
        <defs>
06
          <filter id="demo1-specular-lighting">
07
            {/* 1. 模糊 Alpha, 制造圆润的斜坡 */}
08
            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
09

10
            {/* 2. 生成高光层 */}
11
            {/* specularExponent="25": 适中的光斑, 看起来像软塑料或凝胶 */}
12
            {/* lighting-color: 白色高光 */}
13
            <feSpecularLighting
14
              in="blur"
15
              surfaceScale={5}
16
              specularConstant={1}
17
              specularExponent={25}
18
              lightingColor="white"
19
              result="specularOut"
20
            >
21
              <fePointLight x={50} y={50} z={60} />
22
            </feSpecularLighting>
23

24
            {/* 3. 关键步骤：合成 */}
25
            {/* 将高光层 (specularOut) 叠加在原始图形 (SourceGraphic) 上 */}
26
            {/* arithmetic k2="1" k3="1" 相当于简单的相加 (Add) */}
27
            <feComposite
28
              in="SourceGraphic"
29
              in2="specularOut"
30
              operator="arithmetic"
31
              k1={0}
32
              k2={1}
33
              k3={1}
34
              k4={0}
35
            />
36
          </filter>
37
        </defs>
38

39
        {/* 原始图形：一个粉色的圆 */}
40
        <circle cx={100} cy={100} r={60} fill="#ff4081" filter="url(#demo1-specular-lighting)" />
41
      </svg>
42
    </div>
43
  );
44
}
45

01
export default function App() {
02
  return (
03
    <div className="w-full h-full flex flex-col items-center justify-center rounded-xl p-8 relative overflow-hidden">
04
      <svg width="400" height="150" viewBox="0 0 400 150" xmlns="http://www.w3.org/2000/svg">
05
        <defs>
06
          <filter id="demo2-specular-lighting">
07
            {/* 1. 模糊源图像 Alpha */}
08
            <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
09

10
            {/* 2. 制造暗部/体积感 (Diffuse) */}
11
            {/* lightingColor="#666" 是个技巧, 用它来压暗边缘, 或者用深灰色 */}
12
            <feDiffuseLighting
13
              in="blur"
14
              surfaceScale={4}
15
              lightingColor="#666"
16
              result="diffuseOut"
17
            >
18
              <feDistantLight azimuth={45} elevation={60} />
19
            </feDiffuseLighting>
20

21
            {/* 3. 制造锐利高光 (Specular) */}
22
            {/* specularExponent="80": 非常高, 模拟抛光金属的锐利反光 */}
23
            <feSpecularLighting
24
              in="blur"
25
              surfaceScale={6}
26
              specularConstant={1.5}
27
              specularExponent={80}
28
              lightingColor="#fff"
29
              result="specularOut"
30
            >
31
              <feDistantLight azimuth={45} elevation={60} />
32
            </feSpecularLighting>
33

34
            {/* 4. 复杂的合成链 */}
35
            {/* 先把 Diffuse 叠到底色上 */}
36
            <feComposite
37
              in="diffuseOut"
38
              in2="SourceGraphic"
39
              operator="arithmetic"
40
              k1={1}
41
              k2={0}
42
              k3={0}
43
              k4={0}
44
              result="shaded"
45
            />
46

47
            {/* 再把 Specular 加到结果上 */}
48
            <feComposite
49
              in="specularOut"
50
              in2="shaded"
51
              operator="arithmetic"
52
              k2={1}
53
              k3={1}
54
              result="metallic"
55
            />
56

57
            {/* 最后裁切掉文字外部 */}
58
            <feComposite
59
              in="metallic"
60
              in2="SourceAlpha"
61
              operator="in"
62
            />
63
          </filter>
64
        </defs>
65

66
        <text
67
          x="50%"
68
          y="60%"
69
          textAnchor="middle"
70
          fontFamily="Impact"
71
          fontSize="80"
72
          fill="#aaa"
73
          filter="url(#demo2-specular-lighting)"
74
        >
75
          METAL
76
        </text>
77
      </svg>
78
    </div>
79
  );
80
}
81

01
export default function App() {
02
  return (
03
    <div className="w-full h-full flex flex-col items-center bg-gray-900 justify-center rounded-xl p-8 relative overflow-hidden">
04
      <svg width="300" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
05
        <defs>
06
          <filter id="moving-light" x="-50%" y="-50%" width="200%" height="200%">
07
            {/* 1. 准备高度图 */}
08
            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
09

10
            {/* 2. 动态光照 */}
11
            {/* specularExponent=35: 聚光效果明显 */}
12
            <feSpecularLighting
13
              in="blur"
14
              surfaceScale="5"
15
              specularConstant="2"
16
              specularExponent="35"
17
              lightingColor="#ff0055"
18
              result="light"
19
            >
20
              {/* 点光源 */}
21
              <fePointLight x="-50" y="75" z="30">
22
                {/* 动画：让光从左扫到右 */}
23
                <animate attributeName="x" from="-50" to="350" dur="3s" repeatCount="indefinite" />
24
              </fePointLight>
25
            </feSpecularLighting>
26

27
            {/* 3. 合成 */}
28
            {/* 我们把原始图形设为暗色, 只在有光划过时变亮 */}
29
            {/* 使用 arithmetic 将光照叠加在原图上 */}
30
            <feComposite
31
              in="light"
32
              in2="SourceGraphic"
33
              operator="arithmetic"
34
              k1="0"
35
              k2="0.2"
36
              k3="1"
37
              k4="0"
38
            />
39
          </filter>
40
        </defs>
41

42
        {/* 文字本身是深灰色的, 只有光照扫过才会亮起洋红色 */}
43
        <text
44
          x="50%"
45
          y="50%"
46
          dy=".3em"
47
          textAnchor="middle"
48
          fontFamily="Verdana"
49
          fontWeight="900"
50
          fontSize="60"
51
          fill="#333"
52
          filter="url(#moving-light)"
53
        >
54
          usehook
55
        </text>
56
      </svg>
57
    </div>
58
  );
59
}
60

01
export default function App() {
02
  return (
03
    <div className="w-full h-full flex flex-col items-center bg-gray-800 justify-center rounded-xl p-8 relative overflow-hidden">
04
      <svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
05
        <defs>
06
          <filter id="water-drops">
07
            {/* 1. 模糊源, 制造水滴的弧度 */}
08
            <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur" />
09

10
            {/* 2. 生成高光 */}
11
            {/* 高 surfaceScale (15) 模拟水滴的高突起 */}
12
            {/* exponent=40 模拟湿润的表面 */}
13
            <feSpecularLighting
14
              in="blur"
15
              surfaceScale={15}
16
              specularConstant={2.5}
17
              specularExponent={40}
18
              lightingColor="#fff"
19
              result="specular"
20
            >
21
              <fePointLight x={50} y={50} z={100} />
22
            </feSpecularLighting>
23

24
            {/* 3. 合成：只显示高光 + 原始的一点点透明度 */}
25
            {/* 这里的关键是我们几乎丢弃了 SourceGraphic 的颜色, 主要保留高光 */}
26
            <feComposite in="specular" in2="SourceGraphic" operator="in" result="glint" />
27

28
            {/* 4. 给水滴加一点阴影让它更立体 (可选) */}
29
            <feDropShadow dx={2} dy={4} stdDeviation={3} floodOpacity={0.3} />
30
          </filter>
31
        </defs>
32

33
        <rect width="100%" height="100%" fill="url(#bg)" />
34

35
        {/* 水滴组 */}
36
        {/* 颜色 fillOpacity 设为 0.1, 因为水是透明的 */}
37
        <g filter="url(#water-drops)" fill="white" fillOpacity={0.1}>
38
          <circle cx={100} cy={80} r={30} />
39
          <circle cx={180} cy={120} r={40} />
40
          <path
41
            d="M50,150 Q80,120 110,150 T170,150"
42
            stroke="white"
43
            strokeWidth={20}
44
            strokeLinecap="round"
45
            fill="none"
46
          />
47
        </g>
48
      </svg>
49
    </div>
50
  );
51
}
52