SVG Filter Effects: Creating Texture with <FeTurbulence>
11 hours ago
- #Perlin noise effects
- #feTurbulence tutorial
- #SVG filters
- The feTurbulence filter primitive generates Perlin noise for simulating natural textures like clouds, fire, smoke, marble, or granite.
- feTurbulence has five main attributes: type (turbulence or fractalNoise), baseFrequency (controls size/grain), numOctaves (detail level), seed (random generator start), and stitchTiles (smooths tile borders).
- baseFrequency affects noise scale; lower values create larger patterns, higher values create smaller ones. It can have two values for x and y axes to produce directional noise.
- type determines noise pattern: turbulence creates ripples for liquid textures, while fractalNoise is smoother for gas-based textures like clouds.
- numOctaves adds detail; higher values increase complexity, but effects plateau around numOctaves=5.
- seed and stitchTiles control continuity across adjacent noise tiles, useful for seamless patterns.
- feTurbulence-generated noise can be used with feDisplacementMap to distort SVG or HTML content, such as images or text, and can be animated for interactive effects.
- Examples include button click distortion effects and squiggly text animations using multiple filters and CSS keyframes.
- feTurbulence can simulate natural textures like rough paper when combined with SVG lighting effects (feDiffuseLighting or feSpecularLighting) and light sources (feDistantLight, fePointLight, feSpotLight).
- Lighting effects use the noise's alpha channel as a bump map to create depth, with attributes like surfaceScale controlling steepness and lighting-color defining light color.