Generador de Blobs SVG

¿Qué es un generador de blobs SVG?

Un generador de blobs SVG crea formas orgánicas cerradas muestreando puntos alrededor de un círculo y conectándolos con curvas Bézier suaves. El resultado es una silueta blanda y fluida — el tipo de forma que ves detrás de un hero de marketing, alrededor de una foto de perfil o como blob de fondo en una landing.

Los blobs viven en el punto dulce entre la geometría y la aleatoriedad. Ajusta el número de puntos para obtener formas tipo gomita (3-4), guijarro (5-6) o caóticas (10+). Mueve la aleatoriedad para ir de casi-círculo a salvajemente distorsionado. Pulsa el dado para tirar una semilla nueva en cualquier momento.

Todo se ejecuta en tu navegador. Exporta como snippet SVG listo para copiar, archivo .svg descargable o valor clip-path de CSS que puedes aplicar directamente a cualquier elemento HTML para enmascararlo con la forma del blob.

Lo que aprenderás haciendo blobs

• Las curvas Bézier cúbicas dan al blob su suavidad — cada par de puntos adyacentes tiene dos handles de control, calculados para que la tangente sea continua en cada unión.
• Los splines Catmull-Rom (usados aquí) derivan automáticamente esos handles de los puntos vecinos, así no tienes que ajustar control points a mano para mantener la curva suave.
• El CSS clip-path: path(...) puede aplicar una forma de blob a cualquier elemento — imagen, div, video — sin afectar su caja de layout.

Cómo generar un blob paso a paso

1. 1

   Elige el número de puntos

   Menos puntos (3-5) producen blobs tipo gomita. Más puntos (8-12) producen formas más guijarradas e irregulares.

2. 2

   Ajusta la aleatoriedad

   0% es un círculo. 50% da curvas con forma suave de blob. 100% da siluetas salvajemente distorsionadas y dramáticas.

3. 3

   Elige color o degradado

   Relleno sólido o activa Degradado y escoge dos colores más un ángulo. Coincide con patrones populares de secciones hero.

4. 4

   Aleatoriza y exporta

   Pulsa el dado para tirar una semilla nueva. Cuando te guste, copia el SVG, copia el clip-path de CSS o descarga el .svg.

Dónde funcionan mejor los blobs

Tres formas comunes de usar un blob y qué tener en cuenta.

Ejemplos de blobs para probar

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Bienvenido a Coddy</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Errores comunes con blobs SVG

• Olvidar viewBox y dar al <svg> un width/height fijo. La forma no escalará — usa viewBox más width/height en CSS.
• Animar paths rellenos grandes cada frame. La rasterización de paths es cara; usa transform/opacity o un blur de CSS para que la GPU lo gestione.
• Copiar el <svg> inline en Tailwind/Bootstrap y heredar display: inline en vez de block. El gap del baseline deja unos píxeles bajo la forma.

Preguntas frecuentes