Generator SVG Blob

Generator SVG Blob – organiczne kształty bez edytora wektorowego

Blob (organiczny kształt) to nieprawidłowa, zaokrąglona figura używana w nowoczesnym web designie jako tło, ozdoba karty lub maska. Narzędzie generuje unikalne blobby przez losowe modyfikowanie węzłów krzywej Beziera – każde kliknięcie daje inny kształt.

Jak z okręgu powstaje ścieżka Beziera

Kształt powstaje w dwóch krokach. Najpierw węzły rozkładane są równomiernie na okręgu: dla n węzłów kąt kolejnego punktu to 360° / n, a jego położenie opisują wzory x = cx + r·cos θ oraz y = cy + r·sin θ. Promień r nie jest stały — każdy węzeł dostaje własny mnożnik z przedziału ±20–40% wartości bazowej. Układ współrzędnych jest taki jak w SVG, czyli oś Y rośnie w dół: kąt 90° wskazuje dół płótna, a 270° jego górę.

Z samych punktów powstałby wielokąt, dlatego drugi krok zamienia łamaną na krzywe sześcienne Beziera. Pojedynczy segment opisuje równanie B(t) = (1−t)³P0 + 3(1−t)²t·P1 + 3(1−t)t²·P2 + t³P3 dla t z przedziału od 0 do 1, gdzie P0 i P3 to węzły, a P1 i P2 to punkty kontrolne. Ich kierunek wyznacza wektor styczny liczony z sąsiadów węzła: d = (P(i+1) − P(i−1)) / 6. Punkt kontrolny leży w odległości s·d od węzła, gdzie s to parametr gładkości.

Gładkość 0 stawia punkty kontrolne dokładnie na węzłach i segmenty stają się proste, czyli obrys jest kanciasty. Im bliżej 1, tym dłuższe ramiona styczne i pełniejszy łuk. Całość zapisywana jest jako jedna ścieżka: M z punktem startowym, seria poleceń C z trzema parami współrzędnych na segment i Z na końcu. Kształt jest deterministyczny — te same węzły i te same mnożniki promienia dają identyczną ścieżkę, a losowość dotyczy wyłącznie momentu generowania.

Przykład: blob z 8 węzłów na płótnie 200 × 200

1. Ustal płótno: viewBox 0 0 200 200, środek w punkcie (100, 100) i bazowy promień R = 72.
2. Przyjmij 8 węzłów — kąt między kolejnymi wynosi 360° / 8 = 45°.
3. Wylosuj mnożniki promienia w zakresie ±25%, czyli od 0,75 do 1,25. W tym przykładzie wychodzą promienie: 86, 58, 90, 61, 84, 56, 88 i 60.
4. Przelicz węzły na współrzędne: (186, 100), (141, 141), (100, 190), (57, 143), (16, 100), (60, 60), (100, 12) oraz (142, 58). Skrajne wartości to 12 i 190, więc kształt mieści się w płótnie.
5. Policz styczne. Dla węzła (186, 100) sąsiedzi to (142, 58) i (141, 141), więc d = ((141 − 142) / 6, (141 − 58) / 6) = (−0,17, 13,83). Przy gładkości s = 0,5 pierwszy punkt kontrolny wypada w (185,9, 106,9).
6. Dla węzła (141, 141) wektor styczny d = ((100 − 186) / 6, (190 − 100) / 6) = (−14,33, 15) daje drugi punkt kontrolny (148,2, 133,5). Powtórz obliczenia dla pozostałych węzłów i zamknij ścieżkę poleceniem Z — otrzymasz jedną krzywą złożoną z 8 segmentów.

Parametry i ich wpływ na kształt

Jak wkleić wygenerowany blob do projektu

• Trzymaj się płótna, w którym liczył generator — jeśli kształt powstał w kwadracie 200 × 200, wstaw go do SVG z takim samym viewBox. Przy prostokątnym kontenerze dodaj preserveAspectRatio, żeby blob wypełnił tło bez zniekształcenia proporcji.
• Dobierz liczbę węzłów do rozmiaru — na tło sekcji i małe karty zwykle wystarcza 8 węzłów; 12 ma sens dopiero przy dużych powierzchniach, gdzie widać każdy załom.
• Skracaj zapis ścieżki — zaokrąglij współrzędne do jednego lub dwóch miejsc po przecinku. Wygląd się nie zmieni, a atrybut d będzie krótszy i czytelniejszy w kodzie.
• Nie opieraj na blobie czytelności — jasny kształt pod jasnym tekstem obniża kontrast, dlatego przy napisach zejdź z kryciem wypełnienia albo rozmyj obrys filtrem.
• Traktuj blob jako dekorację — dodaj aria-hidden, żeby czytniki ekranu pominęły kształt, i wyłącz animację morfingu dla użytkowników, którzy ustawili ograniczenie ruchu w systemie.

Czego generator nie sprawdzi

• Skalowania ścieżki w CSS — clip-path: path() interpretuje współrzędne w pikselach elementu, więc ta sama ścieżka na innym rozmiarze kontenera da inny kadr. Trzeba przeliczyć punkty albo użyć clipPath z własnym viewBox.
• Kontrastu z treścią — narzędzie nie wie, jaki tekst i jaki kolor tła znajdą się na blobie, więc nie ostrzeże, że napis stanie się nieczytelny.
• Atrakcyjności kształtu — losowe mnożniki przy ±40% potrafią dać obrys niechlujny i zapadnięty. Sensowna praktyka to wygenerowanie kilku wariantów i wybór najlepszego.
• Zgodności animacji morfingu — przejście między dwiema ścieżkami interpoluje się tylko wtedy, gdy mają tę samą liczbę i kolejność węzłów. Przy różnej liczbie animacja się zerwie, a nie płynnie zamieni.

Najczęstsze pytania

Powiązane narzędzia: generator wielokątów SVG, generator fal SVG i generator gradientów CSS.