SVG、テキストにグラデーション、しかもアニメーション。

〽️標準装備。 〽️にじみ出る感を出す。 〽️1文字ずつグラデーション。 〽️複合パスで楕円に。 〽️線にも円形グラデーション。 〽️1つの定義で色々楽しめる。





⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

こんにちは、「ふ」です。「SVGのグラデーションシリーズ」も4回目になりました。
今回は第3回で作成した円形グラデーションのアニメーションを、テキストロゴに施していろいろと試してみたいと思います。

使用するグラデーション定義は前回のもの1つだけです。
しかしながら属性や対象を変更するだけで、まったく雰囲気の違う効果を得ることができます。
紹介するものを参考にして、素敵なテキストロゴを作ってみてください。

当記事は⬇︎の記事で作成したグラデーション定義を使用します。まだご覧になっていない方は参考にしてください。

SVG、グラデーションのアニメーション ②〜円形編。

2021.11.07
カギはCSSのstep関数。

標準装備。


前回作成したグラデーションパターン⬇︎です。

「「3<!-- ストップカラーを入れ替えるCSSアニメーション -->」」 <style> #naka { animation:naka 4s steps(2,jump-none) infinite; } @keyframes naka { to { stop-color:darkcyan; } } #soto { animation:soto 4s steps(2,jump-none) -0.05s infinite; } @keyframes soto { to { stop-color:blanchedalmond; } } #ura { stroke:url(#maru); } </style> 「「3<!-- アニメーション付きグラデーションの定義 -->」」 <radialGradient id="maru" cx="50%" cy="50%" r="25%" gradientUnits="userSpaceOnUse"> <animate attributeName = "r" dur = "2s" from = "0%" to = "130%" repeatCount = "indefinite"/> <stop id = "naka" offset="0.5" style="stop-color:blanchedalmond"/> <stop id = "soto" offset="1" style="stop-color:darkcyan"/> </radialGradient>

・SVGでグラデーションベクトルの半径を動かす
・CSSアニメーションでストップカラーを入れ替える

これら2つのアニメーションがセットになっています。

長方形の塗りに適用するとこんな⬆︎感じでした。

テキストロゴに取り入れてみましょう。
イラレやVectornatorなどのベクターソフトで、テキストをタイプしてアウトライン化→SVG形式で書き出します。

<svg viewBox="0 0 841.9 595.3"> 「「3<!-- アウトライン化したテキストのデータ -->」」 「「1<g id = "moji">」」 < path d = "....."/> < path d = "....."/> .......... 「「1</g>」」 </svg>

現在アウトライン化したテキストのデータが<path>要素として記述されています。まとめてグラデーションを施せるように、グループ化しておきましょう。CSSで呼び出せるよう、id名を「moji」としました。

ここにグラデーション定義とCSSアニメーションのセットを流し込みます。

<svg viewBox="0 0 841.9 595.3"> 「「3<!-- ストップカラーを入れ替えるCSSアニメーション -->」」 <style>  〜 略 〜 </style> 「「3<!-- アニメーション付きグラデーションの定義 -->」」 <radialGradient id= 「「5"maru"」」 cx="50%" cy="50%" r="25%" gradientUnits="userSpaceOnUse">  〜 略 〜 </radialGradient> 「「3<!-- アウトライン化したテキストのデータ -->」」 <g id = 「「5"moji"」」>  〜 略 〜 </g> </svg>

CSSで、グラデーション定義とテキストデータを紐付けます。

「「5#moji」」 「「1path」」 { fill:url(「「5#maru」」); }

指定は<svg>内の<style> 〜 </style>の中に書いても構わないですし、HTML上にある別のCSSタグ内でも構いません。

テキストロゴに円形グラデーションを付けることができました。
柔らかな雰囲気ですね。飾り枠を付けたい気分。

✖️ 「「3#moji { ... } 」」 ○ #moji 「「1path」」 { ... }

ベクターソフトで画像をSVG形式で書き出したときには、「塗り」の情報も一緒に書き出されます。
<g>に直接グラデーション定義を指定すると、書き出された「塗り」情報の指定位置によってはそちらが優先されてしまい、グラデーションを適用できない恐れがあります。

そのためCSSセレクタでは、<g>の子要素である<path>要素までアクセスするようにしましょう。

にじみ出る感を出す。


それでは先程作ったものをベースに、手を加えてバリエーションを作っていきましょう。
てはじめに。

<rect width = "100%" height = "100%" fill = "「「4darkcyan」」"/>

ロゴの背面に長方形を置いてみます。
fill(塗り)は片方のストップカラーと同じ、darkcyanです。

