VisualJul 2024

Generative Noise Textures

SVG filter experiments for adding organic texture to flat designs

Tools

SVG, CSS, Figma

Type

Visual

Concept

Exploring SVG filters (feTurbulence, feDisplacementMap) to add grain, paper, and organic textures to vector graphics and UI elements.

Process

Created a library of reusable SVG filter presets: film grain, paper texture, watercolor bleed, and subtle noise. Each filter is customizable via CSS custom properties for easy theming.

Code

<filter id="grain">
  <feTurbulence
    type="fractalNoise"
    baseFrequency="0.8"
    numOctaves="4"
    result="noise"
  />
  <feBlend
    in="SourceGraphic"
    in2="noise"
    mode="multiply"
  />
</filter>

Gallery

Learnings

SVG filters are GPU-accelerated and surprisingly performant
feTurbulence seed values should be randomized for variety
Combining multiple filter primitives creates rich, layered textures

Variable Font Playground