Generator kompozycji blob

Twórz kompozycje artystyczne z losowych kształtów blob. Dostosuj kolory, liczbę elementów i rozmiar. Pobierz jako SVG lub PNG. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia kompozycji

Tło

Szerokość

1600

Wysokość

900

Liczba kształtów

Złożoność

Krycie

0.55

Ziarno

1337

Paleta kolorów

Szybkie zestawy kolorów:

Podgląd kompozycji na żywo

Kod SVG 2840 B

<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900"><path d="M 656.55 488.13 C 656.2 521.29 652.4 564.2 631.88 586.55 C 611.37 608.9 562.63 625.87 533.47 622.22 C 504.31 618.58 477.88 587.02 456.93 564.67 C 435.98 542.32 409.23 515.09 407.78 488.13 C 406.34 461.18 427.33 425.89 448.27 402.94 C 469.22 379.99 502.51 353.01 533.47 350.45 C 564.42 347.9 613.48 364.66 633.99 387.61 C 654.5 410.56 656.9 454.98 656.55 488.13 Z" fill="#6C63FF" fill-opacity="0.55" transform="rotate(-8.57 533.47 488.13)"/><path d="M 752.21 749.93 C 752.09 777.7 721.01 801.62 698.18 832.89 C 675.35 864.16 646.15 934.3 615.23 937.56 C 584.31 940.83 531.87 883.77 512.67 852.5 C 493.46 821.23 502.9 787.04 499.97 749.93 C 497.05 712.82 475.93 653.62 495.14 629.84 C 514.35 606.06 581.27 601.18 615.23 607.25 C 649.19 613.32 676.06 642.49 698.89 666.27 C 721.72 690.05 752.33 722.16 752.21 749.93 Z" fill="#00C2FF" fill-opacity="0.55" transform="rotate(8.68 615.23 749.93)"/><path d="M 1567.69 235.77 C 1574.07 282.7 1539.18 357.9 1501.49 395.69 C 1463.81 433.47 1382.64 474.73 1341.57 462.49 C 1300.51 450.25 1283.34 360.03 1255.1 322.24 C 1226.87 284.45 1179.31 271.74 1172.16 235.77 C 1165.01 199.79 1183.97 135.84 1212.2 106.4 C 1240.44 76.95 1299.74 57.81 1341.57 59.09 C 1383.41 60.38 1425.53 84.68 1463.22 114.12 C 1500.91 143.57 1561.31 188.84 1567.69 235.77 Z" fill="#00E5A8" fill-opacity="0.55" transform="rotate(3.03 1341.57 235.77)"/><path d="M 995.7 613.91 C 996.68 650.29 963.83 692.28 935.04 725.98 C 906.25 759.69 863.74 812.7 822.96 816.12 C 782.18 819.54 718.26 780.21 690.36 746.51 C 662.47 712.8 654.06 656.58 655.58 613.91 C 657.11 571.24 671.63 518.82 699.52 490.47 C 727.42 462.13 784.69 440.96 822.96 443.84 C 861.23 446.71 900.36 479.37 929.15 507.72 C 957.94 536.07 994.72 577.53 995.7 613.91 Z" fill="#FFD166" fill-opacity="0.55" transform="rotate(-12.93 822.96 613.91)"/><path d="M 849.85 651.71 C 850.43 695.49 860.3 755.06 835.77 784.77 C 811.25 814.48 743.31 833.71 702.72 829.95 C 662.13 826.18 610.8 791.88 592.25 762.18 C 573.7 732.47 595.54 692.65 591.42 651.71 C 587.3 610.77 548.99 548.4 567.54 516.54 C 586.09 484.67 658.59 459.62 702.72 460.55 C 746.85 461.48 807.78 490.26 832.31 522.13 C 856.83 553.99 849.27 607.94 849.85 651.71 Z" fill="#EF476F" fill-opacity="0.55" transform="rotate(-2.69 702.72 651.71)"/><path d="M 1409.14 452.52 C 1406.86 494.65 1313.74 525.92 1270.75 572.07 C 1227.76 618.22 1202.13 718.37 1151.21 729.45 C 1100.29 740.52 1006.55 684.66 965.23 638.5 C 923.91 592.35 907.33 518.56 903.28 452.52 C 899.24 386.49 899.63 284.65 940.95 242.27 C 982.27 199.89 1093.97 185.41 1151.21 198.25 C 1208.45 211.1 1241.41 276.95 1284.4 319.33 C 1327.39 361.71 1411.41 410.4 1409.14 452.52 Z" fill="#6C63FF" fill-opacity="0.55" transform="rotate(-1.52 1151.21 452.52)"/></svg>

