タイリング六角テッセレーションを作成するにはどうすればよいですか(SVG / Web用)?


11

下の画像のようなテッセレーションパターンで通常の六角形を使用して、WebページのSVG背景画像を作成しようとしています。ただし、相互に接続するために六角形が必要なので、以下を使用できます。

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

CSSパターン。Inkscapeでこれをしたいのですが。ただし、パターンをブロックに「切り取る」方法がわかりません。どうすればこれを始められますか?

六角形

編集 結果は本当に美しく見えました! 出力


inkscapeファイルへのリンクを貼り付けられると助かります!
V-Red

回答:


21

少しブール演算のトリックで、これはかなり簡単なプロセスです。

ここに画像の説明を入力してください

そこにある六角形のセットを取り、上の画像で取得したオレンジ色に一致する長方形を作成し(角が六角形の適切な点にスナップすることを確認してください)、交差ツールを使用して長方形の外側のすべてを取り除きます。これでタイルパターンが残ります。

編集: horatioのコメント(いいね!)ごとに、その特定の四角形をどのように解決したかを説明する必要があると考えました。タイルを作成するときは、パターンの各部分を少なくとも1回(理想的には1回だけ)タイルに表示する必要があります。このパターンで、x軸またはy軸に繰り返しポイントがあるかどうかを確認しました。幸いなことに、六角形は奇妙な角度で座っていないので、これは物事を比較的簡単な作業にしました。

ここに画像の説明を入力してください

X軸では、整列した2つの六角形を選択しました。これらは、水平方向のパターンの開始と終了です。次に、それぞれから一致するポイントを選択しました(この場合は、一番左のポイント)。これは、パターンのクリッピング長方形の正確な幅をマークします。次に、パターンのクリッピング四角形の上隅として、幅として既に選択した点を使用して、垂直方向に同じことを行いました。一致する下の点を見つけたら、クリッピング長方形が定義されました。

この手法は、任意の数の形状に使用できます。六角形(または他の形状)でも角度を付けて使用できますが、角度によってはタイルがかなり大きくなることに注意してください。


2
長方形の領域を選択する方法の背後にある考え方を説明できれば、OPはこれを他の形状に一般化できる可能性があります。
horatio

アップデートは本当に良いです。概念の説明に役立ちます。
ダイオードダン

優秀な!お役に立てて嬉しいです。:)
Chris Langford
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.