Generator voor ruistexturen: SVG-grain voor CSS-achtergronden | We.Inc
Maak een filmgrain- of papierruistextuur met SVG feTurbulence. Stel frequentie, octaven, seed en dekking in, bekijk het resultaat over een kleurverloop en kopieer de SVG of een CSS-data-URL.
Een ruistextuur is willekeurig spikkelwerk over een egale kleur of een kleurverloop, zodat het er gedrukt uitziet in plaats van digitaal. In de browser maakt u die zonder enig afbeeldingsbestand: het SVG-filter feTurbulence genereert Perlin-ruis uit een frequentie, een aantal octaven en een seed. Stem het hieronder af en kopieer een paar honderd bytes code.
Attributen van feTurbulence (standaardwaarden volgens MDN)
Attribuut
Wat het doet
Standaard
baseFrequency
Grootte van de spikkels; hogere getallen geven fijnere grain. Eén getal, of aparte x- en y-waarden
numOctaves
Lagen detail die op elkaar worden gestapeld; meer is rijker en trager
fractalNoise (zacht, wolkachtig) of turbulence (scherper, golvend)
Startgetal voor het willekeurige patroon; verander het voor een andere indeling
stitchTiles
stitch maakt de randen glad zodat herhaalde tegels zonder naden aansluiten
noStitch
Grain haalt de plastic look van grote kleurverlopen en voorkomt kleurbanding op brede hero-achtergronden. Een PNG-grain-tegel kost een extra download en wordt wazig bij schalen, terwijl een SVG-filter piepkleine tekst is die op elk formaat scherp rendert. Verschuif de schuifregelaars en bekijk de textuur over een voorbeeldverloop.
Kies fractal noise voor zachte filmgrain of turbulence voor een ruwere, gemarmerde look.
Verhoog de frequentie voor fijnere grain en voeg octaven toe voor meer detail. Verander de seed voor een andere willekeurige indeling.
Stel de sterkte van de grain over het voorbeeldverloop in en kies of die kleur houdt of grijs wordt.
Kopieer het SVG-bestand, of de CSS die het als data-URL-achtergrond insluit.
Houd de dekking van de textuur voor subtiele grain over een kleurverloop tussen 0.1 en 0.3. Hogere waarden gaan er vies uitzien.
Een frequentie rond 0.6 tot 0.9 met fractal noise oogt als filmgrain op normale schermformaten.
Maak de ruis grijs, tenzij u gekleurde spikkels wilt; feTurbulence maakt kleurruis in elk kanaal.
Grote gefilterde vlakken kosten rendertijd. De grain als achtergrondafbeelding van een vaste tegel toepassen is goedkoper dan een element over het hele scherm live filteren.
Veelgestelde vragen
Wat is feTurbulence?
Het is een SVG-filterprimitief dat een afbeelding maakt uit de Perlin-ruisfunctie. Er is geen invoerafbeelding nodig, dus één filterelement in een SVG kan een hele textuur schilderen. Browsers ondersteunen het volgens MDN al sinds 2015 breed.
Wat is het verschil tussen fractalNoise en turbulence?
fractalNoise mengt zijn octaven vloeiend en lijkt op zachte wolken of filmgrain. turbulence gebruikt absolute waarden van de ruis, wat scherpere ruggen geeft, meer als marmer, rook of rimpelingen in water.
Hoe voeg ik grain toe aan een CSS-kleurverloop?
Stapel twee achtergronden: de ruis-SVG als data-URL bovenop en het verloop eronder, of zet de ruis op een ::before-laag met lage dekking en een blend mode zoals overlay of soft-light. Het voorbeeld op deze pagina toont de versie met een pseudo-element.
Tegelt de textuur zonder naden?
Zet stitchTiles op stitch. De browser past de frequentie dan iets aan zodat het patroon in een heel aantal tegels past, wat de zichtbare naad wegneemt waar kopieën elkaar raken.
Hoe de getallen samenhangen met wat u ziet
baseFrequency wordt gemeten in ruiscycli per pixel van het filtervlak, dus 0.05 geeft grote vlekken en 0.9 spikkels zo klein als stof. Twee getallen rekken de ruis uit, handig voor geborsteld metaal of houtnerf.
Elk extra octaaf voegt een fijnere laag toe met de dubbele frequentie en de halve sterkte. Na vier of vijf is het verschil nauwelijks te zien, maar het werk voor de renderer blijft groeien.
Grain mooi laten ogen op een site
Grain werkt het best als rustige laag. Meng het met overlay of soft-light, zodat het lichte delen lichter en donkere delen donkerder maakt in plaats van alles grijs te maken.
Controleer na het toevoegen van textuur het contrast van uw tekst. Spikkels achter kleine letters kunnen die lastiger leesbaar maken, dus houd drukke grain bij achtergronden en hero-vlakken.
Grain op een kaart met kleurverloop
Ruislaag met een blend mode
De SVG schildert grijze ruis in een tegel van 200 pixels. De ::before-laag herhaalt die met lage dekking en mengt hem met het verloop.
Dezelfde textuur als los SVG-bestand
Sla dit op als grain.svg en gebruik het met background-image: url(grain.svg). De kleurmatrix maakt de ruis grijs.
Grain-studio
Elke wijziging rendert het SVG-filter live opnieuw over het voorbeeldverloop. Er wordt niets geüpload; de textuur wordt door uw browser getekend.