Come posso creare una tassellatura esagonale della piastrellatura (per SVG / Web)?


11

Sto cercando di creare un'immagine di sfondo SVG per una pagina Web usando esagoni regolari in un modello di tassellatura simile all'immagine qui sotto. Tuttavia, ho bisogno che gli esagoni si colleghino in modo da poter usare:

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

Modello CSS. Mi piacerebbe farlo in Inkscape. Non sono sicuro di come "tagliare" il modello in blocchi però. Come potrei iniziare a farlo?

esagoni

EDIT Il risultato è risultato davvero buono! produzione


Sarebbe utile se potessi incollare un link al file inkscape!
V-Red,

Risposte:


21

Con un po 'di inganno all'operazione booleana questo è un processo abbastanza semplice.

inserisci qui la descrizione dell'immagine

Basta prendere un set di esagoni che hai lì, creare un rettangolo che corrisponda a quello arancione che ho nell'immagine sopra (assicurati che gli angoli si aggancino ai punti appropriati sugli esagoni), quindi usa lo strumento intersezione per ottenere sbarazzarsi di tutto al di fuori del rettangolo. Questo dovrebbe lasciarti con uno schema piastrellabile.

Modifica: Per il commento di Horatio (buona chiamata!), Ho pensato che avrei dovuto spiegare come mi sono sistemato su quel particolare rettangolo. Quando si crea una tessera, è necessario che ogni parte del modello appaia almeno una volta nella tessera (e idealmente, non più di una volta). Con questo modello ho cercato di vedere se c'erano punti ricorrenti sull'asse x o y; fortunatamente per me, gli esagoni non sono disposti ad un angolo strano, quindi questo ha reso le cose un compito relativamente facile.

inserisci qui la descrizione dell'immagine

Sull'asse X, ho selezionato due esagoni allineati. Questi sarebbero l'inizio e la fine del modello, in orizzontale. Successivamente ho selezionato un punto corrispondente da ciascuno (in questo caso, il punto più a sinistra). Ciò segnerebbe la larghezza esatta del rettangolo di ritaglio per il motivo. Successivamente, ho fatto lo stesso in verticale, usando i punti che avevo già scelto per la larghezza come gli angoli superiori del rettangolo di ritaglio del motivo. Dopo aver trovato i punti inferiori corrispondenti, è stato definito il rettangolo di ritaglio.

È possibile utilizzare questa tecnica su qualsiasi numero di forme. Puoi usarlo anche su esagoni (o altre forme) in un angolo, ma tieni presente che la tessera diventerà sostanzialmente più grande, a seconda dell'angolo.


2
Se potessi spiegare l'idea alla base di come hai scelto l'area rettangolare, l'OP potrebbe essere in grado di generalizzare questo ad altre forme.
horatio,

L'aggiornamento è davvero buono. Aiuta a spiegare il concetto.
Diodo Dan,

Eccellente! Sono contento di aver potuto aiutare. :)
Chris Langford,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.