Generator blobów: kształty SVG i animowane bloby CSS
Generator blobów
Generator blobów: losowe bloby SVG i animacja blobów w CSS | We.Inc
Generuj losowe organiczne kształty blobów jako ścieżki SVG albo jako czysty blob CSS z border-radius, który płynnie zmienia kształt dzięki gotowym @keyframes. Oparte na seedzie, więc możesz odtworzyć ten sam blob.
Blob to miękki, nieregularny zamknięty kształt używany za zdjęciami, ikonami i tekstem w sekcji hero. Ten generator tworzy go na dwa sposoby: jako ścieżkę SVG poprowadzoną przez losowo przesunięte punkty wokół okręgu albo jako zwykły CSS z ośmioma procentowymi wartościami border-radius. Wersja CSS może płynnie przechodzić między kształtami dzięki krótkiej animacji @keyframes do skopiowania.
Blob SVG czy blob CSS?
Blob ze ścieżki SVG
Blob z border-radius w CSS
Zakres kształtów
Dowolna liczba wybrzuszeń, bardzo nieregularne
Kształty jajka i kamyka z czterema miękkimi bokami
Zawiera treść
Jako obraz tła lub maska
Tak, to zwykły box z tekstem lub obrazem w środku
Animacja zmiany kształtu
Wymaga JavaScriptu lub SMIL
@keyframes na border-radius
Wynik
Element svg lub plik .svg
Kilka linii CSS
Bloby łagodzą sztywne układy siatki i dają marce kształt, który jest tylko jej. Każdy blob tutaj powstaje z liczby seed, więc te same ustawienia i seed zawsze odtwarzają ten sam kształt. Wypróbuj tryb SVG dla kształtów z wieloma wypustkami, a potem przełącz na tryb CSS, gdy chcesz boxu, który powoli faluje.
Wybierz tryb SVG lub tryb CSS.
W trybie SVG ustaw, ile punktów ma kształt i jak daleko każdy punkt może odsunąć się od okręgu. Każdy nowy seed daje nowy kształt.
W trybie CSS naciśnij Nowy kształt, aby wylosować świeże wartości border-radius, i włącz Animuj, aby dostać płynne przejście między trzema kształtami.
Skopiuj kod SVG, pobierz plik .svg albo skopiuj CSS i keyframes.
Od 5 do 8 punktów przy średniej losowości daje najprzyjemniejsze kształty. Wiele punktów przy wysokiej losowości wygląda jak rozbryzgi.
Użyj bloba SVG jako mask-image albo za zdjęciem z position: absolute, aby tekst dało się zaznaczać.
Animacje blobów trzymaj powolne, od 6 do 12 sekund, i ustaw je naprzemiennie, aby ruch nigdy nie przeskakiwał z powrotem do początku.
Wyłącz animację dla odwiedzających, którzy wolą ograniczony ruch. Wygenerowane keyframes zawierają już to media query.
Najczęściej zadawane pytania
Jak działa blob w CSS?
border-radius przyjmuje osobne promienie poziome i pionowe dla każdego rogu, zapisane jako cztery wartości, ukośnik i cztery kolejne. Gdy dwa promienie spotykające się na każdym boku sumują się do 100 procent, rogi łączą się w jeden gładki organiczny kontur zamiast zaokrąglonego prostokąta.
Jak animować blob w CSS?
Umieść dwie lub więcej wartości border-radius w @keyframes i uruchom animację z ease-in-out, infinite i alternate. Przeglądarki interpolują promień każdego rogu, więc kontur płynnie przechodzi z jednego kształtu w następny. Włącz Animuj w trybie CSS, aby dostać gotowe keyframes.
Czy mogę później odtworzyć ten sam blob?
Tak. Kształt zależy tylko od ustawień i liczby seed. Zapisz seed albo zachowaj skopiowany kod, a generator odtworzy dokładnie ten kontur.
Czy mogę użyć bloba SVG jako clip-path?
Możesz odwołać się do niego przez clip-path: url(#id), gdy SVG jest na tej samej stronie, albo wkleić atrybut d do clip-path: path() dla stałego rozmiaru w pikselach. mask-image z plikiem .svg to najprostszy sposób, aby skalował się razem z elementem.
Jak rysowany jest blob SVG
Generator rozmieszcza punkty równomiernie wokół okręgu, a potem przesuwa każdy do środka lub na zewnątrz o losową wartość kontrolowaną suwakiem losowości. Przez punkty przeprowadzana jest gładka krzywa z odcinków sześciennych krzywych Béziera, więc nie ma ostrych rogów.
Mniej punktów i mniejsza losowość dają kamyk. Więcej punktów i większa losowość dają rozbryzg lub chmurę.
Animacja bloba bez JavaScriptu
Właściwość CSS d, która pozwalałaby zmieniać kształt ścieżki SVG w arkuszu stylów, według MDN nie jest Baseline, więc w niektórych głównych przeglądarkach nie działa. Dlatego opcja animowana używa border-radius. Każdy promień rogu to długość lub procent, więc przeglądarka sama potrafi płynnie przejść między keyframes.
Dodanie powolnego obrotu do zmiany promieni sprawia, że ruch wydaje się bardziej organiczny. Trzymaj go delikatnym, aby pozostał w tle.
Przykład animacji bloba w CSS
Zmieniający kształt blob za ramką zdjęcia
Trzy kształty border-radius w jednej naprzemiennej animacji plus powolny obrót. Query dla ograniczonego ruchu zatrzymuje ją dla osób, które proszą o mniej ruchu.
Jak czytać border-radius z ośmioma wartościami
Wartości przed ukośnikiem to promienie poziome, po nim pionowe, każde w kolejności: lewy górny, prawy górny, prawy dolny, lewy dolny.
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%
Róg
Promień poziomy
Promień pionowy
Lewy górny
Prawy górny
Prawy dolny
Lewy dolny
Kreator blobów
Każdy kształt pochodzi z seeda pokazanego pod podglądem. Zmień suwaki lub wylosuj nowy seed, a potem skopiuj SVG lub CSS.