Borde pixelado
Gratis, sin registro, funciona en tu navegador.
Doce puntos de poca amplitud con mucha aleatoriedad, escalonados. El resultado se lee como un límite pixelado a propósito, útil para cualquier cosa con un registro retro o técnico donde una curva suave resultaría demasiado blanda.
Los ajustes que hay detrás
| Generador | Onda |
|---|---|
| Puntos | 12 |
| Amplitud | 34% |
| Aleatoriedad | 66% |
| Línea base | 55% |
| Capas | 1 |
| Suavidad | 100% |
| Semilla | 6502 |
Lo que conviene saber
- Muchos peldaños estrechos a alturas variables, que es lo que da la impresión de mapa de bits.
- La forma escalonada más pesada de aquí, porque cada punto añade tres segmentos de línea en vez de uno.
- Reproducible desde la semilla 6502, que merece la pena guardar: con tanta aleatoriedad cada semilla se ve distinta.
Lo que cuesta en bytes
Esta forma exacta ocupa 579 bytes como SVG y 740 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 | 579 B |
| Fondo CSS | 740 B |
| clip-path CSS | 771 B |
El comienzo del SVG de Borde pixelado
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-120 176.21L-60 176.21L-60 152.82L0 152.82L60 152.82L60 175.77L120 175.77L180 175.77L180 178.33L240 178.33L300 178.33L300 193.7L360 193.7L420 193.7L420 188.55L480 188.55L540 188.55L540 200.14L600 200.14L660 200.14L660 15…Con más detalle
Si esto resulta demasiado recargado, la solución son menos puntos y no menos amplitud. Bajar a seis conserva el carácter de bloques y reduce el archivo a la mitad, mientras que aplanar la amplitud solo produce una línea recta ruidosa.
Preguntas
¿Cómo cambio Borde pixelado una vez la tengo?
Abre el generador, pulsa Borde pixelado 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 6502 con 12 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.