morphing-icons

SKILL.md

Build icons that transform through actual shape transformation, not crossfades. Any icon can morph into any other because they share the same underlying 3-line structure.

Every icon is composed of exactly three SVG lines. Icons that need fewer lines collapse the extras to invisible center points. This constraint enables seamless morphing between any two icons.

Icons needing fewer than 3 lines use collapsed lines—zero-length lines at the center:

SVG ライン変換を通じて任意のアイコンが別のアイコンに変形するアイコン コンポーネントを構築します。 「モーフィングアイコンの作成」、「アイコントランジションの構築」、「アイコン間のアニメーション」、または「アイコンの変換」を依頼された場合に使用します。 ソース: raphaelsalaja/userinterface-wiki。

原文を見る