Generator wzorów tła CSS

Większość narzędzi typu „generator wzorów” po cichu wykorzystuje ten sam wzór repeating-linear-gradient dla każdej opcji i zmienia tylko liczby. Ten jest inny: każdy z sześciu typów wzorów powstaje przy użyciu konkretnej techniki CSS, która rzeczywiście tworzy dany kształt. Paski wykorzystują pojedynczy repeating-linear-gradient z dwoma pasmami koloru. Kropki używają jednego radial-gradient, kafelkowanego wyłącznie za pomocą background-size – klasyczna sztuczka z kropkami w CSS – zamiast repeating-radial-gradient, który nie potrafi czysto kafelkować okrągłej kropki na prostokątnej siatce. Szachownica używa prawdziwego wzoru 4-ćwiartkowego conic-gradient: gradient stożkowy wyśrodkowany w kwadratowej kafelce naturalnie dzieli się na cztery kwadraty w ćwiartkach na granicach 90 stopni, a naprzemienne stosowanie dwóch kolorów w tych ćwiartkach tworzy autentyczną szachownicę, a nie jej przybliżenie.

Siatka i ukośne kreskowanie nakładają dwa repeating-linear-gradients jako osobne wpisy background-image, zamiast udawać drugi kierunek sztuczkami z obramowaniem. Siatka łączy gradienty „w prawo” i „w dół”, aby uzyskać ostre poziome i pionowe linie. Kreskowanie nakłada gradienty powtarzalne pod kątem +45° i -45°, tworząc ukośny splot przypominający plecionkę – warto być precyzyjnym: jest to uczciwe kreskowanie, a nie prawdziwa geometria jodełki, i narzędzie nazywa to właśnie w ten sposób, bez przesady. Trójkąty wykorzystują tę samą technikę czterech klinów conic-gradient co szachownica, ale gradient jest obrócony o 45 stopni, co przesuwa granice klinów ze środków krawędzi kafelki do jej rogów i zamienia te same cztery kliny w cztery trójkąty od rogu do rogu, zamiast czterech kwadratów w ćwiartkach.

Każdy typ wzoru udostępnia tylko te kontrolki, które faktycznie mają do niego zastosowanie – suwak kąta pojawia się dla pasków, promień kropki i odstępy dla kropek, grubość linii dla siatki i kreskowania – a duże okno podglądu kafelkowego odświeża się przy każdej zmianie, dzięki czemu możesz zobaczyć kilka pełnych powtórzeń, zanim zatwierdzisz wartość. Przełącz tryb wyjściowy na SVG, a ten sam wzór pojawi się ponownie jako element <pattern> zbudowany z prostych prymitywów rect, circle, path lub polygon, gotowy do wklejenia do sekcji <defs> dowolnego dokumentu SVG, z możliwością pobrania samodzielnego pliku .svg jednym kliknięciem.

Wszystko działa lokalnie w Twojej przeglądarce: bez przesyłania obrazów, bez komunikacji z serwerem, bez konta. Do jednolitych wypełnień lub gradientów bez powtarzania odpowiednim narzędziem jest generator gradientów CSS na tej stronie; to narzędzie służy wyłącznie do kafelkowanych tł geometrycznych tworzonych bez użycia jakichkolwiek obrazów.