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>

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.

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.

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