Onda suave
Gratis, sin registro, funciona en tu navegador.
El preajuste por defecto por una razón: cuatro puntos, amplitud moderada y casi nada de aleatoriedad producen una curva que se lee como deliberada y no como decorativa. Esta es la forma que la mayoría de la gente tiene en mente cuando dice que quiere una onda bajo su sección principal.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 4 |
| Amplitud | 38% |
| Aleatoriedad | 12% |
| Línea base | 55% |
| Capas | 1 |
| Suavidad | 100% |
| Semilla | 1204 |
Lo que conviene saber
- La poca aleatoriedad la mantiene simétrica, así que no compite por la atención con lo que tiene encima.
- Cuatro puntos es lo mínimo que todavía da una subida y una bajada: menos se convierte en un barrido, más en una ondulación.
- Con 322 bytes es lo bastante pequeña como para insertarla en línea en vez de pedirla como archivo.
Lo que cuesta en bytes
Esta forma exacta ocupa 322 bytes como SVG y 483 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 | 322 B |
| Fondo CSS | 483 B |
| clip-path CSS | 514 B |
El comienzo del SVG de Onda suave
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></sv…Con más detalle
Si vas a cambiar una cosa, cambia la línea base y no la amplitud. Aquí la amplitud es una parte del espacio entre la línea base y el borde más cercano, así que subirla en una onda centrada la hace más profunda, mientras que mover la línea base cambia cuánto color sólido queda bajo la curva — que suele ser lo que la gente quiere de verdad cuando un divisor parece demasiado fino.
Preguntas
¿Cómo cambio Onda suave una vez la tengo?
Abre el generador, pulsa Onda suave 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 1204 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.