LoginSignup
4
0

More than 1 year has passed since last update.

画家モンドリアンの絵画っぽいSVGが並んでいるサイトMondrian Land

Last updated at Posted at 2022-12-20

作った

スクリーンショット 2022-12-21 0.04.20.png

Mondrian Land

読み込むたびにランダムに絵画っぽいSVGが出てきます。

コンセプト的な解説

カラーパレットをギャラリー状に閲覧できるサイトは

Color HuntCoolorsなど数多くありますが、

それらのサイトではパレットの構成色が均等に扱われているな、と気づきました。

(5色なら5色の各色の面積が均等だということです)

実際に色を扱う際には背景色、前景色、アクセントなど用途によって面積を変えたりしているはずです。

そこで出てきたのがモンドリアンです。

抽象画、特に白または黒のキャンバスに三原色を並べるという作風が、今回の件にマッチしているなと思いました。

結果として、なんとなくモンドリアンっぽい絵画をSVGで作って並べることになりました。

技術的解説

SVGの操作にSnap.svgを採用しました。

color-namesというリポジトリから色のデータと名前を取得しました。

基本は HTMLベタ書きfetch APIを用いてcolor-namesのCDNからカラー一覧をJSONで取得し、ランダムにベースカラー、アソートカラー、アクセントカラーを決めています。

(本当はベースカラーに応じたアソートカラー、アクセントカラーにしたかったです)

その後 document.createElementNS() でSVG要素を作っています。

HTMLに含まれる要素以外は createElementNS() を使う必要があるようです。

あとはそのSVG要素にSnap.svgを適用し、正方形を3つかぶせています。

超シンプルなリポジトリがあるのでそちらもご覧ください。

終わりに

本当はカラー同士の関係性(補色とか)も考慮したパレットにしたかったのと、正方形の配置もランダムにしたかったのですが、

時間切れです。

でも全くのランダムのわりには調和して見えるのでモンドリアンのコンセプトがすごいんだと思います。

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0