Czym jest blob SVG?

Blob to miękki, organiczny kształt bez prostych krawędzi, znajdujący się gdzieś pomiędzy okręgiem a rozpryskiem. Bloby są popularną ozdobą we współczesnym projektowaniu stron internetowych: umieszcza się je za głównymi obrazami i ilustracjami, wykorzystuje jako ramki awatarów, tła sekcji albo ozdobne przyciski i plakietki. Ponieważ są grafikami wektorowymi, zachowują ostrość w dowolnym rozmiarze i zajmują zaledwie kilkaset bajtów.

Opis narzędzia

To narzędzie generuje losowe kształty blobów jako czysty kod SVG bezpośrednio w przeglądarce. Naciskaj przycisk „Losuj”, aż uzyskasz odpowiedni kształt, a następnie dostosuj liczbę jego wypukłości, stopień nieregularności oraz zaokrąglenie krzywych. Wypełnij go jednolitym kolorem lub gradientem albo przedstaw go jako obrys. Możesz także opcjonalnie sprawić, by płynnie przechodził między kształtami w zapętlonej animacji. Pobierz wynik jako SVG lub PNG albo skopiuj go jako kod SVG, tło CSS lub clip-path CSS.

Funkcje

  • Losowe bloby, które można odtworzyć: to samo ziarno i te same ustawienia zawsze dają ten sam kształt
  • Regulowana złożoność, losowość i gładkość — od zaokrąglonych kamyków po kolczaste gwiazdy
  • Jednolite wypełnienie, gradient lub obrys w dowolnym kolorze
  • Animacja morfingu zapętlona między kształtami, osadzona w SVG i niewymagająca JavaScript
  • Pobieranie jako SVG lub przezroczysty PNG w wybranym rozmiarze
  • Gotowy do skopiowania kod SVG, tło CSS i kod clip-path CSS

Jak to działa

Narzędzie rozmieszcza punkty wokół okręgu, przesuwa każdy z nich do środka o losową odległość, a następnie rysuje przez nie gładką zamkniętą krzywą. Krzywa jest dokładnie obliczana i skalowana tak, aby blob wypełniał obraz od krawędzi do krawędzi. Generator liczb losowych z ustalonym ziarnem określa położenie każdego punktu, dzięki czemu liczba lub słowo użyte jako ziarno pozwala później odtworzyć ten sam blob. Na potrzeby animacji kilka blobów o tej samej liczbie punktów umieszczanych jest w jednym elemencie SVG animate, a przeglądarka płynnie przechodzi między nimi.

Wskazówki

  • Od pięciu do ośmiu punktów przy średniej losowości daje klasyczne kształty blobów; mniejsza losowość zapewnia spokojniejszy i bardziej profesjonalny wygląd.
  • Ustaw gładkość na 0%, aby uzyskać wielokąty przypominające kryształy lub kamienie szlachetne.
  • Użyj kodu clip-path CSS, aby przyciąć zdjęcie lub film do kształtu bloba.
  • Zapisz ziarno albo wpisz własne słowo jako ziarno, aby później dokładnie odtworzyć bloba.
  • Ustaw powolną animację morfingu — około 8–15 sekund na pętlę — aby zachować spokojny efekt w tle.