Generador de Blobs

Genera formas SVG orgánicas con curvas Bézier personalizadas.

Ajustes

Bordes del blob (vértices)6

Espinas (complejidad)60%

Modo de relleno

SólidoLinealRadial

Color inicial

Color final

Código SVG XML sin procesar

<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.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
</svg>

Componente 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.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
  </svg>
);

Cómo funciona

Ajusta la aleatoriedad y la complejidad para dar forma a un blob orgánico.
Elige los colores y un degradado para el relleno.
Regenera hasta obtener una forma que te guste.
Exporta el código SVG en bruto o un componente React JSX listo para usar.

Para qué se usa

Añadir una forma de fondo orgánica a una landing page.
Crear blobs decorativos para un sistema de diseño.
Insertar un blob SVG directamente en un proyecto React como componente.

Bueno saberlo

Los blobs se generan de forma procedural: regenera para explorar variaciones en lugar de editar puntos individuales.
Una complejidad muy alta produce datos de trazado más largos; los blobs más simples mantienen el SVG ligero.

Preguntas frecuentes

¿Puedo usar el blob directamente en React?

Sí: expórtalo como componente JSX e insértalo en tu proyecto, o toma el SVG en bruto para cualquier otro stack.

¿Se pueden editar las formas después?

El SVG exportado es vectorial estándar que puedes afinar en cualquier editor, aunque la herramienta en sí funciona por regeneración y no por edición de puntos.

¿Se sube algo?

No. La generación y la exportación ocurren por completo en tu navegador.

Herramientas relacionadas

Visor DXF

Paleta de Colores

Conversor de Color

Generador de Box Shadow CSS

Verificador de Contraste