Generador de ondas y blobs en CSS y SVG
Mueve unos cuantos controles, obtén una forma, copia el código. Ondas para divisores de sección, blobs para fondos y máscaras, exportados como SVG, fondo CSS, clip-path o un solo border-radius. No se sube nada ni se genera nada en un servidor: las curvas se calculan en esta página, por eso es instantáneo y por eso sigue funcionando sin conexión.
Estilo
Forma
Ajustar
Salida
Pega esto directamente en tu proyecto. El SVG no lleva marcas identificativas, ni comentarios del generador, ni enlaces de vuelta aquí.
Por qué estas curvas no tienen pliegues
La mayoría de los generadores de este tipo colocan los puntos de control Bézier con una regla aproximada — a un tercio del camino hacia el siguiente punto, normalmente — y el resultado tiene un pequeño pliegue en cada punto de muestreo. No lo notas en una miniatura y no puedes ignorarlo cuando la forma mide tres metros detrás de una imagen principal. Este deriva cada punto de control de la tangente de una spline de Catmull-Rom, así que los dos segmentos de curva que se encuentran en un punto calculan la *misma* dirección a partir de los dos mismos vecinos. La suavidad no es un ajuste aquí, ni algo que se compruebe después: es una consecuencia de la aritmética, y el conjunto de pruebas verifica que se cumple en cada unión de miles de formas generadas.
El CSS que copias es la forma que viste
Dos cosas suelen romperse entre la vista previa de un generador y el CSS que te entrega. La primera es la almohadilla de un color hexadecimal: dentro de un data URI, un `#` sin codificar termina la URL, el navegador lee el resto como un fragmento y el fondo simplemente no se pinta — sin error en consola y sin nada en el panel de red. Aquí cada color se codifica en porcentaje antes de llegar a la hoja de estilos. La segunda solo afecta a los blobs de border-radius: si los dos radios que se encuentran en un borde suman más del 100%, el navegador reduce *todas* las esquinas para compensar, así que la forma que dibuja es más plana que la que elegiste. Los valores que emite esta herramienta se generan dentro de ese límite, así que el navegador los deja en paz.
Bytes, a la vista en lugar de ocultos
Una forma pegada en una hoja de estilos es peso en cada carga de página, así que el recuento de bytes está bajo el cuadro de salida y se actualiza mientras arrastras. Las coordenadas se redondean a dos decimales — una centésima de píxel en un lienzo de 1440 unidades, muy por debajo de lo que cualquier pantalla puede mostrar — lo que suele eliminar un tercio o más de la longitud del trazado sin ningún cambio visible. Si el número parece grande, reducir los puntos casi siempre es la solución: es el único control que cambia el tamaño de forma significativa.
Sin cuenta, sin subidas, sin marca de agua
No hay ningún servidor al que enviar nada. El generador son unos pocos kilobytes de JavaScript que se ejecutan en esta página, tus ajustes se guardan en el almacenamiento local de este navegador, y las formas que creas son tuyas sin necesidad de atribución. Una vez cargada la página funciona sin conexión, lo que también significa que funciona detrás de un proxy corporativo que bloquea medio internet.
Preguntas
¿Es gratis?
Sí, sin cuenta, sin marca de agua, sin límite diario y sin necesidad de atribución. Las formas que generes son tuyas y puedes usarlas comercialmente.
¿Se sube algo?
No. No hay servidor. Las curvas se calculan en tu navegador y tus ajustes se quedan en el almacenamiento local de este navegador. Puedes mirar el panel de red mientras trabajas y seguirá vacío.
¿Para qué sirve la semilla?
Hace que una forma sea reproducible. La misma semilla y los mismos ajustes dan siempre la curva idéntica, así que puedes anotarla, enviársela a un compañero o volver el mes que viene y obtener la misma forma en lugar de una tirada nueva. Acepta tanto una palabra como un número.
¿Por qué no aparece mi fondo CSS?
Casi siempre por una almohadilla sin codificar de un color hexadecimal, que corta el data URI en el primer `#`. La salida de aquí ya viene codificada, así que copia la declaración entera en lugar de reconstruirla a mano con tu propio color.
¿Puedo usarlas en un proyecto comercial?
Sí. Una curva generada es una lista de coordenadas, no una obra creativa con una licencia detrás, y aquí nadie reclama derechos sobre lo que haces.
¿Funciona sin conexión?
Una vez cargada la página, sí. No hay imágenes que descargar ni servidor al que preguntar, así que sigue generando formas con la conexión apagada.