Escalones
Gratis, sin registro, funciona en tu navegador.
Cada tramo avanza en horizontal hasta el punto medio, gira en vertical y continúa: un perfil de escalera. El giro ocurre en el punto medio y no en el punto en sí, que es lo que mantiene los peldaños uniformes.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 5 |
| Amplitud | 60% |
| Aleatoriedad | 18% |
| Línea base | 52% |
| Capas | 1 |
| Suavidad | 100% |
| Semilla | 1111 |
Lo que conviene saber
- Solo ángulos rectos, así que encaja bien con una maquetación basada en rejilla.
- Menos puntos dan peldaños más anchos y rotundos; más puntos se acercan a una línea dentada.
- Con 358 bytes cuesta más o menos lo mismo que una onda suave por los mismos puntos.
Lo que cuesta en bytes
Esta forma exacta ocupa 358 bytes como SVG y 519 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 | 358 B |
| Fondo CSS | 519 B |
| clip-path CSS | 550 B |
El comienzo del SVG de Escalones
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 118.84L-144 118.84L-144 177.26L0 177.26L144 177.26L144 214.27L288 214.27L432 214.27L432 202.99L576 202.99L720 202.99L720 140.25L864 140.25L1008 140.25L1008 117.08L1152 117.08L1296 117.08L1296 171.17L1440 171.17L1440…Con más detalle
Escalonar en el punto medio es el detalle que hace que esto funcione. Girar en el punto en sí haría que cada peldaño fuera el doble de ancho que su vecino, lo que se lee como un fallo de renderizado y no como un diseño — y es la versión que sale de la implementación obvia.
Preguntas
¿Cómo cambio Escalones una vez la tengo?
Abre el generador, pulsa Escalones 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 1111 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.