Seamless Pattern Maker: Mosaicos y Repeticiones

¿Qué es el Seamless Pattern Maker?

El Seamless Pattern Maker toma una sola imagen de mosaico y la renderiza en un lienzo configurable para previsualizar y exportar un patrón de mosaico sin costura. Controlas la escala, la rotación, el espaciado y eliges entre cuatro modos de mosaico — cuadrícula normal, desplazamiento medio ladrillo, diagonal y espejado — para ver exactamente cómo quedará el mosaico al repetirse. Una vez satisfecho, exporta el resultado como una imagen PNG grande o copia un fragmento CSS background-image listo para pegar. Todo el procesamiento ocurre localmente en tu navegador sin subidas de archivos a ningún servidor.

Funciones principales

• Subir imagen de mosaico por arrastrar y soltar o clic: El área de subida acepta arrastrar y soltar y clic para explorar. Los archivos mayores de 10 MB se rechazan con un mensaje de error. Las dimensiones del mosaico cargado se muestran debajo de la miniatura de vista previa.
• Vista previa en vivo: Cada vez que ajustas una configuración, el lienzo se redibuja inmediatamente. El lienzo renderiza suficientes mosaicos para llenar toda el área de vista previa, incluyendo mosaicos adicionales en los márgenes para compensar el desbordamiento por rotación.
• Escala ajustable (5 % a 400 %): Un control deslizante en incrementos del 5 % escala el mosaico hacia arriba o abajo relativo a sus dimensiones originales en píxeles. Al 100 %, el mosaico se renderiza en su tamaño nativo.
• Control de rotación (0 a 360 grados): Rota cada mosaico alrededor de su punto central antes de dibujarlo. Funciona con cualquier modo de mosaico.
• Espaciado entre mosaicos: Un control deslizante de -50 a 50 px controla el espaciado. Los valores positivos añaden espacio entre mosaicos relleno con el color de fondo; los valores negativos superponen mosaicos para efectos de capas.
• Cuatro modos de mosaico: Normal — cuadrícula estándar sin desplazamiento. Medio ladrillo — las filas alternas se desplazan la mitad del ancho del mosaico, como en mampostería. Medio descenso — las columnas alternas se desplazan la mitad de la altura del mosaico, produciendo un patrón de escalonamiento vertical. Espejado — las columnas alternas se voltean horizontalmente y las filas alternas se voltean verticalmente, creando simetría tipo caleidoscopio.
• Tamaño de lienzo configurable: Los campos de ancho y alto aceptan 100–4096 píxeles. El lienzo de vista previa y el PNG exportado usan estas dimensiones exactas.
• Exportar como PNG: Descarga el lienzo renderizado como pattern-[ancho]x[alto].png.
• Copiar fragmento CSS de fondo: Genera un lienzo de un solo mosaico y copia tres propiedades CSS al portapapeles: background-image, background-repeat y background-size.

Cómo usar el Seamless Pattern Maker

Paso 1: Sube tu imagen de mosaico

Arrastra un archivo de imagen al área de subida o haz clic para buscar un archivo. Se acepta cualquier formato de imagen que tu navegador soporte nativamente. Las dimensiones del mosaico se muestran debajo de la miniatura — por ejemplo, "64 x 64px". Si subes un archivo de más de 10 MB, la herramienta muestra el error "Archivo demasiado grande" y lo rechaza. Tras una subida exitosa, el lienzo de vista previa renderiza inmediatamente el patrón de mosaico con la configuración predeterminada.

Las buenas imágenes de mosaico son las que muestran naturalidad sin costuras visibles — texturas repetibles sin costura, patrones de iconos, formas geométricas o imágenes que hayas diseñado intencionalmente para repetir. Los patrones regulares como chevrones, puntos o tejidos funcionan especialmente bien.

Paso 2: Selecciona un modo de mosaico

En la sección de Controles aparecen cuatro botones de modo:

• Normal: Cuadrícula estándar, todos los mosaicos alineados en filas y columnas.
• Medio ladrillo: Las filas impares se desplazan hacia la derecha la mitad de un paso de mosaico (incluyendo el espaciado), exactamente como un patrón de pared de ladrillo estándar.
• Medio descenso: Las columnas impares se desplazan hacia abajo la mitad de un paso de mosaico, creando un efecto de escalonamiento vertical comúnmente visto en papel tapiz y patrones de tela.
• Espejado: Cada columna alterna se voltea horizontalmente (ctx.scale(-1, 1)) y cada fila alterna se voltea verticalmente (ctx.scale(1, -1)), creando reflexiones simétricas a través de los límites del mosaico.

Haz clic en cada modo para ver el efecto inmediatamente en el lienzo.

Paso 3: Ajusta escala, rotación y espaciado

Tres controles deslizantes afinan el mosaico:

• Escala (5 %–400 %): Al 100 %, el mosaico se renderiza en su tamaño de píxel natural. Aumenta al 200 % para que el mosaico aparezca grande y el patrón sea más visible; baja al 50 % para un micronpatrón denso.
• Rotación (0°–360°): Rota los mosaicos para crear efectos de rayas diagonales o añadir dinamismo a un patrón. Una rotación de 45° de un mosaico de rayas crea un patrón de rayas diagonales.
• Espaciado (-50 a 50 px): Los valores positivos añaden espacio entre mosaicos relleno con el color de fondo. Los valores negativos superponen mosaicos adyacentes para efectos de capas.

