SVGをサンプルで学ぶ

娘に日本語の書き方を教えようと思い、ひらがなの書き順を表示する方法なにかいいものないか探してる途中です。

：＿フリーソフトで書いたとおりにアニメーションしてくれるソフトありますが、マウス操作では難しい。ペン型のマウスなどが必要。

https://take-web.com/eng/animation/peas-motch/

Xを描く
三角形状を動く赤い丸

Xを描く

<svg viewBox="0 0 300 300" width="300" height="300">
   <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="10" />
   <line x1="300" y1="0" x2="0" y2="300" stroke="red" stroke-width="10" />
</svg>

三角形状を動く赤い丸

<svg viewBox="0 0 300 300" width="300" height="300">
   <path id="target" d="M 10,250 L 100, 25 L 250 100 Z" stroke="#000" fill="none" stroke-width="3" />
   <circle cx="0" cy="y" r="12" fill="red">
     <animateMotion dur="3s" repeatCount="indefinite">
         <mpath xlink:href="#target"></mpath>
     </animateMotion>
    </circle>
</svg>