Softonic

Generator blobów SVG

Krok 1 / 2
Dalej

Kształty blob zastąpiły idealne koła około 2018 roku jako „przyjazne zaokrąglone tło” nowoczesnego UI, pojawiają się za ilustracjami hero, jako maski awatarów i jako plamy koloru na stronach docelowych. Ten generator buduje blob z losowego błądzenia wokół koła, a następnie wygładza wielokąt kwadratowymi krzywymi Béziera w organiczny, lekko falujący kształt, o jaki chodzi projektantom. Sterujesz liczbą punktów kontrolnych (złożonością), tym, jak dzikie staje się błądzenie (kontrastem), oraz ziarnem losowości, a potem kopiujesz SVG.

Jak budowany jest blob

  1. 1

    Wybierz kolor i złożoność

    Złożoność ustala liczbę punktów kontrolnych (3-12). Więcej punktów oznacza więcej wybrzuszeń.

  2. 2

    Ustaw kontrast

    Kontrast steruje tym, jak daleko każdy punkt odchodzi od promienia bazowego. Niski kontrast = niemal okrągły; wysoki = agresywnie poszarpany.

  3. 3

    Wybierz ziarno

    Ziarno to liczba losowa, która blokuje kształt bloba. To samo ziarno, ten sam blob; naciśnij losuj, by uzyskać nowy.

  4. 4

    Skopiuj SVG

    Dostajesz pojedynczy `<path>` wewnątrz viewBoxa 400×400. Wrzuć go wszędzie, gdzie obsługiwany jest SVG.

Anatomia ścieżki bloba

Generator rozkłada N punktów równomiernie wokół viewBoxa 400×400 (środek 200, 200; promień bazowy 130), zaburza każdy promień o ±contrast, a następnie łączy każdą parę kwadratową krzywą Béziera:

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midy to punkt środkowy między bieżącym a następnym punktem, umieszczenie tam końca każdej krzywej jest tym, co zaokrągla wielokąt w organiczny kształt.

Ściąga parametrów

Ustawienie Zakres Efekt
Złożoność 3-12 Liczba wybrzuszeń. 5-7 to złoty środek dla UI.
Kontrast 0-100 Amplituda błądzenia losowego. 30-60 wygląda naturalnie.
Ziarno 1-9999 Deterministyczne; to samo ziarno = ten sam blob między uruchomieniami.
Kolor hex Pojedyncze wypełnienie, bez obrysu. W razie potrzeby dodaj fill-opacity ręcznie.

Gdzie bloby sprawdzają się najlepiej

  • Dekoracja tła, za nagłówkami, w pustych narożnikach sekcji hero.
  • Maski awatarów, zastosuj ścieżkę jako clip-path do organicznych ramek portretów.
  • Akcenty ilustracyjne, plama koloru marki pod ikonami lub liczbami.
  • Maski obrazów, z CSS mask-image blob przycina zdjęcia w organiczne wykroje.

Wskazówki

  • Trzymaj bloby bez obrysu do teł; obrys sprawia, że wyglądają jak naklejki.
  • Do animowanego morfowania wygeneruj dwa bloby o tej samej złożoności i różnych ziarnach, a następnie animuj atrybut d biblioteką taką jak flubber lub svg-morpheus.
  • Wstawiaj SVG inline zamiast używać <img src=blob.svg>, pozwala to zmieniać kolor wypełnienia zmiennymi CSS w czasie działania.
  • Zachowaj viewBox, ale usuń jawne width="400" height="400", jeśli chcesz, by blob skalował się do dowolnego kontenera.

Najczęściej zadawane pytania

Ziarno inicjuje srand() w PHP przed błądzeniem losowym. To samo ziarno = ta sama sekwencja wywołań rand() = te same przesunięcia punktów = identyczna ścieżka.

Tak, ale tylko jeśli obie ścieżki mają tę samą liczbę poleceń i liczbę punktów. Zachowaj identyczną złożoność i zmieniaj tylko ziarno, by uzyskać pary przyjazne interpolacji. Do samej animacji użyj biblioteki tweeningu, jak GSAP MorphSVG lub flubber.

Zastąp fill="#hex" na ścieżce przez fill="url(#gradient-id)" i dodaj definicję <linearGradient> lub <radialGradient> wewnątrz bloku <defs>. Własne właściwości CSS też działają, jeśli wstawisz SVG inline.

Jest czysty, ale nie zminifikowany. Przepuść go raz przez SVGO, jeśli zależy ci na rozmiarze w bajtach; zwykle da się usunąć 20-30% znaków.

Nie. SVG jest generowany na bieżąco z parametrów w formularzu i nic nie jest logowane.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Podgląd Markdown

Pisz w Markdown i obserwuj, jak wyrenderowany HTML aktualizuje się na żywo. Składnia w stylu GitHub z tabelami, listami zadań, ogrodzonymi blokami kodu i automatycznymi odnośnikami.

Formater JavaScript

Formatuj JavaScript, JSX, TypeScript i JSON z konfigurowalnym wcięciem, stylem cudzysłowów, średnikami i przecinkami końcowymi.

Narzędzie jest dostępne w innych językach