Generator kształtów blob
Twórz losowe organiczne kształty blob do projektowania stron. Animowane lub statyczne, z gradientami. Pobierz SVG lub skopiuj CSS clip-path. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Ustawienia kształtu
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600" viewBox="0 0 900 600" role="img" aria-label="Kształt blob"><path d="M 653.57 302.32 C 650.88 339, 654.43 398.75, 635.9 432.7 C 617.38 466.65, 549.81 544.03, 513.31 559.34 C 476.82 574.65, 389.42 565.78, 359.6 548.59 C 329.78 531.4, 312.24 462.26, 287.55 429.21 C 262.86 396.16, 179.12 332.5, 172.68 298.39 C 166.25 264.27, 213.95 206.75, 238.82 170.93 C 263.69 135.11, 319.87 45.09, 360.96 27.18 C 402.06 9.27, 510.96 18.45, 549.96 35.34 C 588.96 52.22, 642.55 119.77, 656.23 155.03 C 669.92 190.3, 656.25 265.65, 653.57 302.32 Z" fill="#7C5CFF" /></svg>
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator kształtów blob – organiczne SVG i CSS bez edytora
Kształty blob (organiczne, zaokrąglone figury) to element nowoczesnego web designu dodający naturalności i przepływu do layoutów. Narzędzie generuje blobby przez modyfikację węzłów krzywej Beziera i oferuje eksport SVG, clip-path CSS oraz animowany wariant.
Typy generowanych kształtów
Prosty blob: 1 kształt, 5-10 węzłów, randomowe promienie. Blob asymetryczny: węzły rozmieszczone nieregularnie. Blob z dziurą (donut): zewnętrzna + wewnętrzna krzywa. Animowany blob: 3 kształty + CSS animation morph. Gradient blob: kształt + mesh gradient lub SVG linearGradient wewnątrz.
Parametry kształtu
Węzły (nodes): 4 (prosty) do 14 (złożony). Losowość (randomness): 0=koło, 100=bardzo nieregularny. Seed: ziarno losowania (ten sam seed = ten sam kształt). Gładkość: długość uchwytów Beziera (0=kanciasty, 1.0=idealnie okrągły). Rozmiar SVG: viewBox 0 0 200 200 do 1000 1000.
Formaty eksportu
SVG inline: . SVG file: do pobrania. CSS clip-path: clip-path: path("M...") – dla HTML elementów. CSS variable: --blob-1: path("..."). React/Vue komponent:
Użycie w projektach
Tło sekcji: blob SVG z position:absolute, z-index:-1, opacity:0.3. Avatar zdjęcia: clip-path blob na . Dekoracja karty: mały blob jako pozytywna "naklejka". Loader/spinner: animowany blob. Ilustracje: kombinacja kilku blobów = abstrakcyjna kompozycja. Tła CSS: URL(svg) jako background-image.
Najczęstsze pytania
Czym różni się generator blob od generator SVG blob na tej stronie?
Oba generują organiczne kształty. Ten generator skupia się na dodatkowych opcjach: animacja CSS morph, eksport clip-path CSS, tryb z dziurą. Generator SVG Blob: bardziej zaawansowane parametry Beziera, eksport do Figma/Illustrator.
Jak animować blob przez CSS?
Zdefiniuj 3 różne blobby (ten sam seed ± offset). @keyframes morph { 0% { clip-path: path("M..."); } 50% { clip-path: path("M...2"); } 100% { clip-path: path("M..."); } }. Ważne: ta sama liczba punktów w każdym kształcie. Czas: animation: morph 8s ease-in-out infinite.
Jak użyć bloba jako maski na zdjęciu?
img.blob-mask { clip-path: path("M100,20 C..."); width: 300px; height: 300px; object-fit: cover; }. Lub: z SVG clipPath: .
Czy generowane blobby mogą być perfekcyjnie okrągłe?
Tak – ustaw losowość na 0% = idealny okrąg (identyczny z border-radius: 50%). Przy losowości 10-20%: lekko organiczny, prawie okrągły. 50%+: wyraźnie nieregularny blob. 100%: chaotyczny, artystyczny kształt.
Jak blob wygląda w Figma vs w CSS?
W Figma: importuj SVG → edytuj węzły przez "Edit vector". W CSS: clip-path:path() nie pozwala edytować interaktywnie. Figma Vector Network: bardziej elastyczny niż SVG path. Dla projektu: twórz w Figma, eksportuj do CSS przez Figma-to-Code plugin.
Powiązane narzedzia: generator SVG blob, generator fal SVG i generator CSS clip-path.