Comment puis-je créer une tesselation hexagonale en mosaïque (pour SVG / Web)?


11

Je cherche à créer une image d'arrière-plan SVG pour une page Web en utilisant des hexagones réguliers dans un motif de pavage similaire à l'image ci-dessous. Cependant, j'ai besoin que les hexagones s'interconnectent pour pouvoir utiliser:

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

Modèle CSS. J'aimerais le faire dans Inkscape. Je ne sais pas comment "couper" le motif en blocs. Comment pourrais-je commencer à faire cela?

Hexagones

EDIT Le résultat est vraiment beau! production


Serait utile si vous pouviez coller un lien vers le fichier inkscape!
V-Red

Réponses:


21

Avec un peu de ruse d' opération booléenne, c'est un processus assez facile.

entrez la description de l'image ici

Prenez simplement un ensemble d'hexagones que vous avez là, créez un rectangle qui correspond à l'orange que j'ai dans l'image ci-dessus (assurez-vous que les coins s'accrochent aux points appropriés sur les hexagones), puis utilisez l'outil d'intersection pour obtenir débarrasser de tout en dehors du rectangle. Cela devrait vous laisser avec un motif carrelable.

Edit: Selon le commentaire d'Horatio (bon appel!), Je me suis dit que je devrais expliquer comment je me suis installé sur ce rectangle particulier. Lors de la création d'une tuile, vous devez faire apparaître chaque partie de votre motif au moins une fois sur cette tuile (et idéalement, pas plus d'une fois). Avec ce motif, j'ai cherché à voir s'il y avait des points récurrents sur l'axe x ou y; heureusement pour moi, les hexagones ne sont pas assis à un angle étrange, donc cela a rendu les choses relativement faciles.

entrez la description de l'image ici

Sur l'axe X, j'ai choisi deux hexagones qui étaient alignés. Ce serait le début et la fin du motif, horizontalement. J'ai ensuite sélectionné un point correspondant dans chacun (dans ce cas, le point le plus à gauche). Cela marquerait la largeur exacte du rectangle de détourage pour le motif. Ensuite, j'ai fait la même chose verticalement, en utilisant les points que j'ai déjà choisis pour la largeur comme coins supérieurs du rectangle de détourage du motif. Une fois que j'ai trouvé les points inférieurs correspondants, le rectangle de détourage a été défini.

Vous pouvez utiliser cette technique sur n'importe quel nombre de formes. Vous pouvez également l'utiliser sur des hexagones (ou d'autres formes) à un angle, mais gardez à l'esprit que la tuile deviendra considérablement plus grande, selon l'angle.


2
Si vous pouviez expliquer l'idée derrière la façon dont vous avez choisi la zone rectangulaire, l'OP pourrait être en mesure de généraliser cela à d'autres formes.
horatio

La mise à jour est vraiment bonne. Aide à expliquer le concept.
Diode Dan

Excellent! Heureux d'avoir pu aider. :)
Chris Langford
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.