Flor
Gratis, sin registro, funciona en tu navegador.
Los mismos radios alternos que una estrella, pero con la suavidad al máximo, de modo que cada punta se convierte en un pétalo redondeado. El resultado es botánico más que geométrico, y funciona bien grande y pálido detrás del contenido.
Los ajustes que hay detrás
| Generador | Blob |
|---|---|
| Puntos | 6 |
| Aleatoriedad | 10% |
| Suavidad | 150% |
| Semilla | 701 |
Lo que conviene saber
- La suavidad máxima convierte cada pico en un pétalo.
- Seis pétalos es lo más parecido a una flor; cuatro se lee como un trébol y diez como una margarita.
- Con 557 bytes es la forma más detallada de aquí, porque doce puntos llevan cada uno un segmento cúbico.
Lo que cuesta en bytes
Esta forma exacta ocupa 557 bytes como SVG y 718 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 | 557 B |
| Fondo CSS | 718 B |
| clip-path CSS | 775 B |
| border-radius CSS | 104 B |
El comienzo del SVG de Flor
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 37.57C108.24 37.5,102.78 63.66,116.56 71.31C130.34 78.96,151.28 61,155.12 68.18C158.96 75.35,131.93 84.08,131.94 100C131.95 115.92,159.03 124.73,155.15 131.84C151.28 138.96,130.22 121.26,116.43 128.46C102.64 135.66,108.05 160.93,100 160.64C91.9…Con más detalle
Esta es la forma más cara del catálogo, y el contador de bytes lo deja a la vista antes de que la publiques. Si quieres el aspecto por menos, baja a cuatro pétalos: reduce el coste a la mitad y, a los tamaños en que se suele usar una forma de fondo, la diferencia es difícil de ver.
Preguntas
¿Cómo cambio Flor una vez la tengo?
Abre el generador, pulsa Flor 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 701 con 6 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.