Onda orgánica
Gratis, sin registro, funciona en tu navegador.
Siete puntos con la aleatoriedad casi al máximo, así que la curva vaga en lugar de repetirse. Se lee como dibujada y no como calculada, que es exactamente lo que una onda sinusoidal regular no puede hacer.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 7 |
| Amplitud | 70% |
| Aleatoriedad | 85% |
| Línea base | 50% |
| Capas | 1 |
| Suavidad | 100% |
| Semilla | 9142 |
Lo que conviene saber
- Mucha aleatoriedad significa que la semilla importa: cámbiala y obtienes una curva genuinamente distinta, no una desplazada.
- Sigue siendo perfectamente suave: la aleatoriedad mueve los puntos, no afecta a cómo pasa la curva por ellos.
- Baraja hasta que algo te guste y luego anota la semilla 9142 para conservarla.
Lo que cuesta en bytes
Esta forma exacta ocupa 478 bytes como SVG y 639 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 | 478 B |
| Fondo CSS | 639 B |
| clip-path CSS | 670 B |
El comienzo del SVG de Onda orgánica
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-205.71 191.31C-171.43 178.3,-68.57 110.51,0 113.21C68.57 115.91,137.14 202.67,205.71 207.53C274.29 212.39,342.86 145,411.43 142.35C480 139.71,548.57 197.9,617.14 191.66C685.71 185.41,754.29 115.82,822.86 104.89C891.43 9…Con más detalle
El control de aleatoriedad mezcla entre una sinusoide y ruido con semilla en vez de alternar entre ambos, y eso importa más de lo que parece. La sinusoide pura parece una demostración de CSS y el ruido puro parece un error; todo lo que alguien publica de verdad está en algún punto intermedio, y un único control que recorre esa línea es más útil que dos modos que producen cada uno una respuesta equivocada.
Preguntas
¿Cómo cambio Onda orgánica una vez la tengo?
Abre el generador, pulsa Onda orgánica 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 9142 con 7 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.