Svelte Animations
Command Palette
Search for a command to run

Noise Texture

An SVG fractal noise layer using feTurbulence for subtle texture overlays.

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/noise-texture.json

Examples

Newsletter Example

The weekly digest

One email on Sundays—new components, tips, and changelog highlights. No spam, unsubscribe anytime.

Props

NoiseTexture

An SVG overlay that renders grayscale fractal noise using an internal filter.

NameTypeDefaultDescription
frequency
number 0.4 Base turbulence frequency; higher values produce finer grain.
octaves
number 6 Number of turbulence octaves used to add smaller-scale detail.
slope
number 0.15 Linear channel slope applied after desaturation to control contrast.
noiseOpacity
number 0.6 Opacity of the filtered rect that displays the noise texture.
class
string "" Additional classes applied to the root SVG element.