Przejdź do treści
TextArray1.87.0
100% lokalnie

Generator wzoru tła SVG

Stwórz bezszwowy wzór tła SVG — kropki, siatkę, paski, fale, kwadraty, sześciokąty lub topografię — jako SVG, CSS lub klasę Tailwind.

24
2
100
0
Wynik
Powiązane narzędzia
Koder URL SVGNarzędzia dla programistów
Generator obrazów zastępczychnoweNarzędzia dla programistów
Generator gradientów CSSNarzędzia dla programistów
Generator tekstów LRCGeneratory
Przetestuj generator IBANGeneratory
Generator losowych nazwGeneratory
Generator wzoru tła SVG
Wybierz motyw — kropki, siatkę, paski skośne, fale, kwadraty, sześciokąty lub topografię — a to narzędzie utworzy bezszwowy wzór SVG, który możesz wstawić bezpośrednio do tła strony internetowej, ekranu aplikacji lub drukowanego projektu. Wzór zbudowany jest z jednego powtarzającego się kafelka, więc plik pozostaje mały niezależnie od wielkości obszaru, który obejmuje.
Rozmiar kafelka kontroluje odstęp między powtórzeniami, a grubość linii kontroluje, jak pogrubione są pociągnięcia — dla kropek i kwadratów ustawia również ich rozmiar. Kolor pierwszego planu i tła akceptują dowolny kolor szesnastkowy (#RRGGBB lub krótszą formę #RGB), przezroczystość zanika motyw w jego tło bez zmiany samego koloru tła, a rotacja obraca cały kafelek — paski skośne już zaczynają się pod kątem 45° i dalej się obracają. Przełącz format wyjścia, aby uzyskać dokładnie to, czego potrzebujesz: czysty kod SVG do zapisania jako plik, gotową regułę CSS z osadzonym wzorem jako data URI, lub klasę Tailwind z arbitralną wartością, którą możesz wstawić bezpośrednio na listę klas elementu.
Każda opcja natychmiast aktualizuje podgląd w miarę jego dostosowania, a licznik pod wyjściem pokazuje wymiary kafelka, dokładną liczbę znaków wygenerowanego kodu i aktywny format wyjścia. Ponieważ wzór to jeden mały wektor kafelka zamiast bitmapy, pozostaje ostry na dowolnym poziomie powiększenia i bez dodatkowych kosztów skaluje się do dowolnego rozmiaru ekranu.
Wszystko działa lokalnie w Twojej przeglądarce — nic, co tu projektujesz, nigdy nie opuszcza Twojego urządzenia. Gdy będziesz zadowolony z wyniku, skopiuj go, pobierz jako plik .txt lub prześlij wyjście z powrotem do wejścia, aby kontynuować jego ulepszanie.
Częste pytania
Czy wzór będzie bezszwowo się powtarzał w dowolnym rozmiarze?
Tak. Każdy motyw jest zbudowany jako pojedyncza powtarzająca się dlaždica SVG, więc idealnie się łączy niezależnie od wielkości elementu za nią — nie ma stałego rozmiaru kanwy do przekroczenia.
Jaka jest różnica między trzema formatami wyjścia?
Czyste SVG to surowy kod, przydatny jako samostatny plik lub wbudowany element. CSS daje ci gotową regułę background-image ze wzorem osadzonym jako data URI. Tailwind daje ten sam data URI zawinięty jako klasę arbitralnej wartości, którą możesz wrzucić bezpośrednio do listy klas elementu.
Dlaczego grubość linii zmienia rozmiar kropek i kwadratów?
Te dwie motywy są wypełnione kształty, a nie narysowane pociągnięcia, więc ta sama kontrola, która grubości linii gdzie indziej, się podwaja jako rozmiar kształtu — utrzymuje jeden suwak sensowny dla każdego motywu zamiast dodawania oddzielnej opcji rozmiaru dla motywu.
Czy mogę użyć trzycyfrowego koloru szesnastkowego takiego jak #f00?
Tak, formaty #RGB i #RRGGBB są akceptowane dla kolorów pierwszego planu i tła.
Czy moja konfiguracja wzoru jest wysyłana gdzieś?
Nie. Wzór jest generowany całkowicie w twoim przeglądarce — nic o motywach, kolorach lub wyjściu, które wybierzesz, nigdy nie opuszcza twoje urządzenie.