読者です 読者をやめる 読者になる 読者になる

daiizの自由帳

フレンチフライ トリュフ塩仕立て

GitHubのリポジトリリストのグラデーション波が格好いい

tech

GitHubのページデザイン,ガラッと変わりましたね!!
新しいプロフィールページも格好良いけれど,リポジトリリストの ”Past year of activity” を表す波(折れ線グラフ)がカッコよすぎる.

f:id:daiiz:20160920001655p:plain

こういうやつ↑

どうやって表示しているのか知りたかったので,ソースコードを覗いてみた.はてなブックマークのブックマーク数を表示する「50 users」のチップのように画像として配信されているのかと思いきや,SVG(Scalable Vector Graphics)を使ってその場でグラフを書いていた.

f:id:daiiz:20160920002246p:plain

idっぽいものが入っていたので少し伏せ字加工したけれど,こんな感じでrectタグが描かれている.ここでは,fill と mask を使って上手いこと値が大きいほど色が濃い折れ線が表現されている.まず,mask が参照しているのは polyline で定義している折れ線データで,以下のような値が埋め込まれている.

f:id:daiiz:20160920002709p:plain

ということで,これ単体では,次のような灰色の波が描かれる.

f:id:daiiz:20160920002754p:plain

続いて,fill では linearGradient で定義した徐々に濃くなるグラデーションの長方形を参照している.

f:id:daiiz:20160920003050p:plain

プロフィールの芝生で使われている4段階の緑色が指定されていることが分かる.これ単体では以下のようになる.

f:id:daiiz:20160920003202p:plain

この2つを組み合わせることで,グラデーション長方形から折れ線を切り出したようなデザインができている.すごい,勉強になった.SVGでの表現法の生きた例を見れたような気がして大満足.