Wymiary

1600 × 900 px

Liczba blobów

Złożoność kształtu

Krycie

0,55

Ziarno (seed)

1337

Rozmiar kodu

2,8 KB

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator kompozycji blob – abstrakcyjne kształty do projektów graficznych

Kształty blob (organiczne, płynne plamy) to popularny trend w web designie i ilustracji. Generator tworzy losowe kompozycje z wielu blobów w wybranych kolorach i rozmiarach – idealne do tła strony, hero section, prezentacji i identyfikacji wizualnej.

generator blob kształty blob kompozycja organiczne kształty SVG blob design generator

Czym są kształty blob

Blob: organiczny, zaokrąglony kształt bez ostrych krawędzi. Matematycznie: krzywe Béziera z losowymi punktami kontrolnymi. Generowanie: N punktów na okręgu → losowe przesunięcia promieniowe → interpolacja spline. SVG path: seria M, C, L instrukcji. Variability: seed liczba determinuje kształt (powtarzalność).

Trendy w web designie z blobami

2018-2023: blob shapes dominują w startup websites. Użycie: hero section backgrounds, ikony, ilustracje, avatar frames. Narzędzia: blobmaker.app, shapefactory.co, blobs.app. CSS clip-path: blob jako maska dla zdjęcia. Gradients: blob z gradient fill = popularne tło. Animowane: CSS/JS blob animation.

Jak wygenerować blob w CSS

border-radius: dowolna kombinacja 4 wartości. Przykład: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Generator CSS: getwaves.io, blobmaker.app. JavaScript: generuj SVG path i ustaw jako background. CSS Houdini: Paint API dla dynamicznych blobów. Animacja: keyframe animuj border-radius dla "living blob".

Blob SVG w projektach

Export SVG: lekki, skalowalny, bez utraty jakości. Inkscape: edycja i customizacja blobów SVG. Figma: importuj SVG, użyj jako kształt lub mask. Adobe Illustrator: trace lub implikuj SVG. React: inline SVG w JSX lub . Performance: SVG jako background vs img vs div z border-radius.

Jak generator składa kompozycję z pojedynczych blobów

Generator nie tworzy jednego kształtu, lecz zestawia wiele niezależnych blobów na wspólnej płaszczyźnie. Każdy element ma własny zestaw parametrów: pozycję, rozmiar, kolor, przezroczystość i kolejność warstw. Algorytm losuje te wartości w ramach wybranego zakresu, a następnie rozrzuca kształty tak, aby częściowo się nakładały lub pozostawiały wolne pole.

Kluczowym elementem jest seed, czyli ziarno losowości. Ten sam seed i te same ustawienia dają identyczny układ, dzięki czemu możesz wrócić do kompozycji, zapisać jej wariant albo wygenerować spójną rodzinę grafik. Zmiana seeda powoduje przetasowanie pozycji i kształtów bez zmiany ogólnego stylu.

Kompozycja działa jak warstwowa scenografia: tło wypełniają duże, miękkie plamy, środek budują średnie kształty, a pierwszy plan uzupełniają mniejsze akcenty. Nakładające się bloby i ich przezroczystość tworzą nowe odcienie oraz wrażenie głębi, nawet bez dodawania cieni.

Przykład: kompozycja tła dla sekcji hero

