Gerador de Padrões SVG

O gerador de padrões SVG cria fundos em mosaico repetidos definindo um elemento SVG <pattern> preenchido com uma única forma repetida. Ele oferece seis tipos de formas (círculos, quadrados, triângulos, linhas, cruzes, losangos) desenhados como primitivas de contorno, em seguida os coloca em mosaico em uma pré-visualização de 200x200 e exporta a marcação SVG completa para uso em páginas web, fundos CSS ou arquivos de design.

1. Escolha um Tipo de padrão entre as seis opções de botão. 2. Ajuste o controle deslizante de Tamanho (10 a 60px) para definir tanto as dimensões do mosaico quanto a escala da forma. 3. Ajuste o controle deslizante de Largura do traço (0,5 a 6,0). 4. Use Rotação (0 a 360 graus, em incrementos de 5 graus) para girar o mosaico via patternTransform. 5. Defina a Cor da forma e a Cor de fundo usando as duas amostras de cor. 6. Clique em Copiar para copiar o SVG gerado para a área de transferência.

O SVG exportado é 200x200 com um bloco <defs><pattern> usando patternUnits="userSpaceOnUse". A largura e altura do padrão são iguais ao valor de Tamanho, portanto cada mosaico se repete em uma grade desse tamanho. Primeiro é desenhado um <rect> de fundo preenchido com a Cor de fundo e depois um segundo <rect> preenchido com url(#pat) sobrepõe os mosaicos. Quando a Rotação é diferente de zero, a rotação é aplicada tanto como patternTransform no padrão quanto como transformação rotate() na própria forma.