Generador de fondo de patrón CSS

La mayoría de las herramientas de "generación de patrones" reutilizan silenciosamente la misma fórmula de gradiente lineal repetido para cada opción y simplemente cambian los números. Éste no: cada uno de los seis tipos de patrones aquí se construye a partir de la técnica CSS específica que realmente produce esa forma. Las rayas utilizan un único gradiente lineal repetido con dos bandas de color. Los puntos utilizan un degradado radial en mosaico únicamente a través del tamaño del fondo (el clásico truco de puntos CSS) en lugar de un degradado radial repetido, que no puede colocar un punto circular en mosaico limpiamente en una cuadrícula rectangular. El tablero de ajedrez utiliza la fórmula real de gradiente cónico de cuatro cuadrantes: un gradiente cónico centrado en un mosaico cuadrado se divide naturalmente en cuatro cuadrantes en límites de 90 grados, y alterna dos colores a través de esos cuadrantes para formar un tablero de ajedrez genuino, no una aproximación.

La cuadrícula y el rayado diagonal superponen dos gradientes lineales repetidos como entradas de imagen de fondo separadas en lugar de falsificar la segunda dirección con trucos de bordes. Grid combina un degradado repetido "hacia la derecha" y "hacia abajo" para obtener líneas de regla horizontales y verticales nítidas. El sombreado cruzado aplica un gradiente repetido de +45 grados y -45 grados para obtener un tejido diagonal estilo tejido de canasta; vale la pena ser preciso al respecto: este es un sombreado cruzado honesto, no una verdadera geometría en espiga, y la herramienta lo etiqueta de esa manera en lugar de exagerar. Los triángulos reutilizan la técnica de gradiente cónico de cuatro cuñas del tablero de ajedrez, pero comienzan el gradiente girado 45 grados, lo que desplaza los límites de las cuñas desde los puntos medios de los bordes del mosaico hasta sus esquinas y convierte las mismas cuatro cuñas en cuatro triángulos de esquina a esquina en lugar de cuadrados de cuatro cuadrantes.

Cada tipo de patrón expone solo los controles que realmente se aplican a él (un control deslizante de ángulo aparece para las rayas, el radio y el espaciado de los puntos aparecen para los puntos, el grosor de la línea aparece para la cuadrícula y el rayado cruzado) y el gran cuadro de vista previa en mosaico se vuelve a pintar con cada cambio para que pueda ver varias repeticiones completas antes de comprometerse con un valor. Cambie el modo de salida a SVG y el mismo patrón reaparecerá como un elemento <pattern> creado a partir de primitivas simples de rectángulo, círculo, ruta o polígono, listo para pegar dentro de los <defs> de cualquier documento SVG, con una descarga con un solo clic para obtener un archivo .svg independiente.

Todo se ejecuta localmente en su navegador: sin carga de imágenes, sin viajes de ida y vuelta al servidor, sin cuenta. Para rellenos sólidos o degradados sin repetición, el generador de degradado CSS de este sitio es la herramienta adecuada; este es específicamente para fondos geométricos enlosables creados a partir de cero recursos de imagen.