ブログ

SVG＆CSSアニメーションでグラデーションを動かすサンプルソース

Bit Beans
2022.10.06

システム開発

＃エンジニア

先日、グラデーションを多用する案件のコーディングを担当することになり、どの程度グラデーションを自由に扱えるか調べてみました。たぐっちぇです。

結論から言うと「SVGとCSSアニメーションで、予想以上に自由にグラデーションを扱える」でした！
透過を織り交ぜたグラデーションも対応できるので、表現の幅も広げられ、SVGで吐き出されるキレイなグラデーションは制作側の満足度も満たしてくれるかも？
ということで、SVGとCSSアニメーションでループするグラデーションコードを展開してみます！

SVGコードの記述

今回はCSSアニメーションで動かすため、HTML内にSVGコードを直接記述します。
ポイントは以下の4つになります。

１. 線形グラデーションか円形グラデーションかを指定する

線形・円形のグラデーションの種類は、SVGコード内のdefs要素内に記述します。
そして、記述した要素内にグラデーションの詳細を指定していきます。

<svg...>
<defs>
  <radialGradient id="clippath">
...
  </radialGradient>
</defs>
</svg>

linearGradient	線形グラデーション
radialGradient	円形グラデーション（放射状グラデーション）

2. グラデーションカラーの切り替えポイントを設定する

<svg...>
<defs>
  <radialGradient id="clippath">
    <stop class="stop1" offset="0%"/>
    <stop class="stop2" offset="100%"/>
  </radialGradient>
</defs>
</svg>

3. パス単位かグループ単位でのグラデーションを指定する

パス単位のグラデーションをかける

グループ全体に対してグラデーションをかける

<!-- パス単位のグラデーション指定 -->
<linearGradient id="clippath" gradientUnits="objectBoundingBox">
...
</linearGradient>

<!-- グループ全体へのグラデーション指定 -->
<linearGradient id="clippath" gradientUnits="userSpaceOnUse">
...
</linearGradient>

グラデーションをかける範囲を指定するには、gradientUnits属性を使用します。

objectBoundingBox	グループ全体に対してグラデーションをかける。 gradientUnits=”userSpaceOnUse”
userSpaceOnUse	パス単体にグラデーションをかける。デフォルト値。 gradientUnits=”objectBoundingBox”

4. グラデーションの角度を調整する

コーダーにはおなじみのCSSプロパティ「transform」ですが、SVGにもグラデーション属性として用意されています。
使い方はCSSと同様で、gradientTransform属性と、値に rotate(数値) を指定するだけで角度を変更でき、カンタンに導入できるのもありがたいところです。

CSS

前述のSVGの準備が整ったら、あとはCSSのアニメーションプロパティを使用して背景色を変更していきます。

svg{
  .stop1, .stop2{
    animation-name: stop;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  .stop1{ animation-delay: .0s;}
  .stop2{ animation-delay: .32s; }
 
  #star{
    fill: url(#clippath); 
  }
}

@keyframes stop{
  0% { stop-color: transparent; }
  100% { stop-color: #f00; }
}

サンプルソース全体

  <svg xmlns="http://www.w3.org/2000/svg" width="560" height="500" viewBox="0 0 500 500">
    <defs>
      <radialGradient id="clippath" gradientUnits="userSpaceOnUse" gradientTransform="rotate(0)">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="100%"/>
      </radialGradient>
    </defs>

    <g id="star">
      <path d="M310.61,181.82H500V184L346.86,294.9l60.06,182.9-1.61.54L250,365.79,94.69,478.34l-1.61-.54,60.06-182.9L0,184v-2.15H189.4L248.92,0h2.16Z"/>
    </g>
</svg>

svg{
  .stop1, .stop2{
    animation-name: stop;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  .stop1{ animation-delay: .0s;}
  .stop2{ animation-delay: .32s; }
 
  #star{
    fill: url(#clippath); 
  }
}

@keyframes stop{
  0% { stop-color: transparent; }
  100% { stop-color: #f00; }
}