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


11

Ich möchte ein SVG-Hintergrundbild für eine Webseite mit regulären Sechsecken in einem Tessellationsmuster ähnlich dem folgenden Bild erstellen . Ich benötige jedoch die Sechsecke, um eine Verbindung herzustellen, damit ich Folgendes verwenden kann:

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

CSS-Muster. Ich würde das gerne in Inkscape machen. Ich bin mir nicht sicher, wie ich das Muster in Blöcke "schneiden" soll. Wie würde ich damit anfangen?

Sechsecke

BEARBEITEN Das Ergebnis sah wirklich gut aus! Ausgabe


Wäre hilfreich, wenn Sie einen Link zur inkscape-Datei einfügen könnten!
V-Red

Antworten:


21

Mit ein bisschen Trick durch boolesche Operationen ist dies ein ziemlich einfacher Prozess.

Geben Sie hier die Bildbeschreibung ein

Nehmen Sie einfach einen Satz der Sechsecke, die Sie dort haben, erstellen Sie ein Rechteck, das mit dem orangefarbenen übereinstimmt, 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 zu erhalten alles außerhalb des Rechtecks ​​loswerden. 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. Wenn Sie eine Kachel erstellen, muss jeder Teil Ihres Musters mindestens einmal in dieser Kachel erscheinen (und im Idealfall nicht mehr als einmal). Mit diesem Muster habe ich nach wiederkehrenden Punkten auf der x- oder y-Achse gesucht. Zum Glück sitzen die Sechsecke nicht in einem merkwürdigen Winkel, was die Sache relativ einfach machte.

Geben Sie hier die Bildbeschreibung ein

Auf der X-Achse habe ich zwei Sechsecke ausgewählt, die ausgerichtet waren. Dies wäre der Anfang und das Ende des Musters horizontal. Als nächstes habe ich jeweils einen passenden Punkt ausgewählt (in diesem Fall den Punkt ganz links). Dies würde die genaue Breite des Beschneidungsrechtecks ​​für das Muster markieren. Als nächstes habe ich dasselbe vertikal gemacht und die Punkte, die ich bereits für die Breite ausgewählt habe, als obere Ecken des Schnittrechtecks ​​des Musters verwendet. Sobald ich die passenden unteren Punkte gefunden hatte, wurde das Beschneidungsrechteck definiert.

Sie können diese Technik für eine beliebige Anzahl von Formen verwenden. Sie können es auch für Sechsecke (oder andere Formen) in einem Winkel verwenden. Beachten Sie jedoch, dass die Kachel je nach Winkel wesentlich größer wird.


2
Wenn Sie die Idee erklären könnten, wie Sie den rechteckigen Bereich ausgewählt haben, kann das OP dies möglicherweise auf andere Formen verallgemeinern.
Horatio

Das Update ist wirklich gut. Hilft das Konzept zu erklären.
Diode Dan

Ausgezeichnet! Froh, dass ich helfen konnte. :)
Chris Langford
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.