Wybierz format docelowy. Dla strony internetowej ustaw proporcje poziome, czyli szerokie pole pod nagłówek i przycisk.
Ustaw paletę: dwa kolory bazowe i jeden akcent. W generatorze wskaż je jako główne źródło wypełnień, aby kompozycja nie rozjechała się kolorystycznie.
Dodaj warstwę dużych blobów. Zwiększ ich rozmiar i zmniejsz przezroczystość, żeby stanowiły miękkie tło, a nie konkurowały z tekstem.
Dołóż kilka średnich kształtów wokół krawędzi. Przesuń je tak, aby wychodziły poza kadr – to buduje wrażenie, że kompozycja jest fragmentem większej całości.
Na koniec umieść małe bloby w kolorze akcentu. Ustaw je w miejscach, które nie kolidują z przyszłym tekstem, na przykład po bokach lub w narożnikach.
Zapisz seed i wyeksportuj kompozycję. Jeśli układ ma być użyty w kilku podstronach, wygeneruj kolejne seede w tej samej palecie i zachowaj podobny rozkład dużych elementów.

Parametry kompozycji i ich wpływ na wynik

Ustawienie	Za co odpowiada	Efekt w kompozycji
Liczba blobów	Określa, ile niezależnych kształtów trafi na płaszczyznę.	Więcej elementów zagęszcza układ i zwiększa liczbę nakładek; mniej daje spokojniejszy, czytelniejszy obraz.
Rozmiar bazowy	Ustala punkt wyjścia dla skali pojedynczego bloba.	Duże wartości budują tło, małe pełnią funkcję akcentów i detali.
Zakres losowania rozmiaru	Decyduje, jak bardzo kształty różnią się od siebie.	Szeroki zakres daje dynamiczną kompozycję; wąski – bardziej uporządkowaną i jednolitą.
Paleta kolorów	Źródło wypełnień dla kształtów.	Ograniczona paleta spina kompozycję; wiele kolorów może rozproszyć uwagę.
Przezroczystość	Steruje widocznością nakładających się warstw.	Niższa przezroczystość tworzy miękkie przejścia; wyższa – wyraźne, kontrastowe plamy.
Seed	Ziarno powtarzalności losowania.	Ten sam seed odtwarza identyczny układ; zmiana seeda generuje nowy wariant.
Rozkład pozycji	Sposób rozmieszczenia środków blobów na płaszczyźnie.	Równomierny rozkład daje balans; skupiska przy krawędziach tworzą napięcie i ruch.
Kolejność warstw	Określa, które kształty są pod, a które nad innymi.	Wpływa na to, które kolory i kontury pozostają widoczne w miejscach przecięć.

Jak komponować bloby, żeby wyglądały celowo

Zacznij od hierarchii, nie od liczby kształtów. Najpierw zaplanuj, co ma być tłem, co wypełnieniem, a co akcentem. Dopiero potem zwiększaj liczbę blobów, jeśli kompozycja wygląda pusto.
Utrzymaj jedną paletę i powtarzaj ją w wariantach. Kolejne seede mogą zmieniać układ, ale nie powinny zmieniać charakteru kolorystycznego, jeśli grafiki mają tworzyć spójny zestaw.
Pilnuj miejsca na treść. W sekcji hero zostaw obszar o niskim zagęszczeniu i wysokim kontraście dla nagłówka oraz przycisku. Bloby mogą być intensywne na obrzeżach, ale nie pod tekstem.
Nakładaj kształty świadomie. Przezroczystość i kolejność warstw pozwalają uzyskać głębię bez dodawania cieni. Jeśli kompozycja jest płaska, zmniejsz krycie lub przesuń jeden blob pod drugi.
Testuj w docelowym rozmiarze. To, co wygląda dobrze w dużym podglądzie, może stać się zbyt drobne na telefonie. Sprawdź kadr poziomy i pionowy oraz to, czy mniejsze bloby nie znikają.

Ograniczenia generatora kompozycji

