Ondas en capas
Gratis, sin registro, funciona en tu navegador.
Tres curvas dibujadas desde la misma semilla en fases distintas, cada una un poco más abajo y con un poco menos de opacidad. Compartir la semilla es lo importante: capas de semillas no relacionadas parecen tres ondas que se solapan por casualidad, mientras que desfases de una misma onda parecen profundidad.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 5 |
| Amplitud | 62% |
| Aleatoriedad | 22% |
| Línea base | 42% |
| Capas | 3 |
| Suavidad | 100% |
| Semilla | 3311 |
Lo que conviene saber
- La opacidad aumenta hacia el frente, así que la pila se lee como distancia y no como tres láminas planas.
- Cada capa es un trazado aparte, así que puedes recolorearlas por separado después de pegarlas.
- Tres trazados cuestan 898 bytes juntos — aún menos que un PNG pequeño de lo mismo.
Lo que cuesta en bytes
Esta forma exacta ocupa 898 bytes como SVG y 1071 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 | 898 B |
| Fondo CSS | 1071 B |
| clip-path CSS | 544 B |
El comienzo del SVG de Ondas en capas
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-…Con más detalle
Las capas son la forma más barata de que un divisor plano parezca diseñado, y la que más se abusa. Con dos suele bastar; con cinco las capas traseras están tan desvaídas que añaden bytes sin añadir profundidad. Si quieres más separación, amplía la distancia entre las líneas base en lugar de añadir otra capa.
Preguntas
¿Cómo cambio Ondas en capas una vez la tengo?
Abre el generador, pulsa Ondas en capas 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 3311 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.