qué hace
Qué hace Pattern Generator.
Pattern Generator crea fondos geométricos en mosaico a partir de SVG inline. Elige un patrón — puntos, rayas, cuadrículas, chevrones y más — y define los colores de primer plano y fondo, la escala de la tesela y la opacidad.
La vista previa se actualiza en vivo mientras ajustas los controles. Cuando estés satisfecho con el resultado, exporta en el formato que necesite tu flujo de trabajo: un fragmento CSS de background, una tesela SVG independiente o un PNG de 1600×900.
flujo de trabajo
Elige, personaliza y exporta en cuatro pasos.
- Abre Pattern Generator y haz clic en una tesela de patrón en el selector.
- Ajusta los colores de primer plano y fondo, la escala y la opacidad hasta que la vista previa coincida con tu marca o diseño.
- Haz clic en Copy CSS para obtener una propiedad background lista para pegar, o usa Download SVG / Download PNG para archivos de assets.
- Inserta el resultado en la hoja de estilos de tu página, en un archivo de Figma o en tu presentación — sin cuenta y sin subir archivos.
css
Pega CSS en una página.
El CSS copiado es una sola declaración de background con un data URI SVG inline. Pégala en una regla de clase o en un estilo inline del elemento que debe mostrar el patrón:
Example: añade la línea copiada a .hero { … } o a una clase de utilidad en tu hoja de estilos. El SVG se repite sin cortes, así que funciona en secciones a ancho completo, tarjetas y bloques hero sin markup adicional.
Como el patrón está incrustado como data URI, no hay un archivo de imagen aparte que alojar. Eso simplifica el despliegue — un pegado de CSS y listo.
figma
Usa la tesela SVG como relleno de Figma.
Descarga la tesela SVG y arrástrala a tu archivo de Figma, o usa Place image para importarla. Selecciona un frame o forma y establece el tipo de relleno en Image, luego elige el SVG importado.
Configura el modo de relleno en Tile para que la repetición geométrica coincida con la vista previa de la herramienta. Ajusta la escala en Figma si necesitas una repetición más densa o más suelta que el tamaño de tesela predeterminado.
Este camino es útil cuando quieres el mismo patrón en un mockup y en CSS de producción — exporta una vez desde Pattern Generator, usa SVG en Figma y CSS en la página en vivo.
png
PNG para diapositivas e imágenes OG.
Download PNG exporta un raster de 1600×900 del patrón actual con tu configuración de color y escala. Úsalo como fondo de diapositiva en Keynote, Google Slides o PowerPoint, o como imagen de vista previa social cuando necesites un asset plano en lugar de CSS en vivo.
El PNG también resulta práctico en herramientas que no admiten rellenos SVG o fondos con data URI — plantillas de email, exportaciones PDF y generadores de miniaturas suelen necesitar un único archivo de imagen.
privacidad
Solo en el navegador.
Pattern Generator funciona por completo en tu navegador. Los colores, la escala y las exportaciones se calculan en tu dispositivo — no se sube nada a Tiny Design Shop ni a un servidor de terceros. Cierra la pestaña y tu sesión desaparece.