テキストをメタリックに見せるには？
こんにちは、「ふ」です。
SVGアニメーション作り方、今回は「メタリックなテキスト」を作ってみましょう。
金属表現として定番なのが、「光沢のずれ」を見せることです。
金属製品にはベベル（面取り）など、外周部に何かしらの縁取り加工がされている場合がよくあります。
ここに光が当てられたとき。「正面」と「縁取り部分」では高さや角度が異なるため、光沢が「ずれて」映ります。
オブジェクトの輪郭と内側に対し、パターンの違う光沢を配置することで「金属」っぽく見せることができます。
SVGアニメーションのコーナーなので、もちろんこの光沢を動かします。
SVGアニメーションへの落とし込み。
テキストの内部で光沢を動かす。これをSVGを使って表現する方法を検討します。
今回はアウトライン化したテキストの前面で、グラデーションを付けた長方形を移動させることにしました。
長方形の塗りを黒→白→黒のグラデーションにすると、「光沢」っぽく成増。
これをアニメーションで水平移動させます。
水平移動している「光沢長方形」に対して、テキストの形でクリッピングパスをかけます。
クリップパスは、「パスの内部だけが表示される」というものでしたね。
その背面に黒で塗ったフツーのテキスト（アウトライン化させてます）を配置すると、テキストの内部を光沢が移動しているように。
「光沢長方形を移動」←「テキストの形でクリップ」←「背面に通常のテキストを配置」。
これが「テキスト内部に光沢を通過させる」１セットです。
そして背面に輪郭を太くした「もう1セット」を配置します。これが縁取り部分です。
縁取り部分の光沢長方形には異なったアニメーションやグラデーションパターンを指定しておきます。
そうすることで、「正面とずれのある縁部分の光沢」を表現することができます。
素材準備。
では画像から準備していきましょう。
Vectornatorやイラレなどのベクターソフトを使用。アウトライン化したテキストと、それよりも輪郭がひとまわり大きいテキストを作ります。
ちなみに拡大→複製しても上手くできません。
テキストをそのまま拡大すると、元のオブジェクトと「ずれ」が生じてしまいます。
あくまで輪郭のみが大きいオブジェクトを作成します。
好みのフォント（太めのものを選びましょう）でタイプして、アウトライン化。
これを複製し、前面に貼り付けておきます。
背面のオブジェクトを選択し、線幅をある程度大きくします。
この背面のオブジェクトを、輪郭部分として使います。ただし現在の輪郭部分はあくまで「線」です。SVGでクリップパスやグラデーションを編集することはできません。
したがってもう１度アウトライン化しておいてください。これで輪郭部分を「図形」として扱うことができるように成増。
次にテキストの内側と外側の輪郭部分を通過させる「光沢長方形」を作成。
長方形を作り、線形グラデーションで黒の中に白を含ませます。「光沢のずれ」を出すために、内側用のグラデーションは白い部分をやや広め、外側用のものは白エリアをシャープにしておきました。
２つの光沢長方形は、テキストの横に重ねて配置しておきます。アートボードからはみ出していても問題ありません。
これで素材の準備は完了です。
重ね順はあとからコードで変更できますが、１度確認しておきましょう。⬆︎のようになっていればOKです。
金属アニメーション。
先程の画像をSVGで書き出しましょう。
<svg viewBox = ... >
「「３<!--輪郭テキスト-->」」
<g 「「１id = "soto"」」>
<path d = ... /> ...
</g>
「「３<!--光沢（輪郭用）のグラデーション定義-->」」
「「４<linearGradient id = ...> </linearGradient>」」
「「３<!--光沢長方形（輪郭用）-->」」
<rect 「「１id = "sototuya"」」 x = .../>
「「３<!--内側テキスト-->」」
<g>
<path 「「１id = "naka"」」 d = ... /> ...
</g>
「「３<!--光沢（内側用）のグラデーション定義-->」」
「「４<linearGradient id = ...> </linearGradient>」」
「「３<!--光沢長方形（内側用）-->」」
<rect 「「１id = "nakatuya"」」 x = .../>
</svg>
コードの概形はこの⬆︎ようになっています。
SVGでは後に記述された要素ほど前面に表示されるので、最背面にあるオブジェクトから順に記述されています。
現在ある４つの要素にはすべてid名を付けておきます。
輪郭のテキストには「#soto」、輪郭の光沢には「#sototuya」、また内側セットのオブジェクトにもそれぞれ「#naka」「#nakatuya」としておきました。
途中<linearGradient>という要素がありますが、これは光沢長方形の塗りに使われるグラデーションを定義しているものです。
id名を元に重ね順を示したのがこちら⬆︎。
現在のブラウザ表示です。
ここからコードを編集していきます。
■ アニメーションさせる。
２つの光沢長方形（#sototuya、#nakatuya）を水平移動させるアニメーションを施します。
#sototuya {
animation:sototuya 「「１4s」」 linear 「「１alternate」」 infinite;
}
@keyframes sototuya {
to {
transform:translate(110%);
}
}
#sototuyaを水平移動させました。
往復させたかったのでanimation-directionを「alternate」としています。移動量の「110%」は実際にブラウザでプレビューしながら調整しました。
#nakatuyaも動かしましょう。
#nakatuya {
animation:nakatuya 「「１3s」」 linear alternate infinite;
}
@keyframes nakatuya {
to {
transform:translate(110%);
}
}
#nakatuyaはanimation-duration（継続時間）を「3s」とし、#sototuyaとはタイミングをずらしてみました。
■ clipPathを作成して切り取る。
アニメーションしている２つの長方形（#sototuya、#nakatuya）を、輪郭と内側の形で切り抜きます。
輪郭テキストと内側テキスト（#soto、#naka）を複製し、パスデータはそのままでclipPath要素として定義しましょう。
<g id = "soto">
<path d = ... /> ...
</g>
「「３<!--#sotoを複製してclipPathを定義-->」」
「「１<clipPath id = "sotoclip">」」
<path d = ... /> ...
「「１</clipPath>」」
<linearGradient id = ...> </linearGradient>
<rect id = "sototuya" x = .../>
<g id = "naka">
<path d = ... /> ...
</g>
「「３<!--#nakaを複製してclipPathを定義-->」」
「「１<clipPath id = "nakaclip">」」
<path id = "naka" d = ... /> ...
「「１</clipPath>」」
<linearGradient id = ...> </linearGradient>
<rect id = "nakatuya" x = .../>
#sotoと#nakaをコピペしてタグ名を「clipPath」とするだけでOKです。
clipPathとlinearGradientに関しては描画要素ではなく「定義」なので、記述場所は気にしなくても構いません。
ここで。
画像作成時に使ったベクターソフトにもよるのですが、<clipPath>の内部で要素がグループ化されていると、クリッピングがうまくいきません。
タグ内全ての<g>、</g>を削除し、グループを解除しておきましょう。とくに#sotoclipは複雑にグループ化されている可能性大です。
「「１<g id = "sotosoto">」」
<rect id = "sototuya" x = .../>
「「１</g>」」
・・・・
「「１<g id = "nakanaka">」」
<rect id = "nakatuya" x = .../>
「「１</g>」」
もう１つの準備として、#sototuyaと#nakatuyaを<g> 〜 </g>で囲み、id名を付けておきます。「#sotosoto」「#nakanaka」としておきました。
長方形要素に対し直接clipPathを掛けると、「クリップした長方形がアニメーションする」状態になってしまいます。そうするとクリップパス自体も水平移動してしまう事になるので、思うような結果が得られません。
グループ化することで「長方形＋アニメーション」をその内部に閉じ込めておき、外側の<g>に対してclipPathを施します。
これで準備は完了。CSSでclipPathを指定しましょう。
CSS上での「clipPath」は、「clip-path」とケバブケースで記述しなければならないので注意してください。
#sotosoto {
clip-path:url(#sotoclip);
}
#nakanaka {
clip-path:url(#nakaclip);
}
できました。
テキストの輪郭と内側、それぞれ別の光沢が移動しています。
おつかれさまでした！
このままでもいいのですが、最後にちょっと装飾を付けてみましょう。
色と影で仕上げよう。
ここからはお好みで、このSVGアニメーションを仕上げてみましょう。
最前面に#nakaをコピペした#nakacolorを配置。これで色付けを行います。
また、最背面の#sotoにさりげなく影を落としてみましょう。
「「３<!--#nakaをコピーしたものを最前面に貼り付け-->」」
<g 「「１id = "nakacolor"」」>
<path d = ... /> ...
</g>
#nakacolorに対し、色と不透明度を指定します。
もし#nakacolorの子要素にclass名が付けられていた場合、そちらが優先されてしまって上手くいきません。削除しておきましょう。
そして#sotoにはfilterのdrop-shadowを指定します。
#nakacolor {
fill:yellow;
opacity:0.4;
}
#soto {
filter:drop-shadow(2px 1px 2px);
}
ちょっと手を加えるだけで、印象がガラリと変わりました。
皆さんもお好みのアレンジをしてみてください。
今回のSVGアニメーションではメタリックなテキストをやってみました。
最後までお読みくださり、ありがとうございました。
今後もトリッキーなものを考えたら紹介させていただきます。
では、また〜 ♬
SVGアニメーション、作り方。
CSSアニメーション、作り方。
ロリポップ！の取次店になりました。
Vectornator、SVGを書き出してwebに配置。
Vectornator 使い方。
CSSアニメーション03、プロパティ概要と一括指定について。
