Generador de Ondas SVG

Crea Ondas SVG Suaves para Separar Secciones

Las ondas son una de las formas más limpias de separar dos secciones de una página: añaden movimiento, personalidad y profundidad sin necesidad de una imagen. Este Generador de Ondas SVG crea un simple elemento <path> dentro de un <svg>, dimensionado para estirarse a cualquier contenedor con width: 100%.

Controles

• Segmentos — cuántas jorobas tiene la onda. Un segmento da una sola curva suave; diez segmentos dan un patrón muy movido.
• Amplitud — el vaivén vertical de cada joroba. Amplitud baja da una ondulación sutil; amplitud alta da una onda dramática.
• Semilla — entero determinista que controla la variación aleatoria entre jorobas. Pulsa volver a lanzar para probar nuevas formas.
• Invertir — alterna entre un separador inferior (onda arriba, relleno abajo) y uno superior (onda abajo, relleno arriba).
• Relleno — color sólido o degradado lineal de dos paradas en cualquier ángulo.

Usando la Salida

Como el SVG usa preserveAspectRatio="none", puedes estirarlo a cualquier anchura envolviéndolo en un contenedor con un width CSS: la onda se adaptará a la página manteniendo su altura. Pega el SVG generado directamente en tu HTML, componente React o sistema de plantillas.

<div style="width:100%"><!-- svg generado --></div>

Usos Comunes

• Separadores entre la sección hero y el bloque siguiente
• Pies de página con un toque lúdico
• Curvas de fondo animadas (el path puede animarse con CSS o SMIL)
• Formas decorativas detrás de tarjetas de precios, testimonios o secciones de características
• Marcadores de carga y transiciones de sección

El path es determinista: la misma semilla siempre produce la misma onda, así que cuando encuentres una forma que te guste, se mantiene estable. Guarda el SVG en un archivo si necesitas editarlo en un editor vectorial o retocar los colores a mano.