Paso 4: Configura el tamaño del lienzo y el color de fondo

Introduce el ancho y alto del lienzo de salida (100–4096 px cada uno) en los dos campos numéricos. La vista previa en vivo se escala para ajustarse a tu pantalla, pero el lienzo real se renderiza en las dimensiones especificadas. Para una prueba de fondo CSS, 800×600 es suficiente. Para una exportación lista para imprimir, usa 2400×2400 o más.

Haz clic en la muestra de color de fondo para elegir el color de relleno entre y alrededor de los mosaicos.

Paso 5: Exportar como PNG o copiar CSS

Haz clic en el botón PNG para descargar el lienzo renderizado como pattern-[ancho]x[alto].png. Usa esta imagen como textura en software de diseño, motores de juegos, o como elemento <img>.

Haz clic en CSS para copiar un fragmento CSS listo para usar al portapapeles. El fragmento renderiza un solo mosaico en un lienzo separado y lo codifica como una URI de datos base64. Las tres propiedades copiadas son:

background-image: url("data:image/png;base64,...");
background-repeat: repeat;
background-size: 72px 72px;

Los valores de background-size son el ancho del mosaico escalado más el espaciado y la altura del mosaico escalado más el espaciado. Pega esto directamente en tu hoja de estilos.

Ejemplos prácticos

Fondo de mampostería para un sitio web

Sube una textura de ladrillo de 128×64. Selecciona el modo "Medio ladrillo", ajusta la escala al 100 %, espaciado 2 px y color de fondo #2c1810 (marrón oscuro de mortero). Ajusta el lienzo a 800×600. La vista previa muestra un patrón de ladrillo realista. Copia el fragmento CSS y pégalo en una regla CSS .hero-section.

Patrón de rayas medio descenso para un banner

Sube un mosaico de rayas de 40×40 (una raya diagonal de un solo color sobre fondo transparente, guardado como PNG). Selecciona "Medio descenso", escala al 150 %, rotación 45°, espaciado 0 px. Las rayas se combinan con el desplazamiento de medio descenso para crear un patrón de rayas denso y escalonado. Exporta como PNG de 1200×400 para usarlo como fondo de banner.

Mosaico caleidoscopio para un diseño de impresión

Sube un mosaico geométrico de 100×100 con un patrón de color en un cuadrante. Selecciona "Espejado", escala 100 %, rotación 0°, espaciado 0 px. El modo espejado refleja el mosaico horizontalmente y verticalmente en una unidad de repetición 2×2. Exporta a 2400×2400 para un patrón de alta resolución listo para imprimir.

Patrón de fondo CSS para un componente de tarjeta

Sube un pequeño mosaico de textura de puntos (PNG de 32×32). Selecciona "Normal", escala al 75 %, espaciado 6 px, fondo #f8f8f8. Lienzo 400×400. Copia el fragmento CSS. En tu hoja de estilos:

.card-background {
  background-image: url("data:image/png;base64,...");
  background-repeat: repeat;
  background-size: 30px 30px;
}

Los puntos se repiten sin costura en toda la tarjeta independientemente de su tamaño.

Consejos y mejores prácticas

Usa mosaicos diseñados específicamente para ser sin costura. La herramienta renderiza cualquier mosaico que proporciones; no hace que los mosaicos sean automáticamente sin costura en sus bordes. Si tu mosaico tiene contenido que no coincide en sus bordes, verás líneas de costura visibles.

El modo espejado elimina la repetición visible. Incluso los mosaicos no sin costura a menudo se ven aceptables en modo espejado porque las reflexiones disimulan los bordes. Prueba el modo espejado primero si tu mosaico no fue diseñado para repetirse.

La rotación añade mosaicos de margen al lienzo. La herramienta calcula un margen igual a 2 × Math.max(anchoMosaico, altoMosaico) y renderiza mosaicos más allá de los límites del lienzo para llenar cualquier hueco causado por la rotación.

El fragmento CSS usa una URL de datos de un solo mosaico. La exportación CSS crea un nuevo lienzo del tamaño de (anchoMosaico + espaciado) × (altoMosaico + espaciado) para el fragmento. Esto mantiene la URL de datos pequeña y deja que el navegador maneje el mosaico infinito nativamente mediante background-repeat: repeat.

La configuración es compartible mediante URL. La herramienta usa useShareableState para codificar tu configuración actual en la URL. Comparte la URL con un colaborador y verá tu configuración exacta.

El control de espaciado va de -50 a 50 px. Para efectos de lechada, un espaciado positivo de 3–8 px con un color de fondo contrastante es típicamente realista.

Problemas comunes y resolución de problemas

Error "Archivo demasiado grande": La herramienta rechaza archivos de más de 10 MB. Comprime tu imagen de mosaico a menos de 10 MB antes de subirla.

