Generator kształtów SVG

Czym jest generator SVG blob?

Generator SVG blob tworzy zamknięte kształty organiczne: wybiera punkty wokół okręgu i łączy je gładkimi krzywymi Béziera. Efektem jest miękka, płynna sylwetka, taka jak w tle sekcji hero na stronie marketingowej, wokół zdjęcia profilowego czy jako kolorowa plama na landing page.

Bloby łączą geometrię z losowością w idealnych proporcjach. Zmień liczbę punktów, aby uzyskać kształt żelka (3-4), kamyka (5-6) albo chaotyczny (10+). Suwak losowości przenosi cię od niemal idealnego koła do mocno zniekształconych form. Przycisk z kostką w każdej chwili losuje nowe ziarno.

Wszystko działa w przeglądarce. Wyeksportuj kształt jako fragment SVG do skopiowania, plik .svg do pobrania albo wartość CSS clip-path, którą zastosujesz bezpośrednio do dowolnego elementu HTML, aby przyciąć go do kształtu blobu.

Czego nauczysz się, tworząc bloby

• Gładkość blobu zapewniają sześcienne krzywe Béziera: każda para sąsiednich punktów ma dwa uchwyty kontrolne, obliczone tak, by styczna była ciągła w każdym połączeniu.
• Splajny Catmulla-Roma (użyte tutaj) same wyznaczają te uchwyty z sąsiednich punktów, więc nie musisz ręcznie ustawiać punktów kontrolnych, żeby krzywa była gładka.
• CSS clip-path: path(...) nałoży kształt blobu na dowolny element (obraz, div, wideo) bez wpływu na jego pole układu.
• Blob renderowany jako SVG skaluje się bez końca i bez pikselizacji, w przeciwieństwie do PNG, a waży tylko kilkaset bajtów.

Jak wygenerować blob krok po kroku

1. 1

   Wybierz liczbę punktów

   Mniej punktów (3-5) daje bloby w kształcie żelka. Więcej punktów (8-12) daje nieregularne kształty przypominające kamyki.

2. 2

   Ustaw losowość

   0% to koło. 50% daje łagodne, obłe krzywe. 100% daje mocno zniekształcone, efektowne sylwetki.

3. 3

   Wybierz kolor lub gradient

   Użyj jednolitego wypełnienia albo włącz Gradient i wybierz dwa kolory oraz kąt. Pasuje do popularnych wzorów sekcji hero.

4. 4

   Losuj i eksportuj

   Kliknij kostkę, aby wylosować nowe ziarno. Gdy kształt ci się spodoba, skopiuj SVG, skopiuj clip-path CSS albo pobierz plik .svg.

Gdzie bloby sprawdzają się najlepiej

Typowe sposoby użycia blobu i na co przy nich uważać.

Przykłady blobów do wypróbowania

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Welcome to Coddy</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Częste błędy przy blobach SVG

• Pominięcie viewBox i nadanie <svg> stałej szerokości i wysokości. Kształt nie będzie się responsywnie skalował: użyj viewBox oraz szerokości i wysokości w CSS.
• Animowanie dużych wypełnionych ścieżek w każdej klatce. Rasteryzacja ścieżek jest kosztowna: używaj transform/opacity albo wcześniej rozmyj kształt filtrem CSS, żeby zajęło się tym GPU.
• Wklejenie inline <svg> do Tailwind/Bootstrap i odziedziczenie display: inline zamiast block. Domyślny odstęp od linii bazowej zostawia kilka pikseli pod kształtem.
• Użycie blobu jako kształtu przycisku i zapomnienie, że zdarzenia myszy działają w całym prostokątnym obszarze, a nie tylko w zakrzywionym obrysie. Jeśli potrzebujesz dokładnego trafienia, umieść w środku prawdziwy <button>.
• Nakładanie wielu nieprzezroczystych blobów z mocnym rozmyciem na urządzeniach mobilnych. Łączny koszt przerysowania może wyraźnie obniżyć liczbę klatek na słabszych urządzeniach.

Generator SVG blob: najczęstsze pytania