Generator forme blob SVG

Exemple de folosire a blob-urilor

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

.hero {
  position: relative;
  isolation: isolate;
}

.hero .blob {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 360px;
  z-index: -1;
  pointer-events: none;
}

@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  50% { border-radius: 63% 37% 38% 62% / 55% 61% 39% 45%; }
}

.blob {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  animation: blob-morph 8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

.avatar-blob {
  width: 220px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 58% 42% 35% 65% / 45% 60% 40% 55%;
}

<path fill="#06b6d4" d="M100,20 C...Z">
  <animate attributeName="d" dur="8s" repeatCount="indefinite"
    calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.55 1;0.45 0 0.55 1"
    values="M100,20 C...Z;M100,26 C...Z;M100,20 C...Z"/>
</path>

Cum folosești generatorul de blob-uri

1. Alege tehnica: SVG (path) pentru forme complexe sau CSS (border-radius) pentru o formă simplă, fără fișier.
2. Reglează complexitatea (3–12 puncte), neregularitatea și mărimea. Apasă ↻ Altă formă până îți place rezultatul.
3. Alege umplerea: o culoare sau gradient din două culori.
4. Bifează animația de transformare dacă vrei ca forma să se schimbe lent, și alege durata.
5. Copiază codul sau descarcă fișierul .svg. Formele se calculează în browser; nimic nu e trimis către server.

Cum se desenează forma

Generatorul pune punctele pe un cerc, apoi mută fiecare punct puțin, după o sămânță numerică. Prin puncte trece o curbă netedă (Catmull-Rom), transformată în curbe Bézier cubice (C), pe care le înțelege orice browser. Aceeași sămânță dă mereu aceeași formă, așa că poți reveni la ea.

Animația: SMIL în SVG sau border-radius în CSS

La varianta SVG, animația folosește elementul <animate attributeName="d"> din SVG. Funcționează în Chrome, Edge, Firefox și Safari, pentru că ambele forme au același număr de puncte și aceleași comenzi. Există și varianta din CSS, cu d: path(...) în @keyframes, dar Safari nu o suporta la data scrierii, așa că generatorul n-o folosește.

.blob {
  width: 300px;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}

La varianta CSS, cele opt procente din border-radius (patru orizontale / patru verticale) sunt alese astfel încât perechile de pe aceeași latură să dea 100%, ca forma să rămână rotunjită pe toată latura. Animația se face între două seturi de procente și se oprește când utilizatorul a cerut mai puțină mișcare (prefers-reduced-motion).

Întrebări frecvente

Cum folosesc blob-ul ca fundal în spatele unui text?

Pune SVG-ul într-un element cu position: absolute și z-index: -1 în interiorul unei secțiuni cu position: relative, sau folosește fișierul .svg ca background-image.

De ce am nevoie de același număr de puncte pentru animație?

Browserul interpolează fiecare număr din d spre numărul corespunzător din a doua formă. Dacă formele au alte comenzi, nu se poate face tranziția și forma sare direct.