Festón
Gratis, sin registro, funciona en tu navegador.
Nueve arcos circulares a lo ancho: el clásico borde festoneado que se ve en toldos, entradas y tablas de precios. Los arcos llevan la forma, así que este estilo ignora por completo el control de aleatoriedad.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 9 |
| Amplitud | 48% |
| Aleatoriedad | 0% |
| Línea base | 55% |
| Capas | 1 |
| Suavidad | 100% |
| Semilla | 300 |
Lo que conviene saber
- Arcos reales en lugar de curvas aproximadas, así que todos los bultos son idénticos.
- La amplitud controla lo profundos que son los festones, desde una ondulación leve hasta semicírculos.
- Con 382 bytes pesa menos que una onda suave de detalle comparable.
Lo que cuesta en bytes
Esta forma exacta ocupa 382 bytes como SVG y 543 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 | 382 B |
| Fondo CSS | 543 B |
| clip-path CSS | 574 B |
El comienzo del SVG de Festón
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-160 176A80 52.53 0 0 1 0 176A80 52.53 0 0 1 160 176A80 52.53 0 0 1 320 176A80 52.53 0 0 1 480 176A80 52.53 0 0 1 640 176A80 52.53 0 0 1 800 176A80 52.53 0 0 1 960 176A80 52.53 0 0 1 1120 176A80 52.53 0 0 1 1280 176A80 5…Con más detalle
El control de aleatoriedad se oculta en este estilo en lugar de dejarse inerte. Los festones se definen por ser regulares: dejar que el ruido mueva los extremos de los arcos daría bultos a alturas inconsistentes, lo que se lee como un fallo de renderizado y no como textura, así que el generador mantiene los puntos en la línea base y deja que los arcos hagan el trabajo.
Preguntas
¿Cómo cambio Festón una vez la tengo?
Abre el generador, pulsa Festó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 300 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.