Ondulación
Gratis, sin registro, funciona en tu navegador.
Once puntos con poca amplitud: un borde fino y regular en lugar de una declaración de intenciones. Buena cuando un divisor tiene que existir sin llamar la atención, y el único preajuste que se lee bien como una franja estrecha.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 11 |
| Amplitud | 30% |
| Aleatoriedad | 8% |
| Línea base | 55% |
| Capas | 1 |
| Suavidad | 95% |
| Semilla | 77 |
Lo que conviene saber
- La poca amplitud evita que la sección de abajo pierda altura.
- Muchos puntos significan muchos segmentos cúbicos, así que esta es la onda más pesada del catálogo con 655 bytes.
- Casi sin aleatoriedad, así que la repetición es lo bastante regular como para que parezca un patrón en una pantalla ancha.
Lo que cuesta en bytes
Esta forma exacta ocupa 655 bytes como SVG y 816 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 | 655 B |
| Fondo CSS | 816 B |
| clip-path CSS | 847 B |
El comienzo del SVG de Ondulación
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-130.91 159.28C-110.18 161.55,-41.45 168.2,0 173.6C41.45 178.99,89.45 188.64,130.91 193.36C172.36 198.08,220.36 201.74,261.82 203.4C303.27 205.07,351.27 204.33,392.73 203.88C434.18 203.43,482.18 203.29,523.64 200.54C565.…Con más detalle
Este es el preajuste donde el contador de bytes se gana su sitio. Cada punto extra es otro segmento cúbico completo — tres pares de coordenadas — así que una ondulación cuesta varias veces lo que una onda suave para una diferencia que la mayoría de los visitantes nunca notará conscientemente. Si te gusta el aspecto pero no el peso, prueba con seis puntos y la suavidad más alta.
Preguntas
¿Cómo cambio Ondulación una vez la tengo?
Abre el generador, pulsa Ondulación 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 77 con 11 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.