WebKit Clock
/
HTML5 Canvas, CSS3, JavaScript, Web Fonts, SVGで制作した世界時計の習作。画像を一切用いずにどこまでの表現が可能かを模索した実験的コンテンツ。“WebKit” Clockの名称が指す通り、当時CSS3のサポートが最も強力であったSafariとChromeにのみに対応。
時計の針の三角形の形状の表現はCSSでも可能だが、CSSの場合エッジの処理にアンチエイリアスがかからずシャギーが目立つため、SVGを動的生成して描画を行っている。
音楽プレーヤーの再生・停止ボタンに見立てたグラフィックもCSSによる表現。クリックすることで都市間の自動移動&再生処理が開始される。