O que o Pattern Generator faz.
O Pattern Generator cria fundos geométricos em mosaico a partir de SVG inline. Escolha um padrão — pontos, listras, grades, chevrons e mais — e defina cores de primeiro plano e de fundo, escala do tile e opacidade.
A pré-visualização atualiza em tempo real enquanto você ajusta os controles. Quando estiver satisfeito com o resultado, exporte no formato que o seu fluxo de trabalho exige: um trecho CSS de background, um tile SVG independente ou um PNG 1600×900.
Escolha, personalize e exporte em quatro passos.
- Abra o Pattern Generator e clique em um tile de padrão no seletor.
- Ajuste as cores de primeiro plano e de fundo, a escala e a opacidade até a pré-visualização combinar com a sua marca ou layout.
- Clique em Copiar CSS para obter uma propriedade de fundo pronta para colar, ou use Baixar SVG / Baixar PNG para arquivos de asset.
- Insira a saída na folha de estilos da página, no arquivo do Figma ou no deck de slides — sem conta e sem upload.
Colar CSS em uma página.
O CSS copiado é uma única declaração de background com uma data URI SVG inline. Cole-a em uma regra de classe ou em um estilo inline no elemento que deve exibir o padrão:
Exemplo: adicione a linha copiada a .hero { … } ou a uma classe utilitária na sua folha de estilos. O SVG se repete de forma contínua, então funciona em seções de largura total, cards e blocos hero sem markup extra.
Como o padrão está embutido como data URI, não há arquivo de imagem separado para hospedar. Isso simplifica o deploy — uma colagem de CSS e pronto.
Usar o tile SVG como preenchimento no Figma.
Baixe o tile SVG e arraste-o para o seu arquivo no Figma, ou use Inserir imagem para importá-lo. Selecione um frame ou forma e defina o tipo de preenchimento como Imagem, depois escolha o SVG importado.
Defina o modo de preenchimento como Repetir para que a repetição geométrica corresponda à pré-visualização da ferramenta. Ajuste a escala no Figma se precisar de uma repetição mais densa ou mais solta que o tamanho padrão do tile.
Esse caminho é útil quando você quer o mesmo padrão em um mockup e no CSS de produção — exporte uma vez do Pattern Generator, use SVG no Figma e CSS na página ao vivo.
PNG para slides e imagens OG.
Baixar PNG exporta um raster 1600×900 do padrão atual com as suas configurações de cor e escala. Use-o como fundo de slide no Keynote, Google Slides ou PowerPoint, ou como imagem de pré-visualização social quando precisar de um asset plano em vez de CSS ao vivo.
PNG também é prático para ferramentas que não suportam preenchimentos SVG ou fundos com data URI — templates de e-mail, exportações PDF e geradores de miniatura costumam precisar de um único arquivo de imagem.
Apenas local no navegador.
O Pattern Generator roda inteiramente no seu navegador. Cores, escala e exportações são calculadas no seu dispositivo — nada é enviado para a Tiny Design Shop ou para um servidor de terceiros. Feche a aba e a sua sessão desaparece.