Error "Formato inválido": La herramienta requiere un archivo de imagen válido (file.type.startsWith('image/')). Los archivos que no son imágenes serán rechazados.

El patrón muestra líneas de costura visibles: Los bordes del mosaico no coinciden. La herramienta renderiza cualquier mosaico que subas. Para un resultado sin costura, usa una imagen diseñada específicamente para repetirse sin bordes visibles. El modo espejado puede disimular parcialmente los bordes no sin costura.

El lienzo aparece en blanco después de la subida: La vista previa en vivo solo se renderiza cuando hay una imagen de mosaico cargada. Si la subida fue exitosa (la miniatura es visible) pero el lienzo está en blanco, intenta borrar y volver a subir.

Toast "No hay imagen cargada" al exportar: Haz clic en PNG o CSS sin una imagen cargada. Primero sube una imagen de mosaico.

El fragmento CSS tiene una URL de datos muy grande: El lienzo de un solo mosaico tiene un tamaño proporcional a tu configuración de escala. Para CSS de producción, es mejor guardar el mosaico como un archivo de imagen separado y referenciarlo con una URL regular.

Privacidad y seguridad

El Seamless Pattern Maker procesa todas las imágenes completamente dentro de tu navegador. Las imágenes de mosaico se cargan mediante la API FileReader y se almacenan como datos en memoria. Todas las operaciones de lienzo (dibujar, escalar, rotar, espejar) usan la API Canvas 2D del navegador sin comunicación con el servidor. La exportación CSS copia datos solo a tu portapapeles local. La herramienta funciona sin conexión después de que la página se haya cargado una vez.

Preguntas frecuentes

¿Es gratuito el Seamless Pattern Maker? Sí, completamente gratuito. Los cuatro modos de mosaico, todos los controles, exportación PNG y copia CSS están disponibles sin costo y sin cuenta requerida.

¿Funciona el Seamless Pattern Maker sin conexión? Sí. Después de la carga inicial de la página, todo el renderizado usa la API Canvas 2D en tu navegador. No se realizan solicitudes de red durante la creación o exportación del patrón.

¿Están seguros mis datos con el Seamless Pattern Maker? Tus imágenes de mosaico nunca salen de tu dispositivo. La API FileReader las carga en la memoria local del navegador, y todo el procesamiento y exportación se realiza del lado del cliente.

¿Qué formatos de imagen puedo usar como mosaicos? Cualquier formato de imagen que tu navegador soporte nativamente: JPEG, PNG, WebP, GIF, SVG (como elemento de imagen) y en navegadores más nuevos AVIF y HEIC. Los GIFs animados usarán solo el primer fotograma.

¿Cuál es el tamaño máximo del archivo de mosaico? La herramienta aplica un límite de tamaño de archivo de 10 MB. Los archivos mayores de 10 MB activarán el error "Archivo demasiado grande" y serán rechazados.

¿Cómo funciona el modo de mosaico medio ladrillo? En modo medio ladrillo, cada fila impara (índice de fila % 2 === 1) desplaza su posición X inicial hacia la derecha por passoX / 2. Esto crea el clásico patrón de aparejo de ladrillo donde las juntas horizontales están escalonadas.

¿Cómo funciona el modo de mosaico espejado? El espejado se aplica por mosaico durante el renderizado del lienzo. Para cada mosaico, la herramienta verifica si su índice de columna es impar (voltear horizontalmente) y si su índice de fila es impar (voltear verticalmente). Aplica ctx.scale(-1, 1) y/o ctx.scale(1, -1) antes de dibujar el mosaico y restaura el estado del lienzo después.

¿Puedo usar el fragmento CSS en producción? Puedes, pero para uso en producción generalmente es preferible un archivo de imagen separado. Las URL de datos incrustadas en CSS no pueden ser cacheadas independientemente por el navegador, aumentan el tamaño de la hoja de estilos y son difíciles de actualizar.

¿Cómo afecta la rotación a la cuadrícula de mosaicos? La rotación se aplica a cada mosaico individualmente usando ctx.save(), ctx.translate(), ctx.rotate() y ctx.restore(). La cuadrícula de mosaicos en sí no se rota — solo la imagen del mosaico dentro de cada posición se rota.

¿Puedo guardar la configuración de mi patrón? Sí. La configuración se codifica automáticamente en la URL mediante useShareableState, por lo que marcar la URL como favorito o compartirla preserva tu configuración actual. Los seguidores premium también pueden guardar preajustes con nombre.

Herramientas relacionadas

• Próximamente: SVG Pattern Generator — Crear patrones vectoriales escalables programáticamente sin necesitar una imagen de mosaico fuente.
• Próximamente: Placeholder Generator — Generar imágenes de marcador de posición de color plano para usar como entradas de mosaico rápidas para probar el creador de patrones.
• Próximamente: Noise Texture — Generar texturas de ruido procedurales que funcionan bien como entradas de mosaico sin costura.
• Próximamente: Image Effects — Aplicar filtros a tu imagen de mosaico antes de usarla como entrada para el creador de patrones.

Prueba el Seamless Pattern Maker ahora: Glyph Widgets Seamless Pattern Maker