SVG Filter Effects: Creating Texture with <FeTurbulence>
a day ago
- #Perlin noise effects
- #feTurbulence tutorial
- #SVG filters
- feTurbulence滤镜原语生成Perlin噪声，用于模拟云、火、烟、大理石或花岗岩等自然纹理。
- feTurbulence有五个主要属性：type（湍流或分形噪声）、baseFrequency（控制尺寸/颗粒度）、numOctaves（细节层级）、seed（随机生成器起始值）和stitchTiles（平滑拼接边界）。
- baseFrequency影响噪声的尺度；值越低生成越大的图案，值越高生成越小的图案。可为x轴和y轴设置两个值以生成方向性噪声。
- type决定噪声模式：湍流（turbulence）创建涟漪状纹理，适用于液体质感；分形噪声（fractalNoise）则更平滑，适用于云等气体质感纹理。
- numOctaves增加细节；值越高复杂度越高，但效果在numOctaves=5左右趋于稳定。
- seed和stitchTiles控制相邻噪声拼贴的连续性，适用于创建无缝图案。
- feTurbulence生成的噪声可与feDisplacementMap结合使用，以扭曲SVG或HTML内容（如图像或文本），并可制作动画实现交互效果。
- 示例包括按钮点击扭曲效果和使用多个滤镜及CSS关键帧的波浪文字动画。
- feTurbulence配合SVG光照效果（feDiffuseLighting或feSpecularLighting）和光源（feDistantLight、fePointLight、feSpotLight）可模拟粗糙纸张等自然纹理。
- 光照效果利用噪声的Alpha通道作为凹凸贴图来创建深度感，其中surfaceScale等属性控制坡度，lighting-color定义光照颜色。