ジグソーパズルのような背景の作り方

ジグソーパズルっぽい背景作りたいなと思い、初めは「ジグソーパズル CSS」みたいな検索かけてたのですがいい感じのが見つからず、偶然、「ジグソーパズル　作り方」って検索をかけた時に、ジグソーパズル探訪という面白いページを見つけました。

2回抜きという用語で検索すると、同様にホビー商品の製造会社さんの記事 ジグソーパズルをどうやってピースの形で抜いているのか、製造方法を少し教えます！ が出てきました。こちらはピースの刃型と呼ばれる、絵柄をカットするための型の実物の画像が出てきます。

何となく1回の操作でできてそうなものだと思っていたので、興味深かったのですが、ふと、「これを使ってジグソーパズルっぽい背景表現が作れるんじゃね？」と思ってやってみることにしました。

背景画像の繰り返しと繰り返し用のパズルテクスチャ

CSSで background-image を指定した時、その画像が指定した範囲を埋めないのであれば、デフォルトで繰り返しが発生します。(1) この挙動自体は、画面サイズによって表示領域が異なるようなものに適用する背景としては便利な挙動です。 とすれば、あとはパズルテクスチャを作るだけなのですが、ここで、「2回抜き」の発想を使うとちょっと便利になります。下記画像の赤・青の通り、それぞれ、3ピース分の刃型を作れば、その繰り返しがちょうどいい感じのパターンになります。

ということで、赤と青をそれぞれ別の画像にして...

これを重ねると、以下のようなパターンが出来上がります。

対応するCSSはこちら。2つのレイヤーが単に重なるようにしています。パターンがいい感じに重なるようにオフセットを無理やり頑張ってます。

.pattern-container {
  position: relative;
  background: #fff;
}

.pattern-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: repeat;
}

.pattern-x {
  background-image: url('/static/posts/puzzle-x.png');
  background-size: 200px auto;
  background-position: 30px 0;
  opacity: 0.15;
}

.pattern-y {
  background-image: url('/static/posts/puzzle-y.png');
  background-size: auto 200px;
  background-position: 0 35px;
  opacity: 0.15;
}

同じものを2枚の画像ではなく1枚の画像で実現しようとすると、縦横それぞれ6ピースごとに同じパターンが出現するので、36ピース分の画像が必要になるのかと思うと、合計12ピース分の画像で済んでいるので容量にして 1/3 ってことで良いでしょうか...？

あと、縦横で分離することで、窪みのところで画像を断ち切る必要性がなくなり、それぞれ自然に作れるというのも良いところだと思います。

おわり

現実をちゃんと観察することで楽ができるって何か普段の仕事みたいで面白いなって思ったので記事にしてみました。また何かやりたいです。

以上！