Softonic

Generator wzoru kropek SVG

Krok 1 / 3
Dalej

Wzory kropek to dyskretny koń roboczy nowoczesnych teł webowych, pomyśl o subtelnej kropkowanej siatce za stroną Notion, grochach na sekcji hero albo teksturze przypominającej ziarno na karcie. Ten generator buduje pojedynczy SVG z wbudowaną definicją <pattern>, więc plik pozostaje maleńki (zwykle poniżej 500 bajtów) i kafelkuje się idealnie w dowolnym rozmiarze. Kontrolujesz płótno, odstęp między kropkami, promień, kolor kropek i tło.

Jak zbudować wzór kropek

  1. 1

    Ustaw płótno

    Szerokość i wysokość w pikselach. Dla teł CSS może pozostać małe (np. 800×600) i być kafelkowane.

  2. 2

    Wybierz odstęp

    Odległość między środkami sąsiednich kropek. 20-40 px wygląda czysto; 10 px robi się gęsto.

  3. 3

    Ustaw promień kropki

    1-3 px dla subtelnej tekstury, 4-8 px dla wyraźnych grochów.

  4. 4

    Wybierz kolory

    Wypełnienie kropki (pierwszy plan) i tło płótna. Ustaw tło na `transparent` dla prawdziwego wzoru nakładkowego.

  5. 5

    Skopiuj SVG

    Wklej do HTML albo użyj jako `background-image: url("data:image/svg+xml,...")` w CSS.

Jak zdefiniowany jest wzór

Generator zwraca element <pattern> wewnątrz <defs> i wypełnia pełnopłótnowy <rect> za pomocą fill="url(#dots)":

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" blokuje rozmiar kafelka w pikselach, więc skalowanie nadrzędnego SVG nie zniekształca kropek.

Ściąga dostrajania wzoru

Wygląd Odstęp Promień Kontrast
Szept (ledwo widoczny) 30-40 1-1.5 5-10% krycia
Subtelne tło 25-30 2 15-20% krycia
Uczciwy wzór kropek 20 2-3 Pełny kolor
Wyraźne grochy 40-60 8-15 Pełny kolor
Efekt półtonu 10 1 Wypełnienie gradientem

Użycie jako tła CSS

Zakoduj SVG jako data URL i zastosuj na dowolnym elemencie:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

Kafelkowanie SVG przez CSS jest szybsze niż wysyłanie PNG, przeglądarka rasteryzuje je w docelowym rozmiarze wyświetlania, więc pozostaje ostre na każdym DPR (ekrany 1x, 2x, 3x).

Kiedy kropki szkodzą czytelności

Wzór kropek bezpośrednio za tekstem głównym może tworzyć migoczący mora na tle drobnego tekstu. Jeśli musisz umieścić na nim tekst, albo:

  • Zwiększ odstęp do 40+ px, aby kropki wpadały między linie, albo
  • Obniż krycie wzoru poniżej 10%, albo
  • Umieść tekst w pełnej karcie nad wzorem.

Najczęściej zadawane pytania

Ustaw kolor tła na transparent, a wtedy jedynym malowaniem są same kropki. Umieść SVG nad dowolnym kolorem lub obrazem, który chcesz prześwietlić.

Nie tym generatorem, produkuje on siatkę kwadratową. Dla układu heksagonalnego potrzebujesz kafelka wzoru o wysokości sqrt(3) razy większej niż szerokość, z dwoma kółkami na kafelek przesuniętymi o połowę. Rozważ kreator ścieżek SVG albo dedykowany generator heksagonalny.

Sam SVG jest ostry w dowolnym rozmiarze, ale jeśli zrasteryzujesz go w rozdzielczości mniejszej niż kafelek wzoru, dostaniesz aliasing. Eksportuj w 2x lub 3x zamierzonego rozmiaru wyświetlania.

Zastąp fill="#hex" na kółku przez fill="url(#gradient-id)" i dodaj definicję <linearGradient> wewnątrz tego samego <defs>. Każda kropka wyrenderuje się wtedy z tym gradientem, co może być kosztowne, jeśli płótno ma tysiące kropek.

Zwykły edytor wysyła obszar, odstęp, promień i kolory do serwera, aby wyrenderować podgląd. W trybie prowadzonym te ustawienia pojawiają się także w adresie URL strony. Nie wpisuj poufnych informacji; narzędzie nie zapisuje projektu wzoru do ponownego użycia.

Powiązane narzędzia

Próbnik kolorów Material Design

Przeglądaj paletę kolorów Material Design. Kopiuj dowolny odcień (od 50 do A700) w formacie HEX, RGB lub HSL jednym dotknięciem.

Generator papieru w kratkę

Twórz papier w kratkę do druku online: wybierz siatkę lub kropki, ustaw odstęp w mm, wybierz A4 lub Letter oraz własny kolor linii, a następnie wydrukuj lub pobierz czytelny plik SVG.

Generator napisów graffiti

Twórz napisy graffiti w stylu tag, bubble, block, stencil, neon i wild. Dobierz kolory i wyeksportuj PNG lub SVG bezpośrednio w przeglądarce.

Kreator flag

Zaprojektuj w przeglądarce prostą własną flagę 3:2 z sześcioma układami, kolorami, tekstem i symbolem. Pobierz SVG lub PNG albo otwórz okno drukowania przeglądarki.

Generator papieru w linie

Twórz papier w linie do druku za darmo. Wybierz linie szerokie, standardowe lub wąskie, ustaw odstęp między liniami w mm, format strony i linię marginesu, a następnie wydrukuj lub pobierz plik SVG.

Kreator wzorów haftu krzyżykowego

Zamień plik JPEG, PNG lub WebP w schemat haftu krzyżykowego: 10–150 krzyżyków, 2–40 własnych kolorów, symbole, dokładne liczby ściegów i wymiary kanwy.

Narzędzie jest dostępne w innych językach