Generator SVG Blob

Generuj losowe organiczne kształty SVG (blob, morph) do użycia jako tło lub dekoracja strony. Kontroluj złożoność, gładkość i kolory. Animowane lub statyczne. 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 generatora

Tryb wypełnienia

Szerokość 600

Wysokość 600

Liczba punktów 9

Zmienność 0.28

Ziarno losowości

Włącz obrys

Podgląd kształtu na żywo

Kod SVG 585 B

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600" role="img" aria-label="Generated blob"><path d="M 527.48 300 C 538.28 351.93 548.28 439.3 518.07 482.98 C 487.85 526.66 398.12 565.59 346.21 562.06 C 294.3 558.53 246.16 493.87 206.59 461.8 C 167.01 429.72 127.55 409.08 108.76 369.61 C 89.96 330.13 77.3 263.15 93.82 224.96 C 110.34 186.77 166.98 165.14 207.9 140.47 C 248.82 115.81 298.43 71.79 339.33 76.95 C 380.23 82.1 421.93 134.2 453.29 171.38 C 484.65 208.55 516.68 248.07 527.48 300 Z" fill="#8e4294" stroke="none" stroke-width="0" /></svg>

width: 600

height: 600

points: 9

variance: 0.28

seed:

fill: #8e4294

Oceń to narzędzie:

Powiązane narzędzia

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

Generator SVG Blob – organiczne kształty bez edytora wektorowego

Blob (organiczny kształt) to nieprawidłowa, zaokrąglona figura używana w nowoczesnym web designie jako tło, ozdoba karty lub maska. Narzędzie generuje unikalne blobby przez losowe modyfikowanie węzłów krzywej Beziera – każde kliknięcie daje inny kształt.

generator SVG blob organiczne kształty SVG blob kształt CSS losowy kształt SVG

Algorytm generowania blobów

Bazowy wielokąt (np. 8 węzłów) na okręgu. Każdy węzeł przesuwa się losowo wzdłuż promienia (±20-40% od idealnego okręgu). Tangenty Beziera: obliczane dla gładkich przejść. Parametr "złożoność": liczba węzłów (4=prosty, 12=skomplikowany). "Gładkość": długość tangentu (0=kanciasty, 1=okrągły).

Warianty kształtów

Statyczny blob: pojedyncza ścieżka SVG . Animowany blob (morph): między 2-3 kształtami – blob "oddycha". CSS blob: clip-path: path("...") + CSS transition. Gradient fill: linearGradient lub radialGradient wewnątrz SVG.

Wypełnienia i efekty

Kolor jednorodny: fill="#FF6B6B". Gradient liniowy: 2-3 kolory w dowolnym kierunku. Gradient radialny: promieniowy, efekt "glow". Gradient siatki (mesh gradient): eksperymentalne CSS. Przezroczystość (opacity): nakładanie kilku blobów różnej przezroczystości. Filtr SVG: rozmycie (feGaussianBlur), cień.

Zastosowania w projekcie

Tła sekcji hero: blob jako backdrop z niskim opacity. Karty (cards): blob jako dekoracyjny element tła karty produktu. Maski obrazów: z blobem – zdjęcie w organicznym kształcie. Ilustracje: kilka blobów + ikony = nowoczesna illustracja flat. Loading screen: animowany blob jako loader.

Najczęstsze pytania

Jak użyć bloba jako maski obrazu w CSS?

Skopiuj path: clip-path: path("M...") lub użyj SVG clipPath. CSS: .avatar { clip-path: path("M 100..."); }. Animacja: @keyframes morph { 0% { clip-path: path("M..."); } 100% { clip-path: path("M..."); } }. Oba paths muszą mieć tę samą liczbę węzłów.

Jak wyeksportować bloba do Figma?

Skopiuj kod SVG. W Figma: File → Import lub wklej jako wektor (Paste in Place). Figma importuje SVG jako edytowalne wektory. Możesz edytować węzły (Edit Vector) i zmieniać kolory. Alternatywnie: skopiuj path d="..." i utwórz Vector Shape ręcznie.

Ile węzłów (nodes) ma idealny blob?

6-8 węzłów: optymalnie – naturalny wygląd bez zbyt wielu "dziobów". Mniej niż 5: trójkąt lub kwadrat z zaokrągleniami, zbyt geometryczny. Więcej niż 12: skomplikowany, "nerwowy" kształt. Dla animowanego morph: parzysty liczba węzłów.

Czy można animować blob przez CSS bez JavaScript?

Tak: w SVG (SMIL) lub CSS @keyframes z clip-path. Ograniczenie: animacja CSS clip-path wymaga identycznej liczby punktów w kształcie startowym i końcowym. Lepsze rozwiązanie: JavaScript z interpolacją węzłów (flubber library).

Jak uniknąć "dziobów" (sharp spikes) w blobie?

Zwiększ parametr "gładkości" (smoothness) – dłuższe tangenty Beziera. Zmniejsz "variancję" – mniejsze przesunięcia węzłów od okręgu. Minimalny promień węzła: > 30% maksymalnego (żeby nie tworzyć wgłębień zbyt głębokich).

Powiązane narzędzia: generator wielokątów SVG, generator fal SVG i generator gradientów CSS.