Burbuja
Gratis, sin registro, funciona en tu navegador.
Doce puntos con la aleatoriedad baja, lo que produce algo casi circular pero visiblemente hecho a mano. Bueno cuando un círculo perfecto quedaría estéril pero un blob quedaría demasiado desenfadado.
Los ajustes que hay detrás
| Generador | Blob |
|---|---|
| Puntos | 12 |
| Aleatoriedad | 20% |
| Suavidad | 100% |
| Semilla | 7211 |
Lo que conviene saber
- Muchos puntos con poca aleatoriedad convergen hacia un círculo con una ondulación lenta.
- El blob más caro de aquí con 559 bytes, porque cada punto añade un segmento cúbico.
- Si quieres este aspecto a bajo coste, usa seis puntos y baja la aleatoriedad.
Lo que cuesta en bytes
Esta forma exacta ocupa 559 bytes como SVG y 720 bytes como fondo CSS — el data URI es mayor porque la codificación en porcentaje cuesta tres caracteres por cada uno que escapa. Ambas cifras corresponden a la forma mostrada arriba, con dos decimales de precisión en las coordenadas.
| Formato | Tamaño |
|---|---|
| SVG | 559 B |
| Fondo CSS | 720 B |
| clip-path CSS | 777 B |
| border-radius CSS | 106 B |
El comienzo del SVG de Burbuja
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 36.37C110.36 36.38,121.78 40.94,131.07 46.18C140.36 51.42,150.78 58.85,155.74 67.82C160.71 76.79,160.7 89.18,160.87 100C161.04 110.82,161.46 123.37,156.74 132.76C152.02 142.15,141.99 151.34,132.53 156.35C123.08 161.35,110.54 163.31,100 162.79C8…Con más detalle
Este preajuste es la ilustración más clara de un intercambio que esta herramienta intenta hacer visible: doce puntos cuestan aproximadamente el doble de bytes que seis, y con poca aleatoriedad la diferencia entre ambos es una ondulación que casi nadie registrará conscientemente. El contador de bytes está bajo el cuadro de salida precisamente para que esa elección se tome a conciencia y no por omisión.
Preguntas
¿Cómo cambio Burbuja una vez la tengo?
Abre el generador, pulsa Burbuja en la fila de preajustes y arrastra lo que quieras. El preajuste es un punto de partida, no un candado: todos los controles siguen activos, y la casilla de semilla acepta una palabra si prefieres nombrar tu forma en vez de numerarla.
¿Se verá igual la próxima vez?
Sí, siempre que la semilla sea la misma. Esta es la semilla 7211 con 12 puntos. El generador es determinista, así que esos ajustes reproducen esta curva exacta en cualquier dispositivo.
¿Puedo usar otro color?
Sí — el color se aplica al exportar, no está incrustado en la geometría. La vista previa de arriba usa el color por defecto; elige el tuyo en el generador y el SVG, el fondo CSS y el clip-path lo seguirán.
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.