模様で絵をゆがめる
feTurbulenceの模様をぼかし、feDisplacementMapで絵をずらします。
SVG FILTER EFFECTS
SVG Liquid Lens Lab
レンズの内側だけ、文字や画像をゆがめる。強さと模様も調整できます。
01DRAG / TOUCH / ARROW KEYS
LIVE SVG FILTER LAB
レンズを動かして試す
レンズをドラッグ
レンズの外側は元の絵です。水面 · 強さ42 · 細かさ50%
02
COPY THE RESULT
今の設定を持ち帰る
HOW IT WORKS
同じ絵を3層に重ねる。
レンズ内にだけ、軽くぼかした絵と歪ませた絵を重ねます。いちばん下の絵は加工しないため、外側は鮮明です。
これは同じSVG内の絵を加工する方法です。背後にある任意のHTMLを直接ゆがめるものではありません。ドラッグ時の遅れて追従する動きは、このデモのJavaScriptによるものです。
SVG SOURCE
コードを確認する
表示中の絵とレンズを含むSVGです。読み込んだ画像はSVG内に埋め込みます。
ダウンロードは常にプレビュー全体のSVGです。
03
UNDER THE HOOD
歪みと光をどう作る？
縁だけ屈折を強める
レンズ内の元の絵を少しぼかし、maskで歪んだ絵を重ねます。外側の絵は鮮明なままです。
反射と影を重ねる
feSpecularLightingの光、半透明の色、ぼかした影を重ねて厚みを出します。