Generator kształtów blob

Generator kształtów blob – organiczne SVG i CSS bez edytora

Kształty blob (organiczne, zaokrąglone figury) to element nowoczesnego web designu dodający naturalności i przepływu do layoutów. Narzędzie generuje blobby przez modyfikację węzłów krzywej Beziera i oferuje eksport SVG, clip-path CSS oraz animowany wariant.

Jak powstaje kształt blob: węzły, promienie i uchwyty

Blob to zamknięta krzywa Béziera trzeciego stopnia. Generator rozkłada wybraną liczbę węzłów równomiernie na okręgu wokół środka viewBoxu: kąt między sąsiednimi węzłami to 360 stopni podzielone przez liczbę węzłów. Dla 4 węzłów wypada 90 stopni, dla 6 - 60 stopni, dla 14 - około 25,7 stopnia. Promień bazowy to połowa boku viewBoxu, więc przy 200 na 200 wynosi 100 jednostek.

Losowość zmienia promień każdego węzła względem wartości bazowej. Przy 0 wszystkie węzły leżą dokładnie na okręgu i powstaje koło, przy 100 odchyłki są największe, a obrys staje się mocno nieregularny. O tym, jakie konkretnie odchyłki trafią do poszczególnych węzłów, decyduje seed - ziarno generatora liczb pseudolosowych. Ta sama kombinacja parametrów i ten sam seed zawsze dają identyczny kształt.

Gładkość steruje długością uchwytów, czyli odcinków stycznych zaczepionych w węzłach. Przy 1,0 długość uchwytu odpowiada w przybliżeniu 0,5523 promienia - to proporcja, przy której sześcienna krzywa Béziera pokrywa się z łukiem okręgu (4/3 od 1,4142 minus 1). Przy 0 uchwyty znikają i obrys zamienia się w wielokąt. Wynik zapisywany jest jako ścieżka: M dla punktu startowego, seria segmentów C (dwie prowadnice i punkt końcowy) oraz Z zamykające obrys.

Przykład krok po kroku: 6 węzłów, seed 42, losowość 40, gładkość 1,0

1. Ustawiamy viewBox 200 na 200. Środek układu to (100, 100), a promień bazowy wynosi 100, czyli połowę boku viewBoxu.
2. Wybieramy 6 węzłów, więc kąt między nimi to 360/6 = 60 stopni. Gdyby losowość wynosiła 0, węzły leżałyby w punktach: (200, 100), (150, 186,6), (50, 186,6), (0, 100), (50, 13,4) i (150, 13,4).
3. Losowość 40 przesuwa promień każdego węzła względem wartości bazowej - na skali 0-100 to odchyłki rzędu 40 procent promienia. Konkretne wartości dla poszczególnych węzłów wyznacza seed 42, więc kształt da się odtworzyć po wpisaniu tych samych ustawień.
4. Gładkość 1,0 ustawia długość uchwytu na 0,5523 promienia danego węzła. Dla węzła o promieniu 100 daje to uchwyt o długości 55,2 jednostki. Uchwyt jest styczny do okręgu, więc dla punktu (200, 100) prowadnice wypadają w (200, 44,8) i (200, 155,2).
5. Generator składa z tego zamkniętą ścieżkę: M dla pierwszego węzła, potem kolejne segmenty C z dwiema prowadnicami i punktem końcowym, na końcu Z.
6. Gotowy wynik kopiujesz jako SVG inline, plik .svg, clip-path: path("M...") dla elementu HTML albo komponent React lub Vue.

Parametry generatora - wartości i efekt

Jak dobrać ustawienia w praktyce

• Zacznij od seeda, nie od suwaków. Ustaw najpierw liczbę węzłów i gładkość, a dopiero potem przeglądaj kolejne ziarna - zmiana seeda daje nowy kształt bez ruszania reszty parametrów.
• Na małych elementach ogranicz węzły. Awatar, naklejka na karcie czy ikona czytają się lepiej przy 5-6 węzłach; 12-14 zostaw do dużych teł sekcji, gdzie obrys widać w całości.
• Trzymaj się środka skali losowości. Skrajne wartości są przewidywalne: 0 to koło, 100 to poszarpany obrys. Środkowy zakres daje kształt organiczny, ale nadal czytelny jako jedna figura.
• Zapisuj seed razem z parametrami. Wstaw w komentarzu w CSS albo w tokenach designu liczbę węzłów, seed, losowość i gładkość - po miesiącach odtworzysz dokładnie ten sam blob.
• Dobierz format do miejsca użycia. Do elementów DOM wygodny jest clip-path, do teł i ilustracji SVG, a do komponentów eksport React lub Vue, żeby ścieżka nie była wklejana ręcznie.

Ograniczenia i pułapki

• Seed nie jest przenośny. Ziarno działa tylko w tym generatorze - inny program losuje w innej kolejności i przy tym samym seedzie wyjdzie zupełnie inny obrys.
• clip-path: path() nie skaluje się razem z elementem. Ścieżka jest zapisana we własnym układzie współrzędnych, więc po zmianie rozmiaru przylegającego elementu obrys może przestać pasować - wtedy lepiej użyć SVG.
• Brak edycji pojedynczych węzłów. Nie przesuniesz jednego punktu ani nie ustawisz ręcznie jego promienia; korekta kształtu oznacza zmianę parametrów globalnych albo kolejne ziarna.
• Animacja morph wymaga zgodnej struktury ścieżek. Przejścia działają płynnie, gdy kolejne obrysy mają tę samą liczbę segmentów; po obróbce ścieżki w innym programie animacja może się zepsuć.

Najczęstsze pytania

Powiązane narzedzia: generator SVG blob, generator fal SVG i generator CSS clip-path.