三角ポリゴンを使ってモザイクっぽい画像を作るブームが結構前から来ていて、長続きしている気がする。そういう画像を作るアプリもあるし、単純な背景パターンとして提供してる人もいる。遅まきながら僕も作る工夫をいろいろ考えておこうかなと、このような画像をヒイコラ作った。SVGで。
作り方はまだ安定していないので、その解説はまた今度。こういった幾何学的な画像はSVGがもっとも得意とする分野なわけだけど、実際に三角ポリゴンを組み合わせるだけだときれいに埋まってくれない。理由は斜めになった辺同士の境界の部分に隙間がどうしても出来てしまうようにレンダリングされてしまうから。
最初の画像のように隙間を埋めるには、あらかじめ三角ポリゴンを重ねながら作るという手もあるけど、単純にstrokeとstroke-width属性を使って重なりあうようにしてしまうのが手っ取り早い。
<path
d="M 320,21.1 320,0 316,17 Z"
fill="#5f6c4f"
stroke="#5f6c4f"
stroke-width="1"/>stroke属性をfill属性と同じ色にし、stroke-width属性で1だけ枠を作ってやるだけ。そうするとそれぞれの三角ポリゴンがちょっとだけ重なりあうようになるので、だいたいは境界に隙間ができなくなる。
この画像がなんで「Polyforest」なのかと言うと、森の写真をベースに作ったものだから。80pxくらいに小さくすると(なんとか)森に見える。
Example: Polyforest
見える。
Polyはオススメだけど日本ストアにないから万人向けではないっぽい。次点でtrglかなー。