SVG滤镜打造荷塘月色

荷塘月色，千古流传，勾起人们对诗情画意的无尽遐想。如今，借助现代科技的笔触，我们可以用SVG滤镜再现这幅经典画作，让静谧的荷塘在数字世界中重现光彩。

1. 搭建画布

首先，我们创建一个空白的SVG画布，设定画布大小和背景颜色，为荷塘月色勾勒出基本的框架。

<svg width="1000" height="800" viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#294c6f" />
</svg>

2. 绘制月亮

月亮是荷塘月色的灵魂所在。我们用三个圆形叠加，加上滤镜，打造出柔和的光晕效果。

<circle cx="300" cy="150" r="200" fill="#fffcf6" />
<circle cx="300" cy="150" r="150" fill="#fffbce" />
<circle cx="300" cy="150" r="100" fill="#fff8ac" />

3. 添加滤镜

接下来，我们为月亮添加滤镜，营造出发光的效果。滤镜的本质是通过数学运算对图像进行处理，这里我们使用高斯模糊、偏移和混合模式，打造出柔和的光晕。

<filter id="moonlight">
  <feGaussianBlur stdDeviation="20" />
  <feOffset dx="0" dy="0" />
  <feBlend mode="screen" in2="SourceGraphic" />
</filter>

4. 应用滤镜

现在，我们将创建的滤镜应用到月亮上。

<g filter="url(#moonlight)">
  <circle cx="300" cy="150" r="200" fill="#fffcf6" />
  <circle cx="300" cy="150" r="150" fill="#fffbce" />
  <circle cx="300" cy="150" r="100" fill="#fff8ac" />
</g>

5. 绘制荷叶

荷叶是荷塘月色的衬托，用椭圆形和蒙版，我们可以塑造出自然而有层次的荷叶效果。

<path d="M500 500 c 0 200 200 200 200 0" fill="#082743" />
<path d="M700 600 c 0 200 200 200 200 0" fill="#082743" />
<path d="M500 700 c 0 200 200 200 200 0" fill="#082743" />

6. 添加蒙版

为了让荷叶呈现出自然卷曲的形状，我们使用蒙版进行遮罩。

<mask id="leaf-mask">
  <path d="M500 500 c 0 200 200 200 200 0" fill="#000" />
</mask>

7. 应用蒙版

将蒙版应用到荷叶上。

<g mask="url(#leaf-mask)">
  <path d="M500 500 c 0 200 200 200 200 0" fill="#082743" />
</g>

8. 绘制水波

水波的涟漪让荷塘月色更显生动。我们用滤波器和动画，模拟出动态的水面效果。

<filter id="water-ripple">
  <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" />
  <feDisplacementMap in2="SourceGraphic" scale="5" />
</filter>

9. 添加动画

为水波添加动画，让它随时间流动。

<animate attributeName="xlink:href" values="url(#water-ripple)" dur="10s" repeatCount="indefinite" />

10. 完善细节

最后，通过微调滤镜参数、添加水草等细节，让荷塘月色的画面更加丰富。

结语

借助SVG滤镜，我们成功地再现了荷塘月色的经典画作。从月亮的光晕到荷叶的朦胧感，再到水波的涟漪，每一笔都凝聚着科技的魅力。希望这篇教程能激发你的创造力，让数字艺术在你的手中绽放出更多精彩。