WEBサイトのアニメーションについて

Question

例えばこのようなサイトを見ていて思ったのですが、

各キャラクターのマウスオーバー時にSVGのpathの値が動的に動いていますよね。
これはどうやって動かしているのでしょうか？
（技術やこのソフトを使うなど、なんでもいいです）

Illustratorなどで作成したイラストをSVG化して、そのパスの一部だけをマウスオーバー時やスクロール時に動かしたい、などのやり方を教えてください。
よろしくおねがいします。

Answer 1

svg自体のコードを編集するのはいかがでしょうか
https://atmarkit.itmedia.co.jp/ait/articles/1207/02/news142.html

Comments

[my_sitm]

めちゃくちゃ参考になります！ありがとうございます！
イラレで作成したSVGにはanimateタグはなかったので、animateタグを初めて知ったのですがかなり便利ですね！教えてくださり感謝してます。簡単なアニメーションであればanimateタグで設定して、より複雑なものはJSで設定して、など、実際作るときのイメージが膨らみました！

Answer 2

svgでやるならパスアニメは基本です。
hoverなどをトリガーに設定してあった一連のアニメを動作させるだけです。
svg自体はフリーハンドでも書けますが、GUIのツールのほうが直感的です。
お金があるならIllustratorでよいでしょう、
お金がなければInkScapeでもそこそこなものなら書けます

Comments

[my_sitm]

回答ありがとうございます！

> トリガーに設定してあった一連のアニメを動作させるだけ
ここが少しわかりません
Illustratorは使えますので、作成したイラストをSVG化することまではできますが、
hover時にそのイラストを動的に動かすやり方が分からず困っています。

例えばこのURL（https://www.16personalities.com/ja/%E6%80%A7%E6%A0%BC%E3%82%BF%E3%82%A4%E3%83%97）
の各キャラクターは、検証ツールで見るとhover時にsvgタグ内の<g>タグのtransformの値が動的に変わるのが確認できます
まさにこんな感じで、hover時に各部品を動かして、動いているように見せるような、このようなことをやりたい場合はどんな方法があるのかを知りたいです
もしくは自分が知らないだけでIllustratorを使ってこのように動かせるのでしょうか？
SVG全体を動かしたり回転したりするのであればCSSを使えばできそうだなと思うのですが、このようにhover時にキャラクターに細かい動きを付ける場合の方法を御存知でしたら教えていただきたいです！
（物分りが悪くてすみません…！）