Dziesięć bezszwowych wzorów tła SVG: kropki, siatka, fale, sześciokąty i inne. Ustaw rozmiar, grubość linii, kolory, krycie i kąt, a potem skopiuj CSS lub SVG z elementem pattern.
Wybierz jeden z dziesięciu kształtów kafelka, ustaw rozmiar kafelka, grubość linii, kolory, krycie i kąt, i otrzymaj bezszwowe tło SVG. Skopiuj je jako data URL dla CSS background-image, który powtarza się na dowolnym elemencie, albo jako plik SVG oparty na elemencie pattern do użycia w grafice; oba są rysowane i podglądane w Twojej przeglądarce.
Kafelek SVG czy wzór z gradientów CSS?
Potrzeba
Sięgnij po
Dlaczego
Krzywe, sześciokąty, fale, plusy
Kafelek SVG (to narzędzie)
Każdy kształt, jaki potrafi narysować SVG
Proste paski, kropki, kratka
Gradienty CSS
Bez żadnego obrazu, zobacz generator tła CSS
Wzór wewnątrz ilustracji SVG
Element <pattern>
Wypełnia dowolny kształt SVG
Sztuczki z gradientami narysują paski i kropki, ale mają problem z falami, sześciokątami i konturami. Mały kafelek SVG narysuje wszystko, pozostaje ostry przy każdym powiększeniu, a jako data URL nie dodaje stronie żadnego dodatkowego żądania.
Wybierz wzór. Podgląd wypełnia duży panel, żeby ocenić teksturę w rzeczywistej skali.
Dostosuj rozmiar kafelka i grubość linii lub promień kropki, a potem wybierz kolor wzoru i tła.
Zmniejsz krycie wzoru, aby uzyskać subtelną teksturę, i ustaw kąt, jeśli chcesz obrócić kafelki.
Skopiuj CSS dla tła, pojedynczy kafelek SVG albo pełny SVG z elementem pattern.
Tekstury tła powinny szeptać. Krycie wzoru między 0.1 a 0.25 na zabarwionym tle rzadko gryzie się z tekstem.
Dopasuj rozmiar kafelka do skali odstępów, na przykład 16, 24 lub 32 piksele, aby linie pokrywały się z siatką układu.
Gdy obracasz wzór, narzędzie przełącza się na formę z elementem pattern, bo obrócony pojedynczy kafelek nie łączyłby się już bez szwów.
Umieszczaj wzory na kontenerze lub pseudoelemencie za treścią, żeby zmieniać je lub usuwać w jednym miejscu.
Najczęściej zadawane pytania
Po co kodować # i < w data URL?
W URL znak # rozpoczyna fragment i ucina obraz, a niektóre parsery odrzucają surowe nawiasy ostre. Zakodowanie ich jako %23, %3C i %3E zachowuje SVG w całości. Cudzysłowy podwójne zamieniają się na pojedyncze, aby ciąg zmieścił się w url("...").
Co robi patternUnits="userSpaceOnUse"?
Mierzy szerokość i wysokość kafelka w tych samych jednostkach co rysunek, więc kafelek 24 ma 24 piksele szerokości wszędzie, gdzie go użyjesz. Domyślna wartość, objectBoundingBox, ustala rozmiar kafelków jako ułamki wypełnianego kształtu.
Czy mogę użyć wzoru w Tailwind?
Tak. Dodaj regułę CSS do arkusza stylów jako klasę albo użyj dowolnych wartości, takich jak bg-[url(...)] z data URL. Klasa jest czytelniejsza, gdy URL jest długi.
Czy te wzory są darmowe?
Tak. Każdy kafelek jest rysowany z prostych kształtów przez kod na tej stronie, więc wynik należy do Ciebie i nie wymaga podawania źródła.
Jak działa bezszwowy kafelek
Kafelek powtarza się krawędź w krawędź, więc wszystko, co wychodzi z prawej strony, musi wrócić z lewej. Wzór ukośny na przykład rysuje dodatkowe krótkie odcinki w dwóch narożnikach, aby linie przechodziły przez granice kafelków bez przerwy.
Linie wyśrodkowane na krawędzi kafelka, jak w siatce, są przez kafelek przecinane na pół. Dwa sąsiednie kafelki składają się wtedy w jedną linię pełnej grubości, dlatego siatka wygląda równo.
Dwa sposoby użycia
Do teł najprostszy jest data URL w CSS: jedna reguła, żadnego pliku do hostowania, a background-size kontroluje skalę. Przeglądarka dekoduje kafelek raz i go powtarza.
Wewnątrz ilustracji SVG zdefiniuj pattern w defs i wypełniaj kształty przez url(#id). patternTransform może obrócić lub przeskalować cały wzór bez przerysowywania.
Atrybuty pattern w SVG
Atrybuty elementu pattern używane przez generator
Atrybut
Domyślnie
Co robi
width / height
Rozmiar jednego kafelka; wartość 0 nic nie rysuje
patternUnits
objectBoundingBox
Jednostki dla x, y, width, height; to narzędzie używa userSpaceOnUse
patternContentUnits
userSpaceOnUse
Jednostki dla kształtów wewnątrz kafelka
patternTransform
brak (tożsamość)
Obraca, skaluje lub pochyla cały wzór
Przesuwa miejsce, w którym zaczyna się pierwszy kafelek
Wzór jako tło CSS
Tekstura z konturów sześciokątów za kartą
Kafelek sześciokąta 28 pikseli przy połowie krycia. Zmień background-size, aby przeskalować teksturę.
Ten sam kafelek z elementem pattern
Używaj tego w grafice inline SVG. Każdy kształt może przyjąć fill="url(#p)".
Groszki
Siatka milimetrowa
Linie ukośne
Plusy
Zygzak
Fale
Trójkąty
Szachownica
Pierścienie
Sześciokąty
Generator wzorów
Wzory: Groszki, Siatka milimetrowa, Linie ukośne, Plusy, Zygzak, Fale, Trójkąty, Szachownica, Pierścienie, Sześciokąty. Ustaw rozmiar, grubość linii, kolory, krycie i kąt, a potem skopiuj CSS lub SVG.