Wie kann ich eine Kachelsechseck-Tesselation (für SVG/Web) erstellen?

Mit ein wenig boolescher Operation ist dies ein ziemlich einfacher Vorgang.

Nehmen Sie einfach einen Satz der Sechsecke, die Sie dort haben, erstellen Sie ein Rechteck, das dem orangefarbenen entspricht, das ich im Bild oben habe (stellen Sie sicher, dass die Ecken an den entsprechenden Punkten auf den Sechsecken einrasten), und verwenden Sie dann das Schnittwerkzeug, um es zu erhalten Alles außerhalb des Rechtecks ​​entfernen. Das sollte Ihnen ein kachelbares Muster hinterlassen.

Bearbeiten: Per Horatios Kommentar (guter Anruf!) dachte ich, ich sollte erklären, wie ich mich für dieses bestimmte Rechteck entschieden habe. Beim Erstellen einer Kachel muss jeder Teil Ihres Musters mindestens einmal in dieser Kachel erscheinen (und idealerweise nicht mehr als einmal). Mit diesem Muster habe ich geschaut, ob es wiederkehrende Punkte auf der x- oder y-Achse gibt; Glücklicherweise sitzen die Sechsecke nicht in einem seltsamen Winkel, so dass dies eine relativ einfache Aufgabe war.

Auf der X-Achse habe ich zwei Sechsecke ausgewählt, die ausgerichtet waren. Dies wären horizontal der Anfang und das Ende des Musters. Als nächstes wählte ich jeweils einen passenden Punkt aus (in diesem Fall den Punkt ganz links). Dies würde die genaue Breite des Schnittrechtecks ​​für das Muster markieren. Als nächstes tat ich dasselbe vertikal, wobei ich die Punkte verwendete, die ich bereits für die Breite als die oberen Ecken des Schnittrechtecks ​​des Musters ausgewählt hatte. Sobald ich die passenden unteren Punkte gefunden hatte, war das Schnittrechteck definiert.

Sie können diese Technik auf eine beliebige Anzahl von Formen anwenden. Sie können es auch auf Sechsecken (oder anderen Formen) in einem Winkel verwenden, aber denken Sie daran, dass die Kachel je nach Winkel wesentlich größer wird.