Generator wzorów SVG

Generator wzorców SVG tworzy powtarzające się, kafelkowane tła poprzez definiowanie elementu SVG <pattern> wypełnionego pojedynczym powtarzającym się kształtem. Oferuje sześć typów kształtów (koła, kwadraty, trójkąty, linie, krzyże, romby) rysowane jako prymitywy konturowe, następnie kafelkuje je na podglądzie 200x200 i eksportuje pełne znaczniki SVG do użycia na stronach internetowych, w tłach CSS lub plikach projektowych.

1. Wybierz Typ wzorca spośród sześciu opcji przycisków. 2. Dostosuj suwak Rozmiaru (od 10 do 60px), aby ustawić zarówno wymiary kafelka, jak i skalę kształtu. 3. Dostosuj suwak Grubość obrysu (od 0,5 do 6,0). 4. Użyj Obrót (od 0 do 360 stopni, w krokach co 5 stopni), aby obrócić kafelek przez patternTransform. 5. Ustaw Kolor kształtu i Kolor tła, używając dwóch próbek koloru. 6. Kliknij Kopiuj, aby skopiować wygenerowany SVG do schowka.

Eksportowany SVG ma rozmiar 200x200 z blokiem <defs><pattern> używającym patternUnits="userSpaceOnUse". Szerokość i wysokość wzorca są równe wartości Rozmiaru, więc każdy kafelek powtarza się w siatce o tym rozmiarze. Najpierw rysowany jest tło <rect> wypełniony kolorem tła, a następnie drugi <rect> wypełniony url(#pat) nakłada kafelki. Gdy Obrót jest różny od zera, obrót jest stosowany zarówno jako patternTransform na wzorcu, jak i jako transformacja rotate() na samym kształcie.