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 570 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 544.5 300 C 547.8 348.34 518.06 422.6 482.73 453.33 C 447.4 484.05 377.71 484.36 332.51 484.35 C 287.3 484.34 260.59 468.1 211.51 453.27 C 162.42 438.44 60.61 434.5 38 395.36 C 15.4 356.22 54.44 272.86 75.85 218.42 C 97.26 163.97 124.1 83.38 166.45 68.69 C 208.8 53.99 280.52 114.47 329.93 130.24 C 379.35 146 427.17 134.99 462.93 163.28 C 498.7 191.58 541.2 251.66 544.5 300 Z" fill="#be253d" stroke="none" stroke-width="0" /></svg>

width: 600

height: 600

points: 9

variance: 0.28

seed:

fill: #be253d

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.