Bagaimana saya bisa membuat tesselation hexagon ubin (untuk SVG / Web)?

11

Saya mencari untuk membuat gambar latar belakang SVG untuk halaman web menggunakan segi enam biasa dalam pola tessellation mirip dengan gambar di bawah ini. Namun, saya perlu hexagon untuk saling terhubung sehingga saya dapat menggunakan:

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

Pola CSS. Saya ingin melakukan ini di Inkscape. Saya tidak yakin bagaimana "memotong" pola menjadi beberapa blok. Bagaimana saya mulai melakukan ini?

Segi enam

EDIT Hasilnya terlihat sangat bagus! keluaran

Diode Dan
sumber
Akan sangat membantu jika Anda dapat menempelkan tautan ke file inkscape!
V-Red

Jawaban:

21

Dengan sedikit tipuan operasi boolean ini adalah proses yang cukup mudah.

masukkan deskripsi gambar di sini

Ambillah satu set heksagon yang Anda miliki di sana, buat persegi panjang yang cocok dengan oranye yang saya dapatkan pada gambar di atas (pastikan sudut berbelok ke titik yang sesuai pada heksagon), dan kemudian gunakan alat persimpangan untuk mendapatkan menyingkirkan segala sesuatu di luar persegi panjang. Itu akan meninggalkan Anda dengan pola miring.

Sunting: Per komentar horatio (panggilan bagus!), Saya pikir saya harus menjelaskan bagaimana saya memilih persegi panjang tertentu. Saat membuat ubin, Anda harus memiliki setiap bagian dari pola Anda muncul setidaknya sekali dalam ubin tersebut (dan idealnya, tidak lebih dari sekali). Dengan pola ini saya melihat apakah ada titik berulang pada sumbu x atau y; untungnya bagi saya, segi enam tidak duduk pada sudut yang aneh, jadi ini membuat hal-hal menjadi tugas yang relatif mudah.

masukkan deskripsi gambar di sini

Pada sumbu X, saya memilih dua segi enam yang disejajarkan. Ini akan menjadi awal dan akhir dari pola, secara horizontal. Saya selanjutnya memilih titik yang cocok dari masing-masing (dalam hal ini, titik paling kiri). Ini akan menandai lebar tepat dari kliping persegi panjang untuk pola. Selanjutnya, saya melakukan hal yang sama secara vertikal, menggunakan titik yang sudah saya pilih untuk lebar sebagai sudut atas dari persegi panjang kliping pola. Setelah saya menemukan poin yang cocok lebih rendah, persegi panjang kliping didefinisikan.

Anda bisa menggunakan teknik ini pada sejumlah bentuk. Anda dapat menggunakannya pada segi enam (atau bentuk lain) pada sudut juga, tetapi perlu diingat ubin akan menjadi jauh lebih besar, tergantung pada sudutnya.

Chris Langford
sumber
2
Jika Anda bisa menjelaskan ide di balik bagaimana Anda memilih area persegi panjang, OP mungkin bisa menggeneralisasi ini ke bentuk lain.
horatio
Pembaruannya sangat bagus. Membantu menjelaskan konsep.
Diode Dan
Luar biasa! Senang aku dapat membantu. :)
Chris Langford