Narzędzie buduje wzór jako zwykły znacznik SVG, dzięki czemu wynik jest ostry przy każdym powiększeniu i gęstości ekranu, a przy tym waży zwykle kilkaset bajtów, znacznie mniej niż kafelek PNG. Skopiuj CSS, by wstawić powtarzające się background-image od razu do arkusza stylów, albo pobierz sam plik SVG jako osobny zasób. Nic z tego, co tworzysz, nie jest nigdzie wysyłane: wzór powstaje w całości na Twoim urządzeniu, więc działa nawet offline po wczytaniu strony.
Darmowy generator wzorów SVG
Działa w całości w przeglądarce - bez wysyłania plików i bez rejestracji.
Wzór
Styl
Pierwszy plan
Tło
Czym jest generator wzorów SVG?
Generator wzorów SVG tworzy powtarzające się tło z figur geometrycznych: kropek, linii, siatek czy zygzaków. Wybierasz kształt, kolory, rozmiar kafelka i grubość linii, a narzędzie zwraca maleńki plik SVG niezależny od rozdzielczości oraz gotowy do wklejenia kod CSS. Wszystko powstaje w przeglądarce, więc nic nie trafia na żaden serwer.
Jak korzystać
- 1Wybierz wzór. Wybierz kształt spośród próbek - kropki, pierścienie, siatka, ukos, kratka, plus, zygzak i inne.
- 2Ustaw kolory i kształt. Wybierz kolor pierwszego planu i tła (albo zrób tło przezroczyste), a następnie dostosuj suwaki rozmiaru, grubości i przezroczystości - podgląd aktualizuje się na bieżąco.
- 3Skopiuj lub pobierz. Przełącz się między zakładkami CSS i SVG, skopiuj kod albo pobierz samodzielny plik .svg do użycia gdziekolwiek.
Dla kogo
- Programiści stron www dodają subtelną, lekką teksturę tła do sekcji hero, karty lub bloku bez dokładania pliku graficznego.
- Projektanci UI i marek szybko testują bezszwowe tekstury w kolorach marki i eksportują je jako ostre pliki SVG.
- Twórcy e-maili i prezentacji potrzebują małego, kafelkowego wzoru, który wyświetli się ostro na każdym ekranie.
- Uczniowie i hobbyści uczą się, jak działa SVG
<pattern>i kafelkowanie tła w CSS, zmieniając wartości i czytając wynikowy kod. - Twórcy treści generują szybkie ozdobne tła do miniatur, banerów i makiet.
Najczęstsze pytania
Czy generator wzorów SVG jest darmowy?
Tak, jest całkowicie darmowy, bez rejestracji i bez limitów. Każdy wzór powstaje w przeglądarce, więc możesz tworzyć i kopiować ich dowolnie wiele, nawet offline po wczytaniu strony.
Czy te wzory SVG są naprawdę bezszwowe?
Tak. Każdy kształt jest narysowany tak, że jego krawędzie dokładnie łączą się z sąsiednim kafelkiem, a cały wzór powtarza się na stałej siatce. Zarówno background-image w CSS, jak i element <pattern> w SVG kafelkują tę samą komórkę krawędź w krawędź, bez widocznych szwów.
Kod CSS czy plik SVG - co wybrać?
CSS wklej od razu do arkusza stylów, gdy chcesz powtarzające się tło na stronie - to najszybsza opcja dla stron www. Plik SVG pobierz, gdy potrzebujesz samodzielnego zasobu, na przykład jako grafikę w narzędziu do projektowania albo osadzoną bezpośrednio w HTML.
Dlaczego wzór SVG zamiast PNG?
SVG jest wektorowy, więc pozostaje idealnie ostry przy każdym powiększeniu i gęstości ekranu, i nigdy się nie pikseluje. Geometryczny kafelek SVG waży zwykle tylko kilkaset bajtów, dużo mniej niż odpowiadający mu plik PNG, a kolory możesz zmieniać w dowolnym momencie bez ponownego eksportu.
Czy mogę zrobić przezroczyste tło?
Tak. Zaznacz opcję Przezroczyste, a wypełnienie tła zniknie, więc wzór pokaże tylko kształty pierwszego planu. Dzięki temu możesz nałożyć wzór na istniejący kolor, obraz lub gradient.
Czy mój projekt jest gdzieś wysyłany?
Nie. Cały wzór powstaje lokalnie w przeglądarce jako zwykły znacznik SVG i nic nie trafia na żaden serwer, więc Twoje kolory i ustawienia zostają prywatne na Twoim urządzeniu.