陰影を先に。
色はあとに。

アルファで文字を表す。

太い文字をグレーで描きます。色の画像と、不透明度だけのアルファ画像をSVGのSourceGraphicとSourceAlphaで取り出せます。縁をつくる形にはアルファを使います。

試してみよう： 「形」で短く太い言葉を選びます。Oの閉じた穴とCの開いた形を比べ、外側も内側も効果が保たれるか見ましょう。

アルファをぼかして、引く。

SourceAlphaをぼかし、鮮明な元のアルファから引きます。正の値が形の内側の帯になり、文字の穴にも縁ができます。黒い帯をグレーの塗りに乗算して陰影をつくります。

arithmetic合成でk2=1、k3=−1を使い、最初の入力を鮮明なアルファにします。結果は許容範囲に収まります。ぼかしを広げると縁も広がり、画像処理で面取りの印象をつくります。

試してみよう： 「縁」で内側の縁を1から20へ増やします。細い線ほど強く影響されることを観察しましょう。

繰り返せる帯。

単色を線形グラデーションに替え、最初と最後を同じ明るさにしてspreadMethodをrepeatにします。gradientTransformを1周期動かすと同じ画像に戻り、縁は固定したまま光が通ります。

アニメーションではグラデーションの変換だけを更新します。素材と形は固定です。スライダー、ドラッグ、矢印キーで同じ位相を調整します。

試してみよう： 「光の移動」で短い周期と長い周期を比べます。同じ速度なら短い周期ほど文字に多くの帯が見えます。

明るさを3つの値に。

グレーのピクセルはRGBが同じ値です。feComponentTransferで各成分を別々に変換し、type="table"で等間隔の値を補間します。5色がグレー0・25・50・75・100%の色を決めます。

color-interpolation-filters="sRGB"を使うとカラーピッカーの値と一致します。アルファは変えず輪郭を保ちます。色の帯と数値表は実際のフィルターの値を示します。

試してみよう： 「色」と色タブで潮の金色をミントの光に替え、50%の色を編集します。変換だけが変わり、グレーの光は同じです。

質感にも同じ色の規則を。

小さなガウスぼかしで素材を柔らかくし、feTurbulenceの再現できるノイズを無彩色にします。形で切り抜いてグレーに少し混ぜてから色を変換し、粒子と光を同じ色の規則に従わせます。

反射が動いてもノイズのシードは固定なので、粒子を増やしてもちらつきません。ぼかしすぎると細い穴が閉じたり輪郭が柔らかくなります。小さな書き出しも確認しましょう。

試してみよう： 光を止めて粒子0%と25%を比べ、読みやすい量へ減らします。柔らかさ0と3も比べましょう。

絵と一緒に効果も保存。

SVGには文字、グラデーション、フィルターをまとめて保存します。再生中ならループする光、停止中ならその瞬間を保存します。システム書体はOSで形が変わるため、輪郭を固定したいときはベクター編集ソフトでパス化してください。

画面保存は現在の素材とクリーム背景を1600 × 1000のPNGにします。単独HTMLには操作をすべて収録。動きを減らす設定では停止で始まり、非表示や画面外では更新を止めます。

試してみよう： 動くSVGと停止したPNGを保存します。前者は再利用できるつくり方、後者は選んだ一瞬を残します。