Gerador SVG Padrão Favo de Mel

Padrão favo de mel: tesselação hexagonal em SVG

O padrão favo de mel é uma das tesselações geométricas mais eficientes da matemática. O hexágono regular cobre o plano sem deixar buracos e sem sobrepor — apenas três formas se encontram em cada vértice — e a malha resultante tem o menor perímetro total para uma dada área coberta. É a famosa conjectura do favo de mel, intuída por Papo de Alexandria por volta de 300 d.C. e finalmente provada por Thomas Hales em 1999. As abelhas, otimizando o uso de cera, chegaram à mesma solução sem nunca terem lido a prova.

Para um hexágono regular de lado a, as dimensões do tile são largura = a·sqrt(3) e altura = 2a, dando proporção de aproximadamente 1 : 1,155. Dentro de um <pattern> SVG, basta colocar um hexágono completo e deixar o navegador repetir em grade defasada.

<pattern id="hex" width="60" height="52" patternUnits="userSpaceOnUse">
  <polygon points="30,2 58,15 58,40 30,53 2,40 2,15"
           fill="none" stroke="#888" stroke-width="1"/>
</pattern>

Topo plano (flat-top) ou topo pontiagudo (pointy-top)?

Grids hexagonais vêm em duas orientações. Flat-top (aresta horizontal no topo) é mais alto do que largo e empilha em colunas verticais — ideal para mapas de Civilization VI, jogos de tabuleiro em paisagem e dashboards orientados por linhas. Pointy-top (vértice no topo) é mais largo do que alto e alinha em linhas horizontais — preferido pelo Catan e pela maioria dos wargames. Escolha a orientação cujo eixo principal combina com o jeito que seu conteúdo é lido.

Onde o favo de mel aparece

• Natureza — colmeias, olhos compostos de insetos, colunas basálticas da Calçada dos Gigantes na Irlanda, carapaças de tartaruga e asas de libélula.
• Jogos de tabuleiro e wargames — Catan, Civilization VI e a maior parte dos jogos táticos com grid hexagonal.
• Visualização de dados — hexbin do D3.js substitui heatmaps quadrados porque hexágonos têm menor razão perímetro/área e empacotam mais denso, reduzindo aliasing visual.
• Branding tech — Block (ex-Square), Substack e dezenas de projetos cripto usam marcas hexagonais para passar uma estética moderna e estruturada.
• Engenharia — painéis honeycomb aeroespaciais (altíssima razão resistência/peso) e grids de agricultura de precisão na apicultura.

SVG versus CSS

Montar um tile hexagonal em CSS puro é doloroso — não existe um hexagon() nativo, então é preciso combinar três retângulos rotacionados ou encadear clip-path: polygon(...) com offsets cuidadosos. SVG, em compensação, dá a geometria como um único <polygon> e o tilea via patternUnits="userSpaceOnUse". Acrescente shape-rendering="geometricPrecision" se quiser bordas anti-aliased mais limpas, especialmente em zoom.

Perguntas frequentes

Por que hexágonos no lugar de quadrados? Grids hexagonais minimizam perímetro por área (provado por Hales em 1999) e cada vizinho fica equidistante — diferente da grade quadrada, em que vizinhos diagonais ficam sqrt(2) mais longe. Isso torna pathfinding e heatmaps mais justos.

Flat-top ou pointy-top — qual escolher? Combine com seu eixo principal. Conteúdo horizontal lê melhor em linhas pointy-top; listas verticais empilham mais limpo com colunas flat-top.

Dá pra fazer só em CSS? Dá, mas vira código longo rápido. Para um padrão decorativo estático, SVG com <pattern> é mais curto, escala sem artefatos e troca de cor com um único atributo fill.

A geração roda local? Sim. O markup SVG é produzido no seu navegador; nada é enviado para nenhum servidor.