Generator Blobów

Twórz organiczne kształty SVG krzywymi Béziera.

Ustawienia

Krawędzie bloba (wierzchołki)6

Kolczastość (złożoność)60%

Tryb wypełnienia

JednolityLiniowyRadialny

Kolor początkowy

Kolor końcowy

Surowy kod SVG XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
  <defs>
    <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b35" />
      <stop offset="100%" stop-color="#dd2c00" />
    </linearGradient>
  </defs>
  <path d="M 290.9 154.0 Q 328.6 200.0 292.2 248.2 Q 255.7 296.4 194.1 306.7 Q 132.4 317.0 108.4 258.5 Q 84.3 200.0 110.7 145.5 Q 137.1 91.1 195.1 99.5 Q 253.2 107.9 290.9 154.0 Z" fill="url(#blob-grad)" />
</svg>

Komponent React JSX

export const Blob = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
    <defs>
      <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#ff6b35" />
        <stop offset="100%" stopColor="#dd2c00" />
      </linearGradient>
    </defs>
    <path d="M 290.9 154.0 Q 328.6 200.0 292.2 248.2 Q 255.7 296.4 194.1 306.7 Q 132.4 317.0 108.4 258.5 Q 84.3 200.0 110.7 145.5 Q 137.1 91.1 195.1 99.5 Q 253.2 107.9 290.9 154.0 Z" fill="url(#blob-grad)" />
  </svg>
);

Reklama

Jak to działa

Dostosuj losowość i złożoność, aby ukształtować organiczną plamę.
Wybierz kolory i gradient wypełnienia.
Regeneruj, aż uzyskasz kształt, który Ci odpowiada.
Wyeksportuj surowy kod SVG lub gotowy do użycia komponent React JSX.

Do czego służy

Dodanie organicznego kształtu tła na stronie docelowej.
Tworzenie dekoracyjnych plam do systemu projektowego.
Wstawienie plamy SVG wprost do projektu React jako komponentu.

Reklama

Warto wiedzieć

Plamy są generowane proceduralnie: regeneruj, aby eksplorować warianty, zamiast edytować pojedyncze punkty.
Bardzo wysoka złożoność daje dłuższe dane ścieżek; prostsze plamy utrzymują lekkość pliku SVG.

Najczęstsze pytania

Czy mogę użyć plamy bezpośrednio w React?

Tak, wyeksportuj jako komponent JSX i wstaw go do projektu lub weź surowy SVG dla dowolnego innego stosu.

Czy kształty są potem edytowalne?

Wyeksportowany plik SVG to standardowy wektor, który dopracujesz w dowolnym edytorze, choć samo narzędzie działa przez regenerację, a nie edycję punktów.

Czy cokolwiek jest przesyłane?

Nie. Generowanie i eksport odbywają się w całości w Twojej przeglądarce.

Powiązane narzędzia

Przeglądarka DXF

Paleta Kolorów

Konwerter Kolorów

Generator Box Shadow CSS

Sprawdzanie Kontrastu