Onda de pie de página
Gratis, sin registro, funciona en tu navegador.
La misma geometría que un divisor de hero, volteada en vertical para que el relleno quede encima de la curva en lugar de debajo. Esa única diferencia es lo que separa una forma que va sobre un pie de página de una que va bajo una cabecera.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 4 |
| Amplitud | 55% |
| Aleatoriedad | 20% |
| Línea base | 48% |
| Capas | 2 |
| Suavidad | 100% |
| Semilla | 640 |
Lo que conviene saber
- Volteada en vertical, así que el área sólida cierra contra la parte superior del lienzo.
- Dos capas dan algo de profundidad sin el peso de tres.
- Colócala justo encima de tu pie de página con el mismo color de fondo que el propio pie.
Lo que cuesta en bytes
Esta forma exacta ocupa 551 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 | 551 B |
| Fondo CSS | 718 B |
| clip-path CSS | 510 B |
El comienzo del SVG de Onda de pie de página
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="…Con más detalle
El volteo vertical no es aquí una transformación CSS, es parte del trazado: la curva se refleja y la cola cierra contra el borde opuesto. Eso significa que el SVG exportado se sostiene solo y no necesita un contenedor con un `transform` encima — lo que importa sobre todo en la exportación como fondo CSS, donde de entrada no hay ningún elemento que transformar.
Preguntas
¿Cómo cambio Onda de pie de página una vez la tengo?
Abre el generador, pulsa Onda de pie de página 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 640 con 4 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.