Diseño / SVG

Generador de ondas SVG para separar secciones

Genera ondas SVG suaves y superpuestas para el borde entre dos secciones de una página: elige el número de capas y ondas, la altura, la suavidad y el color; después descarga el SVG o cópialo como fondo CSS.

Generador de ondas SVG para separar secciones: Cada capa es una fila de puntos que alternan por encima y por debajo de una línea base en una cantidad aleatoria. Los puntos se unen mediante una curva suave y el área se rellena hasta el borde inferior. Las capas del fondo son más pálidas, lo que crea una sensación de profundidad. El SVG se adapta a cualquier ancho y la versión CSS lo integra como un fondo mediante una URI de datos. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría: Herramientas de desarrollo
Se ejecuta: En tu navegador
Coste: Gratis · sin registro
Disponibilidad: Lista para usar

Generador de ondas SVGProcesamiento local

Funciona por completo en tu navegador

Capas3Ondas a lo ancho3Altura de las ondas60%Suavidad1Altura de la imagen240 pxColor#479d1d Dar la vuelta (para la parte superior de una sección)

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

El SVG se adapta a cualquier ancho (preserveAspectRatio="none"), por lo que encaja en separadores de secciones de ancho completo. Colócalo en la parte inferior de una sección usando el color de fondo de la siguiente, o dale la vuelta para colocarlo en la parte superior. La misma semilla aleatoria siempre dibuja la misma onda.

¿SVG o CSS?

El SVG integrado se puede diseñar y animar con CSS, y su relleno puede usar currentColor. Como fondo CSS, el SVG es un URI de datos: no hay nada adicional que cargar, pero el color queda fijado en el código. El archivo ocupa unos cientos de bytes en ambos casos; puedes optimizarlo aún más con el limpiador de SVG.

Suavidad

La curva es una spline de Catmull-Rom convertida en segmentos cúbicos de Bézier: con la suavidad máxima se curva suavemente pasando por cada punto, y con cero se convierte en líneas rectas entre ellos, lo que crea un borde montañoso irregular.

Cómo se usa

Establece las capas, el número de ondas y su altura.
Elige un color e invierte la onda para colocarla en la parte superior de una sección.
Haz clic para generar nuevas ondas aleatorias y, después, descarga el SVG o copia el CSS.

Privacidad y límites

Las ondas se dibujan en tu navegador.

Herramientas relacionadas

Preguntas frecuentes

¿Cómo lo uso entre dos secciones?

Asigna a la onda el color de la sección inferior y colócala en la parte inferior de la sección superior, a todo lo ancho; inviértela para usarla en la parte superior de una sección.

¿La misma configuración genera siempre la misma onda?

Sí: la forma se obtiene a partir de una semilla aleatoria, por lo que solo cambia cuando haces clic para generar una nueva onda.

¿Puedo usar las ondas con fines comerciales?

Sí: las formas se generan para ti y no tienen restricciones de licencia.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta