SVGを直書きする

タグの追加やCSSでスタイルを指定したりするのでSVGをHTMLに直書きします。

不要な記述は削除しておくと編集しやすくなります。
例えば、xmlタグやsvgタグに指定してあるxmlns属性、styleタグ内のCSSは別ファイルに移すとか

HTML
コピー
<svg viewBox="0 0 95.11 90.45">
   <polygon points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/>
</svg>

linearGradientタグを追加する

グラデーションにするためにlinearGradientタグを追加します。
svgタグ内の始めに追加すると良いでしょう。
※defsタグは可読性を加味して追加しています。推奨のようですがなくても大丈夫です。

HTML
コピー
<svg viewBox="0 0 95.11 90.45">
   <defs> 
       <linearGradient id="gradient">
 
       </linearGradient>
   </defs>
   <polygon points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/>
</svg>

stopタグをlinearGradientタグの子要素として追加

stopタグを追加します。
今回は2つ追加するので2色のグラデーションになります。

HTML
コピー
<svg viewBox="0 0 95.11 90.45">
   <defs> 
       <linearGradient id="gradient">
           <stop id="stop1" offset="0%"/>
           <stop id="stop2" offset="100%"/>
       </linearGradient>
   </defs>
   <polygon points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/>
</svg>

まだ黒い星型だと思いますが大丈夫です。

CSSでアニメーションをかける

次のCSSでSVGにグラデーションのアニメーションをかけることができます。

CSS
コピー
svg{
   width: 30%;
}
polygon{
   fill: url(#gradient);
}
 
#stop1{
   animation: stop1 5s ease-in-out infinite alternate;
}
#stop2{
   animation: stop2 5s ease-in-out infinite alternate;
}
@keyframes stop1{ /* 紫から緑へ */
   0% {stop-color: #7A5FFF;}
   100% {stop-color: #01FF89;}
}
@keyframes stop2{ /* 緑から紫へ */
   0% {stop-color: #01FF89;}
   100% {stop-color: #7A5FFF;}
}

完成

これでパスが繋がっている図形のグラデーションの実装は完了です。
最終的なHTML・CSSはこちらです。

HTML
コピー
<svg viewBox="0 0 95.11 90.45">
   <defs> 
       <linearGradient id="gradient">
           <stop id="stop1" offset="0%"/>
           <stop id="stop2" offset="100%"/>
       </linearGradient>
   </defs>
   <polygon points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/>
</svg>

CSS
コピー
svg{
   width: 30%;
}
polygon{
   fill: url(#gradient);
}
 
#stop1{
   animation: stop1 5s ease-in-out infinite alternate;
}
#stop2{
   animation: stop2 5s ease-in-out infinite alternate;
}
@keyframes stop1{ /* 紫から緑へ */
   0% {stop-color: #7A5FFF;}
   100% {stop-color: #01FF89;}
}
@keyframes stop2{ /* 緑から紫へ */
   0% {stop-color: #01FF89;}
   100% {stop-color: #7A5FFF;}
}