Nie kontrolujesz dokładnego obrysu pojedynczego bloba. Generator losuje kształt w ramach parametrów, więc nie ustawisz ręcznie każdego punktu krzywej. Do precyzyjnej edycji potrzebny jest program wektorowy.
Losowość nie zastępuje decyzji projektowej. Kompozycja może być technicznie poprawna, ale niepasująca do marki, jeśli wcześniej nie określisz palety, nastroju i hierarchii.
Kolory są ekranowe. Generator pracuje na wartościach RGB, typowych dla monitorów. Nie przygotuje automatycznie wersji CMYK do druku ani nie sprawdzi kontrastu WCAG.
Brak animacji i interakcji. Narzędzie tworzy statyczną kompozycję. Animowanie blobów wymaga dodania CSS, JavaScriptu lub pracy w narzędziu do motion designu.

Najczęstsze pytania

Jak używać blobów w web designie?

Hero section: duży blob z gradientem za tekstem. Cards: blob jako dekoracyjne tło karty. Avatars: clip-path blob na zdjęciu profilu. Section dividers: SVG wave + blob transition. Buttons: blob shape zamiast pill/rounded. Color blobs: efekt glassmorphism. Narzędzie: generuj, kopiuj SVG, wklej w Figma lub kod.

Jak animować blob CSS?

@keyframes blob-animation { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; } 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } } element { animation: blob-animation 5s infinite ease-in-out; }

Jakie narzędzia online generują bloby?

Blobmaker.app: najpopularniejszy, SVG export. Blobs.app: więcej opcji. Shapefactory.co: blob + gradient. Fluid Shapes (webflow): animowane. Codepen: setki przykładów CSS blob. To narzędzie: kompozycje z wielu blobów. Figma plugins: Blobs, Organic Shapes.

Czy kształty blob wychodzą z mody?

Design trendy: blob = popularny 2018-2023. 2024: nadal używany ale ostrożniej. Zastąpiony częściowo: glassmorphism, neumorphism, brutalism. Bezpieczny wybór: proste, dobrze zrobione bloby z spójną paletą = ponadczasowe. Kluczowe: umiar. "Blob overload" (cały layout w blobach) = outdated.

Jak zoptymalizować SVG blob dla web?

SVGO: narzędzie do minimalizacji SVG (CLI lub online). Usuwa metadane, skraca ścieżki. Przed: 5KB, po: 1-2KB. Inline SVG: nie wymaga HTTP request. Base64 encoded: data:image/svg+xml;base64,... w CSS. Dla wielu blobów: sprite SVG. Lazy load: jeśli blob jest below-the-fold.

Jak uzyskać powtarzalną kompozycję blobów?

Zapisz seed oraz wszystkie ustawienia: paletę, zakres rozmiarów, przezroczystość i liczbę kształtów. Wprowadzenie tych samych wartości ponownie odtworzy identyczny układ.

Czy generator kompozycji blobów nadaje się na tło strony?

Tak, jeśli kompozycja nie konkuruje z treścią. Najlepiej sprawdza się jako tło sekcji hero, nagłówka lub stopki, z pozostawieniem spokojnego obszaru pod tekstem.

Jak połączyć bloby z gradientem?

Ustaw blobom wypełnienie gradientowe lub nałóż na nie półprzezroczyste warstwy. Gradient najlepiej działa na dużych kształtach w tle, a małe bloby zostaw w jednolitym kolorze akcentu.

Czy mogę użyć wygenerowanej kompozycji komercyjnie?

Korzystaj z wygenerowanych kształtów zgodnie z regulaminem serwisu. Same bloby są elementem abstrakcyjnym, ale jeśli wzorujesz je na istniejącej marce lub ilustracji, sprawdź prawa do wzoru.

Dlaczego kompozycja wygląda inaczej po ponownym wygenerowaniu?

Bo generator losuje położenie, rozmiar i kolejność kształtów. Ten sam seed zamraża losowanie, a jego zmiana lub zmiana parametrów tworzy nowy wariant.

Powiązane narzedzia: generator ksztaltow blob, generator gradientow CSS i narzedzia SVG.