Generador de Ondas SVG
Genera separadores de onda SVG para transiciones entre secciones de tu web.
① Personaliza altura, amplitud y color ② Vista previa en vivo ③ Copia SVG o snippet HTML
Altura (px) 120
Amplitud (px) 40
Ondas 2
Color de onda
#C9B89A
Fondo
#0E0E0E
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" width="100%" preserveAspectRatio="none">
<path d="M 0 60 Q 180 20 360 60 Q 540 100 720 60 Q 900 20 1080 60 Q 1260 100 1440 60 L 1440 120 L 0 120 Z" fill="#c9b89a"/>
</svg>
¿Qué son los separadores de onda SVG y cómo usarlos?
Los separadores de onda SVG son gráficos vectoriales escalables para crear transiciones fluidas entre secciones. A diferencia de PNG/JPG, las ondas SVG son independientes de la resolución y escalan perfectamente en cualquier pantalla. La forma de la onda se define mediante un elemento <path> dentro de un <svg> usando curvas de Bézier cuadráticas (comando Q). El atributo preserveAspectRatio="none" garantiza que la onda siempre ocupe el ancho completo.
Preguntas frecuentes
Un separador de onda SVG es un gráfico vectorial escalable usado como divisor visual entre secciones. Es una forma rellena con borde superior curvo que escala perfectamente.
Copia el snippet HTML y pégalo al final de una sección. Usa width="100%" y preserveAspectRatio="none" para adaptarlo a cualquier ancho.
La amplitud controla la altura de los picos. Valores típicos: 20px (sutil) a 80px (dramático).
La frecuencia controla cuántas ondas completas aparecen. 1 = curva S suave, 2–3 = patrón onda típico, 4+ = muchas ondas pequeñas.
Las curvas suaves (bezier cuadrático) son la elección más común. Las angulares crean efecto geométrico cristalino.
El toggle voltear refleja la onda verticalmente. Normal = área rellena abajo. Volteado = área rellena arriba.
Sí. Aplica animación CSS con translateX() en un viewBox más ancho. Duplica la anchura del viewBox a 2880 y repite el path.