Generador de patrones SVG: mosaicos de fondo continuos | We.Inc
Diez patrones SVG continuos para fondos: puntos, cuadrícula, ondas, hexágonos y más. Ajusta el tamaño, el grosor de línea, los colores, la opacidad y el ángulo, y copia CSS o un SVG con elemento pattern.
Elige una de diez formas de mosaico, ajusta el tamaño del mosaico, el grosor de línea, los colores, la opacidad y el ángulo, y obtén un fondo SVG continuo. Cópialo como data URL de CSS background-image que se repite en cualquier elemento, o como archivo SVG basado en el elemento pattern para usarlo dentro de ilustraciones; ambos se dibujan y se previsualizan en tu navegador.
¿Mosaico SVG o patrón con gradientes CSS?
Necesidad
Usa
Por qué
Curvas, hexágonos, ondas, signos más
Mosaico SVG (esta herramienta)
Cualquier forma que SVG pueda dibujar
Rayas, puntos o cuadros simples
Gradientes CSS
Sin ninguna imagen, consulta el generador de fondos CSS
Patrón dentro de una ilustración SVG
Elemento <pattern>
Rellena cualquier forma SVG
Los trucos con gradientes pueden dibujar rayas y puntos, pero se atascan con ondas, hexágonos y contornos. Un pequeño mosaico SVG puede dibujar cualquier cosa y se mantiene nítido en todos los niveles de zoom, y como data URL no añade ninguna solicitud extra a la página.
Elige un patrón. La vista previa llena un panel grande para que puedas juzgar la textura a escala real.
Ajusta el tamaño del mosaico y el grosor de línea o el radio del punto, y luego elige los colores de la tinta y del fondo.
Baja la opacidad de la tinta para una textura sutil y define un ángulo si quieres girar los mosaicos.
Copia el CSS para un fondo, el SVG de un solo mosaico o el SVG completo que usa un elemento pattern.
Las texturas de fondo deben susurrar. Una opacidad de tinta entre 0.1 y 0.25 sobre un fondo tintado rara vez compite con el texto.
Ajusta el tamaño del mosaico a tu escala de espaciado, por ejemplo 16, 24 o 32 píxeles, para que las líneas encajen con la cuadrícula de tu diseño.
Cuando giras un patrón, la herramienta pasa a la forma con elemento pattern, porque un mosaico suelto girado ya no encajaría sin cortes.
Pon los patrones en un contenedor o en un pseudoelemento detrás del contenido para poder cambiarlos o quitarlos en un solo lugar.
Preguntas frecuentes
¿Por qué codificar # y < en la data URL?
Dentro de una URL, # inicia un fragmento y corta la imagen, y algunos analizadores rechazan los signos de menor y mayor sin codificar. Codificarlos como %23, %3C y %3E mantiene el SVG intacto. Las comillas dobles pasan a ser simples para que la cadena quepa dentro de url("...").
¿Qué hace patternUnits="userSpaceOnUse"?
Mide el ancho y el alto del mosaico en las mismas unidades que el dibujo, así que un mosaico de 24 mide 24 píxeles de ancho dondequiera que se use. El valor por defecto, objectBoundingBox, dimensiona los mosaicos como fracciones de la forma rellenada.
¿Puedo usar el patrón en Tailwind?
Sí. Añade la regla CSS a tu hoja de estilos como una clase, o usa valores arbitrarios como bg-[url(...)] con la data URL. Una clase se lee mejor cuando la URL es larga.
¿Estos patrones son de uso gratuito?
Sí. Cada mosaico se dibuja a partir de formas simples con el código de esta página, así que el resultado es tuyo y no hace falta dar crédito.
Cómo funciona un mosaico continuo
Un mosaico se repite borde con borde, así que todo lo que sale por el lado derecho debe volver a entrar por el izquierdo. El patrón diagonal, por ejemplo, dibuja pequeños segmentos extra en dos esquinas para que las líneas continúen a través de los bordes del mosaico sin huecos.
Los trazos centrados en el borde del mosaico, como en la cuadrícula, quedan cortados por la mitad. Dos mosaicos vecinos suman entonces una sola línea de ancho completo, y por eso la cuadrícula se ve uniforme.
Dos formas de usarlo
Para fondos, una data URL de CSS es lo más sencillo: una regla, ningún archivo que alojar, y background-size controla la escala. El navegador decodifica el mosaico una vez y lo repite.
Dentro de una ilustración SVG, define un pattern en defs y rellena las formas con url(#id). patternTransform puede girar o escalar todo el patrón sin redibujarlo.
Atributos de pattern en SVG
Atributos del elemento pattern que usa el generador
Atributo
Valor por defecto
Qué hace
width / height
Tamaño de un mosaico; un valor de 0 no dibuja nada
patternUnits
objectBoundingBox
Unidades de x, y, width, height; esta herramienta usa userSpaceOnUse
patternContentUnits
userSpaceOnUse
Unidades de las formas dentro del mosaico
patternTransform
ninguna (identidad)
Gira, escala o inclina todo el patrón
Desplaza el punto donde empieza el primer mosaico
Patrón como fondo CSS
Textura de contorno hexagonal detrás de una tarjeta
Un mosaico hexagonal de 28 píxeles a media opacidad. Cambia background-size para escalar la textura.
El mismo mosaico con el elemento pattern
Úsalo dentro de ilustraciones SVG en línea. Cualquier forma puede llevar fill="url(#p)".
Lunares
Papel cuadriculado
Líneas diagonales
Signos más
Zigzag
Ondas
Triángulos
Tablero de ajedrez
Anillos
Hexágonos
Generador de patrones
Patrones: lunares, papel cuadriculado, líneas diagonales, signos más, zigzag, ondas, triángulos, tablero de ajedrez, anillos y hexágonos. Ajusta el tamaño, el grosor de línea, los colores, la opacidad y el ángulo, y copia CSS o SVG.