Generador de ondas SVG
Genera ondas SVG suaves, en picos o escalonadas, con capas, amplitud y semillas. Descarga el .svg o cópialo como data URI de fondo CSS para separadores de secciones.
Ajustes de la onda
Los mismos ajustes y la misma semilla siempre producen la misma forma.
Vista previa
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");Herramientas Relacionadas
Ver Todas¿Qué es Generador de ondas SVG?
Crea formas de onda en SVG para separadores de secciones y fondos. Elige curvas suaves, picos o escalones, apila hasta cinco capas, coloca la onda arriba y exporta como archivo .svg o como data URI de background-image CSS listo para pegar.
Cómo usar Generador de ondas SVG
- Elige un Color y un Estilo de onda (Suave, Picos, Escalones) y la Posición (Abajo o Arriba).
- Ajusta la Complejidad, la Amplitud, las Capas, la Opacidad, el Ancho y el Alto.
- Haz clic en Aleatorio o escribe una Semilla para obtener una onda distinta pero reproducible.
- Descarga el .svg o copia el código SVG.
- O copia el Fondo CSS (data URI) para usar la onda sin un archivo aparte.
Ejemplo
Complejidad 2, amplitud 0, 1440×320, color #0099ff
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>
Una amplitud 0 da una línea plana, lo que muestra la construcción Bézier exacta.
Cuándo usar Generador de ondas SVG
Úsalo para separadores de sección ondulados, pies de página y fondos de cabecera. preserveAspectRatio="none" hace que la onda se estire a cualquier ancho, lo que va bien para separadores a ancho completo; para ilustraciones que deben mantener sus proporciones, edita el SVG en un editor vectorial.
Cómo funciona Generador de ondas SVG
El ancho se divide en segmentos iguales; la altura de cada punto es la línea base más un desplazamiento pseudoaleatorio con semilla (mulberry32) escalado por la amplitud. Las ondas suaves pasan una spline Catmull-Rom por los puntos, convertida en comandos Bézier cúbicos C; los picos usan líneas rectas y los escalones líneas horizontales y verticales. El trazado se cierra hasta el borde inferior (o superior). Las capas múltiples usan líneas base y semillas distintas, con una opacidad que aumenta hacia delante. El data URI mantiene el SVG legible y solo codifica con porcentajes los caracteres no seguros.
Casos de Uso Comunes
- Separadores ondulados entre secciones de una landing page
- Fondos de pie de página en capas
- Bordes inferiores de secciones de cabecera
- Imágenes de fondo mediante data URI de CSS
- Formas decorativas reproducibles en sistemas de diseño
Preguntas Frecuentes
¿Volveré a obtener la misma onda?
Sí. Los mismos ajustes y la misma Semilla siempre generan un marcado SVG idéntico.
¿SVG en línea o data URI?
El SVG en línea se puede estilizar y animar con CSS; un data URI en background-image mantiene limpio tu HTML, pero no se puede reestilizar después de codificarlo.
¿Cómo coloco una onda en la parte superior de una sección?
Ajusta la Posición a Arriba; el trazado se cierra hasta el borde superior para rellenar hacia arriba.