SVGとHTMLを使って簡潔に、マテリアルデザイン風の時計やカレンダーを作成しましょう。 簡単なSVGで書いているので、ぜひSVGの参考に見てみてください。 もうわかってるという人は、一番下のソースコードリンクからどうぞ。 完成図: 製作フロー 時計部分のSVGパーツ 秒針パーツ(id:secondHand) 分針パーツ(id:minuteHand) 時針パーツ(id:hourHand) 時間の目盛りパーツ(id:hourScale) 時計本体パーツ(id:clock) カレンダー部分のSVGパーツ 週のラベルパーツ(id:calendarWeek) 日付パーツ(id:calendarDay) カレンダー本体パーツ(id:calendar) SVGパーツの呼び出しと位置調整 現在時刻を適用させるスクリプト 時計部分のSVGパーツ 秒針パーツ(id:secondHand) 秒針のパーツは高さ