Onda profunda
Gratis, sin registro, funciona en tu navegador.
Tres puntos y casi toda la amplitud, lo que da un valle profundo y mucho color por debajo. Úsala donde el divisor deba ser la transición en sí y no un detalle en el borde de una.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 3 |
| Amplitud | 92% |
| Aleatoriedad | 18% |
| Línea base | 50% |
| Capas | 1 |
| Suavidad | 110% |
| Semilla | 820 |
Lo que conviene saber
- Tres puntos producen una única caída clara en lugar de un patrón repetido.
- La amplitud alta se come espacio vertical, así que deja respirar a la sección de debajo.
- Reproducible desde la semilla 820 — anótala si necesitas la misma curva en otra página.
Lo que cuesta en bytes
Esta forma exacta ocupa 282 bytes como SVG y 443 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 | 282 B |
| Fondo CSS | 443 B |
| clip-path CSS | 474 B |
El comienzo del SVG de Onda profunda
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-480 80.61C-392 97.56,-176 145.02,0 173.07C176 201.12,304 252.99,480 233.6C656 214.21,784 82.6,960 67.28C1136 51.96,1352 134.87,1440 150.04L1440 320L-480 320Z" fill="#4f46e5"/></svg>Con más detalle
Una onda profunda es la forma más fácil de que quede mal, porque a plena amplitud la curva tiene que arquearse mucho y una zona plana donde toca el borde se ve al instante. El generador muestrea un punto más allá de cada borde del lienzo y deja que el viewBox lo recorte, así que el movimiento continúa fuera de pantalla en lugar de terminar en el límite — que es lo que hace que esto se lea como un fragmento de una onda más larga y no como un garabato cerrado en sí mismo.
Preguntas
¿Cómo cambio Onda profunda una vez la tengo?
Abre el generador, pulsa Onda profunda 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 820 con 3 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.