Como criar um mosaico de hexágonos lado a lado (para SVG / Web)?


11

Estou procurando criar uma imagem de fundo SVG para uma página da Web usando hexágonos regulares em um padrão de mosaico semelhante à imagem abaixo. No entanto, preciso que os hexágonos se interconectem para que eu possa usar o:

background-image: url("path-to-hex.svg");

Padrão CSS. Eu gostaria de fazer isso no Inkscape. Não tenho certeza de como "cortar" o padrão em blocos. Como eu começaria a fazer isso?

Hexágonos

EDIT O resultado saiu muito bom! resultado


Seria útil se você pudesse colar um link para o arquivo inkscape!
V-Red

Respostas:


21

Com um pouco de truques de operação booleana, esse é um processo bastante fácil.

insira a descrição da imagem aqui

Basta pegar um conjunto de hexágonos que você possui, criar um retângulo que corresponda ao laranja que eu tenho na imagem acima (verifique se os cantos se encaixam nos pontos apropriados nos hexágonos) e, em seguida, use a ferramenta de interseção para obter livre de tudo fora do retângulo. Isso deve deixar você com um padrão inclinável.

Edit: Pelo comentário de horatio (boa ligação!), Achei que deveria explicar como me acomodei naquele retângulo em particular. Ao criar um bloco, é necessário que cada parte do seu padrão apareça pelo menos uma vez no referido bloco (e, idealmente, não mais que uma vez). Com esse padrão, observei se havia pontos recorrentes no eixo x ou y; felizmente para mim, os hexágonos não estão sentados em um ângulo estranho, então isso tornou as coisas uma tarefa relativamente fácil.

insira a descrição da imagem aqui

No eixo X, peguei dois hexágonos alinhados. Estes seriam o início e o fim do padrão, horizontalmente. Em seguida, selecionei um ponto correspondente de cada um (neste caso, o ponto mais à esquerda). Isso marcaria a largura exata do retângulo de recorte para o padrão. Em seguida, fiz o mesmo verticalmente, usando os pontos que já escolhi para a largura como os cantos superiores do retângulo de recorte do padrão. Depois de encontrar os pontos inferiores correspondentes, o retângulo de recorte foi definido.

Você pode usar esta técnica em qualquer número de formas. Você também pode usá-lo em hexágonos (ou outras formas) em ângulo, mas lembre-se de que o ladrilho ficará substancialmente maior, dependendo do ângulo.


2
Se você pudesse explicar a idéia por trás de como escolheu a área retangular, o OP poderá generalizar isso para outras formas.
horatio 27/05

A atualização é realmente boa. Ajuda a explicar o conceito.
Diode Dan

Excelente! Ainda bem que pude ajudar. :)
Chris Langford
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.