Generator tekstury szumu: ziarno SVG do teł CSS | We.Inc
Stwórz teksturę ziarna filmowego lub szumu papieru za pomocą SVG feTurbulence. Ustaw częstotliwość, oktawy, seed i krycie, podejrzyj ją na gradiencie i skopiuj SVG lub data URL do CSS.
Tekstura szumu to losowe drobinki nałożone na płaski kolor lub gradient, aby wyglądał jak wydrukowany, a nie cyfrowy. W przeglądarce możesz ją stworzyć w ogóle bez pliku obrazu: filtr SVG feTurbulence generuje szum Perlina z częstotliwości, liczby oktaw i seeda. Dostrój go poniżej i skopiuj kilkaset bajtów kodu.
Atrybuty feTurbulence (wartości domyślne według MDN)
Atrybut
Co robi
Domyślnie
baseFrequency
Rozmiar drobinek; wyższe liczby dają drobniejsze ziarno. Jedna liczba albo osobne wartości x i y
numOctaves
Warstwy szczegółów nakładane jedna na drugą; więcej to bogatszy efekt i wolniejsze renderowanie
fractalNoise (miękki, chmurkowy) lub turbulence (ostrzejszy, falisty)
Liczba początkowa losowego wzoru; zmień ją, aby uzyskać inny układ
stitchTiles
stitch wygładza krawędzie, aby powtarzane kafelki łączyły się bez szwów
noStitch
Ziarno zdejmuje plastikowy wygląd z dużych gradientów i zapobiega pasmowaniu kolorów na szerokich tłach w sekcji hero. Kafelek ziarna w PNG dodaje pobieranie i rozmywa się przy skalowaniu, a filtr SVG to malutki tekst, który renderuje się ostro w każdym rozmiarze. Dostosuj suwaki i obserwuj teksturę na przykładowym gradiencie.
Wybierz fractal noise dla miękkiego ziarna filmowego lub turbulence dla bardziej szorstkiego, marmurkowego wyglądu.
Zwiększ częstotliwość dla drobniejszego ziarna i dodaj oktawy dla większej liczby szczegółów. Zmień seed, aby uzyskać inny losowy układ.
Ustaw siłę ziarna na przykładowym gradiencie i wybierz, czy ma zachować kolor, czy stać się szare.
Skopiuj plik SVG albo CSS, który osadza go jako tło w data URL.
Dla subtelnego ziarna na gradiencie trzymaj krycie tekstury między 0.1 a 0.3. Wyższe wartości zaczynają wyglądać na brud.
Częstotliwość około 0.6 do 0.9 z fractal noise wygląda jak ziarno filmowe przy zwykłych rozmiarach ekranu.
Zmień szum na szary, chyba że chcesz kolorowych drobinek; feTurbulence tworzy kolorowy szum w każdym kanale.
Duże filtrowane obszary kosztują czas renderowania. Nałożenie ziarna jako obrazu tła ze stałego kafelka jest tańsze niż filtrowanie na żywo elementu na cały ekran.
Najczęściej zadawane pytania
Czym jest feTurbulence?
To prymityw filtra SVG, który tworzy obraz z funkcji szumu Perlina. Nie potrzebuje obrazu wejściowego, więc jeden element filter w SVG może namalować całą teksturę. Według MDN przeglądarki szeroko go obsługują od 2015 roku.
Czym różni się fractalNoise od turbulence?
fractalNoise płynnie miesza swoje oktawy i wygląda jak miękkie chmury lub ziarno filmowe. turbulence używa wartości bezwzględnych szumu, co tworzy ostrzejsze grzbiety, bliższe marmurowi, dymowi lub zmarszczkom na wodzie.
Jak dodać ziarno do gradientu CSS?
Nałóż dwa tła: SVG z szumem jako data URL na wierzchu i gradient pod spodem, albo umieść szum na warstwie ::before z niskim kryciem i trybem mieszania, takim jak overlay lub soft-light. Przykład na tej stronie pokazuje wersję z pseudoelementem.
Czy tekstura będzie się powtarzać bez szwów?
Ustaw stitchTiles na stitch. Przeglądarka nieznacznie dostosuje wtedy częstotliwość, aby wzór mieścił się w całkowitej liczbie kafelków, co usuwa widoczne łączenie w miejscach styku kopii.
Jak liczby przekładają się na to, co widzisz
baseFrequency mierzy się w cyklach szumu na piksel obszaru filtra, więc 0.05 daje duże plamy, a 0.9 drobinki wielkości kurzu. Dwie liczby rozciągają szum, co przydaje się przy szczotkowanym metalu lub słojach drewna.
Każda dodatkowa oktawa dodaje drobniejszą warstwę o podwójnej częstotliwości i połowie siły. Powyżej czterech lub pięciu zmiana jest trudna do zauważenia, ale praca dla silnika renderującego wciąż rośnie.
Jak sprawić, by ziarno dobrze wyglądało na stronie
Ziarno działa najlepiej jako cicha warstwa. Mieszaj je przez overlay lub soft-light, aby rozjaśniało jasne partie i przyciemniało ciemne, zamiast szarzyć wszystko.
Po dodaniu tekstury sprawdź kontrast tekstu. Drobinki za małym tekstem mogą utrudniać czytanie, więc wyraziste ziarno zostaw dla teł i sekcji hero.
Ziarno na karcie z gradientem
Warstwa szumu z trybem mieszania
SVG maluje szary szum na kafelku 200 pikseli. Warstwa ::before powtarza go z niskim kryciem i miesza z gradientem.
Ta sama tekstura jako osobny plik SVG
Zapisz to jako grain.svg i użyj z background-image: url(grain.svg). Macierz kolorów zmienia szum na szary.
Studio ziarna
Każda zmiana renderuje filtr SVG na żywo na przykładowym gradiencie. Nic nie jest wysyłane; teksturę rysuje Twoja przeglądarka.