Generator blobów SVG
Generuj organiczne, losowe kształty blob SVG na podstawie ustawień złożoności i kontrastu, twórz wariacje za pomocą ziarna, podglądaj je na żywo i kopiuj SVG lub CSS clip-path.
Generator blobów SVG — Ustaw, ile punktów ma kształt (złożoność) i jak nieregularne są jego krawędzie (kontrast), a następnie kliknij Wygeneruj ponownie, aby wylosować nową wariację z kolejnego ziarna. Podgląd na żywo pokazuje blob podczas dostrajania, a otrzymujesz zarówno pełny znacznik SVG, jak i regułę CSS clip-path gotową do wklejenia do arkusza stylów. Wszystko jest obliczane w Twojej przeglądarce za pomocą generatora losowego opartego na ziarnie; żadne kształty, kolory ani ustawienia nigdy nie opuszczają Twojego urządzenia.
Czym jest Generator blobów SVG?
Generator blobów SVG to darmowe narzędzie działające w przeglądarce, przeznaczone dla projektantów i programistów front-end, którzy chcą uzyskać miękkie, organiczne kształty blob do teł, sekcji hero, awatarów lub ozdobnych akcentów bez rysowania ich ręcznie. Kontrolujesz dwie wartości: złożoność (liczbę punktów kotwiczących wokół kształtu) i kontrast (jak bardzo każdy punkt odbiega od idealnego koła). Ziarno w stanie, zwiększane przyciskiem Wygeneruj ponownie, pozwala przeglądać nieskończone wariacje przy zachowaniu stałej złożoności i kontrastu. Wynik jest renderowany jako pojedyncza gładka, zamknięta ścieżka Béziera, dzięki czemu możesz skopiować czysty znacznik SVG, pobrać regułę CSS clip-path() do maskowania dowolnego elementu lub pobrać gotowy do użycia plik .svg. Użyj go, aby szybko tworzyć dekoracje zgodne z marką lub aby nauczyć się, jak ścieżki blob są budowane z punktów wokół koła.
Jak używać Generator blobów SVG
- Otwórz Ustawienia i ustaw złożoność (liczbę punktów, 3-16) kształtu.
- Ustaw kontrast (0-100), aby kontrolować, jak nieregularne i pofalowane są krawędzie.
- Wybierz kolor wypełnienia za pomocą próbki koloru lub wpisując wartość HEX.
- Kliknij Wygeneruj ponownie, aby wylosować nową wariację z kolejnego ziarna, aż spodoba Ci się kształt.
- Skopiuj znacznik SVG lub regułę CSS clip-path albo kliknij Pobierz, aby zapisać plik .svg.
Przykłady
Miękki blob tła
Ustaw złożoność na 6, a kontrast na około 40, aby uzyskać łagodny, zaokrąglony blob, a następnie wygeneruj ponownie kilka razy, aż znajdziesz przyjemny kształt na tło sekcji hero lub karty.
Kolczasty organiczny kształt
Zwiększ złożoność do 12, a kontrast do 80, aby uzyskać bardziej postrzępioną, energiczną sylwetkę, przydatną do odznak lub żartobliwych ilustracji.
Maska CSS clip-path
Skopiuj wygenerowaną regułę clip-path: path('...') i zastosuj ją do obrazu lub diva, aby element został przycięty do konturu blob.
Najczęściej zadawane pytania
- Co kontrolują złożoność i kontrast?
- Złożoność to liczba punktów kotwiczących rozmieszczonych równomiernie wokół koła (od 3 do 16) — więcej punktów daje bardziej szczegółowy kontur. Kontrast to wielkość losowego przesunięcia każdego punktu do wewnątrz lub na zewnątrz względem promienia bazowego (od 0 do 100), więc 0 jest bliskie zwykłemu kołu, a 100 jest bardzo nieregularne.
- Jak działa przycisk Wygeneruj ponownie?
- Każdy blob jest budowany z liczbowego ziarna oraz Twojej złożoności i kontrastu. Wygeneruj ponownie zwiększa ziarno o jeden i przelicza kształt, więc przy każdym kliknięciu otrzymujesz świeżą losową wariację, podczas gdy złożoność, kontrast i kolor pozostają takie same.
- Jaka jest różnica między wyjściem SVG a clip-path?
- Wyjście SVG to kompletny, samodzielny plik <svg>, który możesz osadzić lub pobrać. Wyjście clip-path to pojedyncza reguła CSS używająca path(), którą możesz zastosować do dowolnego elementu HTML, aby przyciąć go do tego samego konturu blob.
- Czy mogę zmienić kolor i pobrać plik?
- Tak. Ustaw kolor wypełnienia za pomocą próbki koloru lub wartości HEX; podgląd, SVG i pobieranie używają go wszystkie. Kliknij Pobierz, aby zapisać plik blob.svg generowany w całości w Twojej przeglądarce.
- Czy moje kształty lub ustawienia są wysyłane na serwer?
- Nie. Blob jest generowany za pomocą lokalnej funkcji losowej opartej na ziarnie, a wszystkie ciągi SVG i clip-path są budowane w Twojej przeglądarce. Nic nie jest przesyłane, więc narzędzie działa offline, a Twoja praca pozostaje prywatna.
Powiązane narzędzia
Kod na obraz
Zamień fragment kodu na obraz z podświetlaniem składni w przeglądarce — z ponad 20 językami, własnymi motywami i tłami, numerami wierszy oraz eksportem PNG lub SVG.
Sprawdzanie kontrastu kolorów
Sprawdź kontrast WCAG 2.1 i wynik APCA Lc między kolorem tekstu a tłem, zobacz plakietki AA, AAA i 3:1 oraz zastosuj najbliższy zaliczony kolor.
Mikser kolorów
Zmieszaj dwa kolory HEX w wybranej proporcji w przestrzeni RGB lub Lab i odczytaj powstały kolor pośredni jako próbkę oraz kopiowalną wartość HEX.
Generator odcieni koloru
Zamień jeden bazowy kolor HEX w skalę OKLCH, HSL lub RGB z regulowaną liczbą stopni, wskazówkami kontrastu WCAG na stopień oraz eksportem do CSS, Tailwind i JSON.