マウスカーソルの出入りの方向で変わるアニメーション

マウスカーソルの出入りの方向表示、動きを変えるアニメーションです。
カーソルの入る方向で色が変わり、出た方向に動きます。
今回はCSSで色をつけていますが、backgroundに画像を指定する方法でも可能です。
アイコンなどのマウスオーバーに変化をつけることができると思います。

▼以下が実際のソースサンプルです。

図形の中心を基準にして角度で方向を指定しているので、長方形の場合は計算が必要です。

▼CSS

▼HTML

今回、参考にさせていただいたのは、
[JS] カーソル進入位置に合わせて変わるアニメーション – nbnote blog』さんです。
ありがとうございます。

デモページは、こちら