Barrido
Gratis, sin registro, funciona en tu navegador.
Dos puntos y mucha suavidad: una única curva de barrido sin repetición alguna. La onda menos ondulada de aquí, y la que mejor funciona cuando el divisor está haciendo trabajo de diseño gráfico y no solo separando dos colores.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 2 |
| Amplitud | 85% |
| Aleatoriedad | 0% |
| Línea base | 52% |
| Capas | 1 |
| Suavidad | 130% |
| Semilla | 5 |
Lo que conviene saber
- Dos puntos es el mínimo que acepta el generador, y da una subida y una bajada.
- Cero aleatoriedad, así que la curva es un barrido matemático limpio.
- La onda más pequeña del catálogo con 246 bytes.
Lo que cuesta en bytes
Esta forma exacta ocupa 246 bytes como SVG y 407 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 | 246 B |
| Fondo CSS | 407 B |
| clip-path CSS | 438 B |
El comienzo del SVG de Barrido
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-720 166.4C-564 166.4,-312 166.4,0 166.4C312 166.4,408 166.4,720 166.4C1032 166.4,1284 166.4,1440 166.4L1440 320L-720 320Z" fill="#4f46e5"/></svg>Con más detalle
Voltea esta en horizontal y cambia de carácter por completo: un barrido tiene dirección, y hacia dónde corre debería coincidir con el recorrido que hace la mirada por la sección de arriba. Por eso también los controles de volteo son un reflejo de la curva existente y no una regeneración: voltear no debe volver a tirar los dados de una forma con la que ya te habías quedado.
Preguntas
¿Cómo cambio Barrido una vez la tengo?
Abre el generador, pulsa Barrido 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 5 con 2 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.