Generador de blobs SVG
Crea formas blob SVG orgánicas y suaves con puntos, aleatoriedad y semillas ajustables. Relleno sólido, degradado o contorno; descarga el .svg o copia el data URI CSS.
Ajustes del blob
Los mismos ajustes y la misma semilla siempre producen la misma forma.
Vista previa
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");Herramientas Relacionadas
Ver Todas¿Qué es Generador de blobs SVG?
Genera formas blob suaves y orgánicas en SVG. Controla el número de puntos de anclaje, lo irregular que es la forma y su tamaño, elige un relleno sólido, en degradado o solo contorno, y exporta como archivo .svg o como data URI de CSS.
Cómo usar Generador de blobs SVG
- Elige el Relleno (Sólido, Degradado o Solo contorno) y el color o los colores.
- Ajusta los Puntos de anclaje, la Aleatoriedad y el Tamaño.
- Haz clic en Aleatorio o introduce una Semilla para una forma concreta.
- Descarga el .svg o copia el código SVG.
- O copia el Fondo CSS (data URI).
Ejemplo
Puntos 4, aleatoriedad 0, tamaño 100, sólido #8a3ffc
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>
Cuándo usar Generador de blobs SVG
Usa los blobs como fondos decorativos, máscaras de imagen, marcos de avatar o acentos de ilustración. Con aleatoriedad 0 obtienes casi un círculo; para formas geométricas exactas usa border-radius o clip-path de CSS.
Cómo funciona Generador de blobs SVG
Los puntos de anclaje se reparten uniformemente alrededor de un círculo (radio del 45 % del tamaño). La distancia de cada punto al centro se reduce en una cantidad pseudoaleatoria con semilla de hasta el 60 % × aleatoriedad. Una spline Catmull-Rom cerrada que pasa por los puntos se convierte en comandos Bézier cúbicos, lo que garantiza un contorno suave sin picos. Los rellenos en degradado usan un linearGradient SVG de arriba a la izquierda a abajo a la derecha.
Casos de Uso Comunes
- Formas decorativas de fondo en landing pages
- Máscaras de imagen para fotos de perfil
- Acentos de ilustración y stickers
- Blobs animados que cambian de forma (genera varios con semillas distintas)
- Placeholders en presentaciones
Preguntas Frecuentes
¿Puedo recrear un blob que me gustó?
Sí. Guarda la Semilla junto con los puntos, la aleatoriedad y el tamaño; siempre producen el mismo trazado.
¿Cómo uso un blob como máscara de imagen?
Pon el trazado dentro de un <clipPath> de SVG o usa el SVG descargado con mask-image de CSS.
¿Por qué el blob nunca toca los bordes?
El radio máximo es el 45 % del tamaño, lo que deja un pequeño margen para que los contornos y el antialiasing no se corten.