Noise Texture Generator
Genereer SVG-gebaseerde ruis- en korreltexturen als CSS-achtergrondpatronen. Tegelbaar, pure CSS, geen afbeeldingen nodig.
① Kies textuurtype en frequentie ② Pas octaven en dekking aan ③ Kopieer de CSS
#1A1714
.noise-bg {
background-color: #1a1714;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'noise'%3E%3CfeTurbulence%20type%3D'turbulence'%20baseFrequency%3D'0.65'%20numOctaves%3D'4'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'200'%20height%3D'200'%20filter%3D'url(%23noise)'%20opacity%3D'0.30'%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}Wat zijn SVG-ruistexturen en hoe gebruik je ze in CSS?
SVG-ruistexturen zijn procedureel gegenereerde patronen met het SVG-filter feTurbulence. Ze kunnen worden ingebed als data:-URI direct in CSS. baseFrequency regelt de granulariteit. Het type turbulence creëert wolkachtig ruis, terwijl fractalNoise zachtere, organischere korrelpatronen genereert.
Veelgestelde vragen
feTurbulence is een SVG-filterprimitief die procedureel ruis genereert met het Perlin-noise-algoritme. Twee typen: turbulence (wolkachtig) en fractalNoise (zachter, organischer).
baseFrequency regelt de schaal van het ruispatroon. Lage waarden (0.50–0.65) = grof, zacht ruis. Hoge waarden (0.80–0.90) = fijne korrel, vergelijkbaar met filmkorrel.
Ruis: turbulence met standaardfrequentie. Korrel: fractalNoise — zachter, organischer. Grind: turbulence bij hogere frequentie (1.5x) — grovere, korrelige textuur.
Elke octaaf voegt een detaillaag toe bij hogere frequentie. 1 octaaf = eenvoudig ruis. 3–4 octaven = natuurlijke, complexe textuur. 5 octaven = zeer gedetailleerde korrel.
Ja. Het attribuut stitchTiles='stitch' in het SVG-filter zorgt ervoor dat het ruispatroon naadloos tegelt.
SVG data-URI's worden verwerkt door de GPU als filterbewerkingen, dus over het algemeen lichtgewicht. Gebruik ruis als statisch background-image voor de beste prestaties.
Pas het ruis toe als tweede background-image-laag: background-image: url('data:...'), linear-gradient(...).