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 576 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 496.49 300 C 512.34 348.71 548.8 454 521.7 486.03 C 494.6 518.06 393.76 483.48 333.89 492.18 C 274.01 500.88 212.8 553.99 162.46 538.22 C 112.12 522.46 44.74 450.34 31.85 397.6 C 18.96 344.86 60.93 273.55 85.13 221.79 C 109.33 170.04 133.18 119.9 177.08 87.09 C 220.97 54.28 306.91 7.16 348.5 24.94 C 390.09 42.71 401.95 147.92 426.61 193.76 C 451.28 239.6 480.64 251.29 496.49 300 Z" fill="#a790ae" stroke="none" stroke-width="0" /></svg>

width: 600

height: 600

points: 9

variance: 0.28

seed:

fill: #a790ae

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.