grid pattern para documentação
Um grid pattern é um par de linhas, uma horizontal e uma vertical, repetido em SVG dentro de um tile quadrado; este gerador usa tile de 48×48px com traço de 1px de espessura, o tamanho que sugere réguas técnicas de CAD sem parecer uma planilha impressa atrás do texto.
Como 48 é múltiplo de 8, cada célula do grid visual coincide com três unidades da escala de espaçamento, então título, parágrafo e código herdam alinhamento visual sem esforço extra de CSS.
Reduzir o tile de 48 para 24px dobra a quantidade de linhas visíveis por área, o que ajuda quando o grid serve de guia real para alinhar elementos de um diagrama, não só de textura decorativa.
Um tile de 96px, o dobro do padrão de documentação, espaça as linhas o suficiente para que uma hero section com título grande em foco não tenha nenhuma linha cruzando o meio das letras.
Para geometria simples, geralmente sim: escala sem perder nitidez, é editável e costuma ser leve. Para texturas fotográficas ou ruído muito denso, um PNG/WebP otimizado pode ser mais eficiente.
48 é múltiplo de 8, a unidade de espaçamento que a maioria dos design systems usa como base (8, 16, 24, 32, 48, 64), então o grid visual cai exatamente sobre a mesma escala que já organiza margem, padding e altura de linha do layout ao redor dele.
Pode, principalmente em tile reduzido como 24px: nesse caso a opacidade sobe um pouco, até 0.08 ou 0.1, porque o grid deixa de ser textura de fundo e passa a funcionar como referência visual ativa para posicionar elementos de um diagrama.
Não, se o traço estiver desenhado só na borda superior e esquerda de cada tile: assim, o canto de um tile vira automaticamente o canto do próximo na repetição, e cada linha da malha final é desenhada uma única vez, sem sobreposição que engrossaria o traço visualmente.
Porque duas linhas contínuas por célula cobrem mais área de pixel que um único ponto pequeno no mesmo tile, então, para o efeito final parecer igualmente discreto, o grid precisa de uma opacidade mais baixa, geralmente entre 0.05 e 0.08 contra 0.08 a 0.12 dos pontos.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 128" role="img" aria-label="Pattern preview"><defs><pattern id="p" width="32" height="32" patternUnits="userSpaceOnUse"><circle cx="16" cy="16" r="2.8" fill="#3DDC97"/></pattern></defs><rect width="100%" height="100%" fill="#101412"/><rect width="100%" height="100%" fill="url(#p)"/></svg>O pattern é gerado localmente e não usa backend.