pattern hexagonal para branding
Um padrão hexagonal não é um mosaico livre: linhas e colunas seguem uma geometria de grade específica, onde a distância vertical entre fileiras é a altura do hexágono multiplicada por 3/4. Este gerador parte de um hexágono de topo pontudo com raio de 32px, calcula esse espaçamento automaticamente e devolve o CSS pronto para colar.
Sobre fundo #0a0a0a quase preto, o traço mint em 0.06 de opacidade ainda deixa qualquer texto branco ou claro por cima bem acima do contraste mínimo de 4.5:1, então o hexágono funciona como marca sutil, não como ruído.
Dobrar o raio de 32 para 64px dobra também a altura para 128px e o espaçamento vertical proporcional para 96px (128 vezes 3/4), a recomendação para fundos grandes onde um hexágono pequeno criaria repetição excessiva.
Sem stroke, o hexágono preenchido a 0.04 de opacidade cria uma textura ainda mais suave que a versão com contorno, porque a área sólida clara tem menos variação de luminância entre um pixel e o vizinho do que uma linha fina.
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.
Porque hexágonos de topo pontudo encaixam parcialmente uns nos outros: a ponta de cima de um hexágono da fileira de baixo entra no vão deixado pela ponta de baixo do hexágono da fileira de cima, e essa sobreposição consome exatamente um quarto da altura total, deixando 3/4 como distância efetiva entre os centros.
Para textura de fundo atrás de texto, raio entre 24px e 40px costuma equilibrar presença de marca com discrição; acima de 64px o hexágono já domina visualmente a composição e serve melhor como elemento decorativo isolado do que como textura de página inteira.
Sim, para o encaixe pontudo funcionar: com largura de 55.4px num hexágono de raio 32px, o deslocamento tem que ser exatamente 27.7px, porque qualquer outro valor faz o vértice de uma fileira cair fora do vão da fileira anterior e abrir uma fresta visível.
Não com os mesmos papéis: no topo plano, é a largura que vale a altura vezes 3/4 do topo pontudo, e a altura passa a ser igual à largura do topo pontudo, então trocar de orientação exige recalcular qual dimensão recebe o fator 3/4.
<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.