どうも！LSSです！！
とか、
とかを作りながら、漠然と考えていたんですが、
「パターン画像を繰り返して背景として繋がるようにするには…
画像の上辺の点と、同じ位置に当たる下辺に点、
左辺の点と同じ位置に当たる右辺に点、
それらが繋がるように線を引いて模様を作れば、どんな繋げ方でも繰り返し模様になるんじゃないか？」
と。（この文章で伝わる自信は あまりありませんが^^;;;。）
と、いう事で、今回はその思いつきを試してみる事にしました！
まず、四角があって、その辺にいくつか点があります
辺上の点はいくつでもいいのですが、
「必ず上辺と下辺、右辺と左辺は向かいあう位置にも点がある」
ものとします。
↑の例では、上辺と下辺にはそれぞれ１つづつ、右辺と左辺にはそれぞれ２つづつ置いてみた感じですね。
テキトーに点と点を線で繋ぎます
ここで第二のルール。
繋ぐのはどう繋いでも良いのですが、
「どう繋いでも良いが、線に繋がっていない点はないようにする」
ものとします。
この四角から辺や点を抜いたものを並べる
つまり「引いた線だけが見える状態」の四角をパターンとして並べて、背景とする、って感じですね。
横一直線の線になっているのがちょっとつまらないですが、
ナナメ線はうまく繋がって見えますね^^
コードはこんな感じ。
<style><!--
.ptn1{
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" stroke="black" stroke-width="0.3" fill="none"><path d="M 10,0 L 20,15"></path><path d="M 0,5 L 20,5"></path><path d="M 0,15 L 10,20"></path></svg>');
background-size:20px;
}
--></style>
<div class="ptn1">そうすると、こんな感じのパターンになります！<br /><br />横一直線の線になっているのがちょっとつまらないですが、<br />ナナメ線はうまく繋がって見えますね^^</div>
20pxの部分でサイズ指定を変えると、パターンの大きさを変える事ができます。
こんな感じに。
ちなみにこれは 10px にしてみました。
点を増やしたり、線を繋ぎ直したりしてみました
なんだかいい感じに不思議な模様になりましたｗ
こんな風に、点の繋ぎ方次第で、色々なパターンが作れそうですね^^
コード
<style><!--
.ptn2{
padding:0.6em;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" stroke="blue" stroke-width="0.2" fill="none"><path d="M 5,0 L 20,15"></path><path d="M 15,0 L 5,20" ></path><path d="M 15,20 L 0,5"></path><path d="M 20,5 L 0,15"></path></svg>');
background-size:20px;
}
--></style>
<div class="ptn2">おや。<br />なんだかいい感じに不思議な模様になりましたｗ<br /><br />こんな風に、点の繋ぎ方次第で、色々なパターンが作れそうですね^^<br /><br /></div>
上記の例は合計８つの点
上記の模様は、上辺下辺に２つづつ、右辺左辺に２つづつ、合計８つの点を繋いだものです。
線でいうと４本ですね。
パターンの基準画像としてはこんな感じ。
これを並べただけで、
こういう模様になるというのが、
不思議な気がしますね。
なお、今回は「一つの点から伸びる線は一本」で作っていますが、全ての点がカバーできていれば、線は複数あってもいいかと思われます^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
