線画アニメーション

クリックすると色を変えて再生します。

線画の作成は、「画像をsvgに変換」の項に書いた内容と同じ方法で、 千葉県館山市の館山城の写真から作成しています。
アニメーションは、スタイルシート(css)で、線画全体の線の長さを一つの線分とする破線を指定し、 表示する位置のオフセットを、2秒間かけてゼロから、線分の長さまで変化させています。 その後、2秒間かけて塗り色を変化させています。

更新:2022.11.10