clip-pathを使ってSVGをマスクとして使いつつ、マスクをアニメーションさせる 😷

clip-pathにSVGのID（正確にはSVG内の図形のID）を渡してあげればその図形をマスクにすることができます。

また、SVGもタグなのでCSSアニメーションで動かすことができます。
そうすると、合わせ技でマスクをアニメーションさせることができるのです。

注意事項としては以下の通りです。

SVGをdisplay: noneにするとマスクが効かなくなります。
僕は、幅・高さを0にしつつ、positionをfixed（もしくはabsolute）にすることで、他の要素への影響をなくしています。

svg {
  position: fixed;
  width: 0; height: 0;
}

参照される要素は、可能なかぎりdefs要素内で定義されることが推奨されているようです。

単位不要です。

<clipPath id="star" transform="translate(16, 16)"></clipPath>

developer.mozilla.org

こういう表現をする際はいつもCanvasを使っていたのですが、単純なアニメーションならclip-pathの方が簡単そうです。

みかづきブログ・カスタム