Generator blobów

Organiczne bloby SVG w kilka sekund

Bloby to miękkie, nieregularne kształty, które widać za sekcjami hero, zdjęciami profilowymi, ilustracjami i ekranami wprowadzającymi w aplikacjach. Przełamują sztywne siatki prostokątów i nadają układowi przyjazny, ręcznie tworzony charakter. Ten generator blobów tworzy je jako czyste ścieżki SVG: wybierz kilka parametrów, obserwuj aktualizację kształtu i skopiuj kod prosto do swojego projektu.

Ponieważ blob to tylko jedna ścieżka SVG, jest bardzo mały, skaluje się bez utraty jakości i można zmieniać jego kolor za pomocą CSS lub animować go, płynnie przekształcając jedną ścieżkę w drugą o tej samej liczbie punktów.

Jak powstaje kształt

Generator rozmieszcza wybraną liczbę punktów kontrolnych na okręgu. Losowość przesuwa każdy punkt do wewnątrz o inną, losową odległość, a rozmiar skaluje cały kontur w obrębie obszaru roboczego. Punkty są następnie łączone zamkniętym splajnem Catmull-Rom, który jest konwertowany na sześcienne krzywe Bézier, co gwarantuje płynne połączenia bez widocznych narożników. Przy trzech lub czterech punktach otrzymujesz proste kształty przypominające kamyki, a dziesięć lub więcej punktów przy wysokiej losowości daje chwiejne formy przypominające chmury. Przy losowości 0% wynikiem jest regularny kształt zaokrąglony do idealnego koła.

Kolory, kontury i ponowne użycie

Wypełnij bloba jednym kolorem lub ukośnym gradientem dwukolorowym i dodaj kontur o grubości od 1 do 16 pikseli, gdy potrzebujesz wyglądu naklejki lub odznaki. Każdy blob powstaje z liczbowego ziarna (seed): to samo ziarno i te same ustawienia zawsze dają ten sam kształt, więc możesz zapisać ziarno, później zmienić jedną wartość i zachować całą resztę bez zmian. Pobierz SVG do zastosowań internetowych lub PNG o wymiarach 800 na 800 pikseli z przezroczystym tłem do prezentacji i narzędzi graficznych. Całe przetwarzanie odbywa się lokalnie w Twojej przeglądarce i nic nie jest przesyłane.