Borde de nube
Gratis, sin registro, funciona en tu navegador.
Los mismos arcos que un festón pero muchos menos y mucho más profundos, lo que deja de leerse como un borde decorativo y empieza a leerse como un objeto: concretamente, como una nube. Bueno encima de un pie de página o debajo de un hero cuando quieres algo amable en lugar de neutro.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 5 |
| Amplitud | 82% |
| Aleatoriedad | 0% |
| Línea base | 50% |
| Capas | 1 |
| Suavidad | 100% |
| Semilla | 301 |
Lo que conviene saber
- Pocos arcos y grandes: cuantos menos bultos, más se lee como una forma que como un remate.
- Acompáñalo de un color suave; a esta escala uno saturado domina la sección.
- Solo 295 bytes para una forma de este tamaño.
Lo que cuesta en bytes
Esta forma exacta ocupa 295 bytes como SVG y 456 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 | 295 B |
| Fondo CSS | 456 B |
| clip-path CSS | 487 B |
El comienzo del SVG de Borde de nube
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 160A144 99.71 0 0 1 0 160A144 99.71 0 0 1 288 160A144 99.71 0 0 1 576 160A144 99.71 0 0 1 864 160A144 99.71 0 0 1 1152 160A144 99.71 0 0 1 1440 160L1440 320L-288 320Z" fill="#4f46e5"/></svg>Con más detalle
Prueba este volteado en vertical y con los arcos recortados hacia dentro. Los mismos cinco arcos que se leen como una nube colgando se leen como una hilera de hornacinas cuando muerden hacia arriba en el relleno, y eso es un divisor genuinamente distinto a partir de los mismos cuatro ajustes.
Preguntas
¿Cómo cambio Borde de nube una vez la tengo?
Abre el generador, pulsa Borde de nube 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 301 con 5 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.