Zigzag marcado
Gratis, sin registro, funciona en tu navegador.
Nueve puntos unidos por líneas rectas en lugar de una curva. Aquí las esquinas son la forma, y suavizarlas aunque sea un poco convierte un zigzag en una mala onda: por eso es un estilo de unión aparte y no el control de suavidad bajado.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 9 |
| Amplitud | 58% |
| Aleatoriedad | 6% |
| Línea base | 55% |
| Capas | 1 |
| Suavidad | 100% |
| Semilla | 2024 |
Lo que conviene saber
- Segmentos rectos, así que el archivo es una fracción del tamaño de una curva por los mismos puntos.
- Mantén baja la aleatoriedad: un zigzag se lee como deliberado solo mientras los dientes coinciden.
- Con 264 bytes es una de las formas más pequeñas del catálogo.
Lo que cuesta en bytes
Esta forma exacta ocupa 264 bytes como SVG y 425 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 | 264 B |
| Fondo CSS | 425 B |
| clip-path CSS | 456 B |
El comienzo del SVG de Zigzag marcado
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-160 140.02L0 177.61L160 215.5L320 236.17L480 227.82L640 197.67L800 154.53L960 121.73L1120 116.94L1280 139.19L1440 177.19L1440 320L-160 320Z" fill="#4f46e5"/></svg>Con más detalle
Este es con diferencia el divisor más barato de aquí, porque un segmento de línea cuesta un par de coordenadas donde una cúbica cuesta tres. Si vas a añadir un divisor a una página que ya pesa, un zigzag de nueve puntos cuesta menos que una onda suave de cuatro y es, probablemente, la forma más llamativa.
Preguntas
¿Cómo cambio Zigzag marcado una vez la tengo?
Abre el generador, pulsa Zigzag marcado 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 2024 con 9 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.