背景色を片方のストップカラーと同色にすると、「何もないところから文字がにじみ出てくる」感が表現できます。

1文字ずつグラデーション。


コードを細かく見るとわかるように、アウトライン化されたテキストの1文字1文字は独立したパスで構成されています。
現在定義しているグラデーションのgradientUnits属性は「userSpaceOnUse」となっているため、グラデーションのベクトルはviewBoxを基準に構成されています。

それを初期値の「objectBoundingBox」とすることで、グラデーションは各パスのバウンディングボックスを基準に発生します。

「「3<!-- radialGradientの開始タグ内 -->」」 gradientUnits = "「「1objectBoundingBox」」"

1文字ずつグラデーションできました。
光沢感がありますね。

さきほどのdarkcyanの長方形を背面に置きました。
昔の名作映画みたい。

複合パスで楕円に。


さきほどの1文字ずつのグラデーションをみて、その形状が「正円ではない」ことに気付かれたかもしれません。

gradientUnits属性が初期値の「objectBoundingBox」であり、半径rの指定が「%」指定であったとき。

rの大きさは、バウンディングボックスの縦横からそれぞれ測定されます。

つまりバウンディングボックスが正方形でなかった場合、グラデーションの形状は楕円に成増。

そのことを利用して、現在は個々のパスで構成されている文字たちを複合パスにしてみましょう。 この操作はベクターソフト上で行ったほうが簡単です。

<path d = "...."> <path d = "...."> <path d = "....">         「「1⬇︎」」 <path d = " bb....... bb....... bb......."/>

これをSVGで書き出してコードを見てみると、複数あったパスデータが1つのタグにまとめられていることがわかります。
この状態でobjectBoundingBoxに指定されたグラデーション定義を適用してみましょう。今度は1つの<path>要素になっているので、直接idを付けます。

<path id = "「「5combine_text」」" d = "....."/>

CSSで紐付け。

「「5#combine_text」」 { fill:url(#maru); }

確かに楕円形が広がっていきます。
正円のときとはまた違った雰囲気ですね。

背景には濃いグレーの長方形⬇︎を置いています。

<rect width = "100%" height = "100%" fill = "#444"/>

線にも円形グラデーション。


もう1つ。SVGでは「線」にもグラデーションをかけることができます。
方法はfill(塗り)のときと同じく、CSSでstrokeプロパティにグラデーション定義を紐付けるだけです。

「1文字ずつグラデーション」のところで作ったアニメーション。これをベースに作ってみましょう。
現在fill(塗り)にグラデーション定義を使っていましたが、stroke(線) のほうに指定します。みやすいように線幅(stroke-width)もある程度広くします。

#moji path { stroke-width:6; stroke:url(#maru); }

線にグラデーションアニメーションが適用されました。
しかしながら、線幅を広くしたぶん内側の「塗り」の部分がせまくなってしまっています。

そこで、前面に全く同じパスデータを配置します。

「「3<!-- アウトライン化したテキストのデータ -->」」 <g id = "moji">  〜 略 〜 </g> 「「3<!-- ⬆︎と同じパスデータ -->」」 「「1<g id = 「「5"moji2"」」>  〜 略 〜 </g>」」

貼り付けたものはidを「moji2」としました。
こちらは「線:なし」、塗りは単色のグレー「#999」にしてみます。

#moji2 path { stroke:none; fill:#999; }

このへんでどうでしょうか。
テキストの輪郭が輝いているようです。

例によって背景にダークシアンの長方形を置きました。
輪郭がより際立っていますね。

「「3<!-- radialGradientの開始タグ内 -->」」 gradientUnits = "「「1userSpaceOnUse」」"

gradientUnits属性を「userSpaceOnUse」にしてみます。

「塗り」のグラデーションのときとはまた違った雰囲気になりました。
ほかにも色々とイジリたくなってきます!

1つの定義で色々楽しめる。


最後までお読みくださり、ありがとうございました。
アニメーション付きの円形グラデーション。属性や対象を変えることで、1つの定義だけからいろんな効果が楽しめました。

webdで表示することを考えたとき。
要素は静止したものよりも、動きを付けたほうがユーザの視線を誘導します。しかもグラデーションしているので強くなりすぎず、柔らかな印象を与えることができます。

みなさんもぜひ、ご自分のwebコンテンツで試してみてください。ではまた〜 ♪



SVG、グラデーションのアニメーション ①〜線形編。

2021.10.30
パターンの繰り返しとユニット切り替え。


SVGでニューモフィズムのアニメーション。

2021.10.01
拡張性のある実装にしています。


HSL変換を使った配色や色指定。

2021.09.24
配色パターンを秒作。












「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。