Ir al generador
Ondas y Blobs

Picos de montaña

Abrir el generador

Gratis, sin registro, funciona en tu navegador.

Seis puntos a casi toda amplitud con la aleatoriedad bien alta, unidos por líneas rectas. Los picos desiguales son lo importante: un diente de sierra regular se lee como un patrón, mientras que uno irregular se lee como un paisaje.

Los ajustes que hay detrás

Los ajustes que hay detrás
GeneradorOnda
Puntos6
Amplitud95%
Aleatoriedad72%
Línea base58%
Capas1
Suavidad100%
Semilla8801

Lo que conviene saber

Lo que cuesta en bytes

Esta forma exacta ocupa 231 bytes como SVG y 392 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.

Lo que cuesta en bytes
Formato Tamaño
SVG231 B
Fondo CSS392 B
clip-path CSS423 B

El comienzo del SVG de Picos de montaña

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-240 141.66L0 214.67L240 271.21L480 226.23L720 126.44L960 110.47L1200 168.16L1440 133.24L1440 320L-240 320Z" fill="#4f46e5"/></svg>

Con más detalle

Merece la pena voltearlo en vertical y usarlo encima de un pie de página, donde los picos cuelgan como estalactitas en lugar de alzarse. El volteo va incrustado en el trazado y no aplicado como transformación CSS, así que el SVG exportado se sostiene solo en ambos casos.

Preguntas

¿Cómo cambio Picos de montaña una vez la tengo?

Abre el generador, pulsa Picos de montaña 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 8801 con 6 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.

Relacionado