Blob Generator
Generate organic SVG blob shapes from a reproducible seed
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480"><path d="M240 63.606C290.04 63.238 365.868 107.717 392.034 152.223C418.199 196.729 422.334 287.838 396.995 330.641C371.656 373.444 293.74 408.228 240 409.041C186.26 409.854 99.259 377.953 74.557 335.518C49.856 293.083 64.218 199.751 91.792 154.432C119.366 109.113 189.96 63.974 240 63.606Z" fill="#6366f1" stroke="none" stroke-width="0"/></svg>
¿Qué es el generador de blobs?
El generador de blobs crea formas SVG orgánicas y suaves para landing pages, avatares, decoración, ilustraciones y fondos de secciones. Cada blob parte de una semilla, así que la misma semilla con los mismos ajustes reproduce siempre la misma forma.
Cómo usarlo
- 1.Ajusta la complejidad (número de puntos) y la irregularidad, o pulsa Aleatorio para una semilla nueva.
- 2.Define el ancho y el alto entre 64 y 2048 px.
- 3.Elige un relleno sólido o un degradado de dos colores con ángulo, y un trazo opcional.
- 4.Copia el SVG o un componente JSX de React, descarga el SVG o exporta un PNG a 1×, 2× o 3×.
- 5.Usa Restablecer para volver al blob predeterminado.
Salidas y opciones
La salida SVG conserva un viewBox, por lo que escala sin pérdida. Los rellenos degradados usan un id derivado de los ajustes, lo que evita conflictos entre varios blobs en línea en la misma página. La salida JSX es un componente que pasa las props al elemento svg. El modo border-radius de CSS crea un blob más ligero con un border-radius de 8 valores sobre una caja, con su propio CSS para copiar.
Límites y privacidad
Las formas son curvas cerradas y suaves alrededor del centro; una irregularidad mayor crea hendiduras más profundas. Las formas del modo CSS difieren de las SVG con la misma semilla y no se pueden exportar como PNG. La generación y el renderizado PNG ocurren en tu navegador.
