Tag
3 件の記事
元箱根駅伝ランナー・現役エンジニアが「SVG」について書いた記事を、新しい順に並べています。
next/og (satori) で、同じ走行データから横カード・透過オーバーレイ・ストーリーの3レイアウトを出し分けた実装記録。-webkit-text-stroke が描かれない・blur が効かない・太字が作れないという制約の下で、多重ストロークの擬似ネオン、黒プレートによる視認性確保、78グリフの日本語サブセット同梱までをコードごと書く。走行時の天気を KV に固定した事故対応も。
チャートライブラリを使わず、React と自前 SVG だけで継続ヒートマップ・心拍効率トレンド・散布図・トレーニング負荷チャートを描いた実装記録。集計を純粋関数に切り出してテストし、データ欠損時は length===0 で graceful に非表示にする設計、TRIMP / ACWR の算出までをコードごと解説する。
Strava の encoded polyline を自前デコードし、地図タイルを一切使わずに走行軌跡を SVG アートとして描いた実装記録。全ランを1つの bbox に投影すると地元ランが点に潰れる問題を、開始地点の greedy クラスタリングとエリア別 bbox 投影で解いた過程をコードごと解説する。