Matte / マット
光沢を抑え、やわらかい陰影で凹凸を見せる。
SVG FILTER / LIGHT & SURFACE
SVG Lighting & Emboss Lab.
光を動かして、文字や図形の陰影を変える。凹凸と反射を調整して、SVGを保存。
INTERACTIVE LIGHTING
光源と表面の質感を調整する
日本語も入力できます。長い文字列は、幅に収まるよう縮小します。
METAL / RAISED
パネルをドラッグして光を動かせます。ガイドは矢印キーでも操作できます。
LIGHT ANIMATION
光を走らせて、キラッと見せる
横切る動きは光源のYを通り、斜め・周回は固定ルートを使います。Zはすべて共通です。反射は「光沢の強さ・集中度」で調整できます。設定を変えると再生を停止します。
POINT LIGHT
光源の位置と高さ
位置と高さは800×520のSVG内の値です。Zを上げると光が正面寄りになり、下げると横方向の陰影が強くなります。
COLORS
表面と光の色
SAME SHAPE, DIFFERENT SURFACES
同じ文字で、質感を比べる
Gloss / 光沢
狭い範囲の強い反射で、表面のつやを見せる。
Metal / 金属風
明るい反射と暗い部分の差で、金属風に仕上げる。
作例はLIGHTの文字と同じ光源位置で固定しています。選ぶと質感の設定だけを適用し、入力した文字と光源位置は維持します。
USE IN YOUR PROJECT
表示中の設定で保存する
陰影もアニメーションもSVG。
操作するUIはJavaScript。
「静止画」は現在の光源位置で保存。それ以外は選んだルートで光源が動きます。光源ガイドは含みません。保存SVGは自動再生、HTMLはボタン操作で開始します。
照明はfeDiffuseLightingとfeSpecularLighting、移動はfePointLight内のanimateで実装。SVG単体にJavaScriptは含みません。HTMLとインラインSVGは、動きを減らす設定で静止表示します。
文字はフォントを埋め込まないため、閲覧環境で字形が変わる場合があります。照明を含むSVGフィルターの描画はブラウザーによって差が出る場合があります。
CURRENT SETTINGS
HOW IT WORKS
アルファから凹凸を作り、光を計算する
SourceAlpha → feGaussianBlurアルファを高さの入力にする
透明な部分と不透明な部分の境目をぼかします。照明は、その変化を表面の傾きとして扱います。
feDiffuseLighting / feSpecularLighting拡散反射と光沢を別々に計算
同じ高さ入力と光源から、広い陰影と集中した反射を計算。surfaceScaleの符号で凹凸方向を変えます。
feComposite元の色と合成して図形に収める
拡散反射を元の色に掛け、光沢を加えます。最後に元のアルファで切り抜くので、文字の外には残りません。
これは2D画像の照明表現です。背景へ落ちる影、反射する周囲の景色、奥行きのある側面は計算しません。凹凸の設定は文字の形や輪郭線そのものを変える機能ではありません。
参考：MDN：SVGの照明と光の色 · 仕様：拡散照明 · 仕様：鏡面照明