WebKit Clock

/Created by

HTML5 Canvas, CSS3, JavaScript, Web Fonts, SVGで制作した世界時計の習作。画像を一切用いずにどこまでの表現が可能かを模索した実験的コンテンツ。“WebKit” Clockの名称が指す通り、当時CSS3のサポートが最も強力であったSafariとChromeにのみに対応。

WebKit Clock
WebKit Clock
時計の針の三角形の形状の表現はCSSでも可能だが、CSSの場合エッジの処理にアンチエイリアスがかからずシャギーが目立つため、SVGを動的生成して描画を行っている。
WebKit Clock
音楽プレーヤーの再生・停止ボタンに見立てたグラフィックもCSSによる表現。クリックすることで都市間の自動移動&再生処理が開始される。