Blob sin nada de SVG
Gratis, sin registro, funciona en tu navegador.
Cuando quieres una forma orgánica pero no puedes —o prefieres no— añadir un SVG: una biblioteca de componentes cuyo marcado no controlas, una plantilla de correo, un bloque de CMS que elimina elementos desconocidos.
La receta
| Forma | Guijarro |
|---|---|
| Exportar como | border-radius CSS |
| Tamaño | 104 B |
Paso a paso
- Cambia al generador de blobs y elige Guijarro.
- Escoge border-radius CSS en la fila de exportación.
- Copia la declaración sobre cualquier elemento que ya tenga ancho y alto.
- Ajusta la aleatoriedad y vuelve a copiar hasta que la silueta encaje: solo hay cuatro esquinas con las que trabajar.
Lo que vas a copiar
.blob {
width: 320px;
height: 320px;
border-radius: 46% 52.2% 40.5% 40% / 49.8% 56.1% 39.1% 45%;
}Con más detalle
Ten claro a qué renuncias. Un blob de border-radius tiene cuatro esquinas, cada una un cuarto de arco elíptico, así que solo puede ser un rectángulo redondeado deformado: no puede tener seis lóbulos por mucho que elijas los números. Lo que ganas a cambio es real: una propiedad, nada de marcado extra, y transiciona y se anima con suavidad, cosa que un trazado SVG no hace sin bastante más trabajo.
Preguntas
¿De qué forma debería partir para Blob sin nada de SVG?
Guijarro, exportada como border-radius CSS. Esa combinación es la que vertebra esta página, y la vista previa de arriba es exactamente esa forma — pero es un punto de partida, no una regla. Todos los controles siguen activos en cuanto la abres.
¿Cuánto añade a la página?
Unos 104 bytes para esta combinación. Es menos que un solo icono y no necesita ninguna petición de red, porque la forma es marcado y no un archivo de imagen.
¿Funcionará en móvil?
Sí. Un divisor de onda está configurado para estirarse hasta su contenedor en lugar de mantener su proporción, que es lo que permite que una sola forma cubra cualquier ancho de pantalla sin bandas negras. Los blobs mantienen sus proporciones, porque un blob estirado no es más que una elipse.
Cada cifra y cada forma de esta página se produjeron ejecutando el generador durante la compilación, así que describen la herramienta que estás a punto de usar y no una versión que existió una vez.