SVG エフェクト

SVG エフェクトに分類されるWeb表現技法8件。パスドローイング(手書きアニメ)、SVGモーフィング(形状変形)、グーフィルター(粘性融合)、波形セパレーターなど。ライブデモとコピーできるコード付き。

stroke-dasharrayとdashoffsetでSVGの線が描かれていく演出。グラフやロゴ、署名の登場アニメに使えます。

pathのd属性の頂点を線形補間して形を滑らかに変える技術。ライブラリ無しでブロブやハートへ連続変形します。

feGaussianBlurとfeColorMatrixで要素同士が溶け合うメタボール表現。ローダーやメニュー展開の演出に最適です。

速度の異なる波SVGを重ねて横スクロールさせ、セクションの境界を動的に区切ります。LPのヒーロー下端に好適。

円のstroke-dashoffsetで進捗を可視化し、中央の数値をカウントアップ。ダッシュボードやスキル表示に使えます。

ホバーやクリックで状態が切り替わるSVGアイコン集(メニュー/いいね/完了/通知)。マイクロインタラクションに。

linearGradientをSVGのanimateで横移動させ、見出しに流れる色とアウトライン描画を与えます。タイトルの主役に。

feTurbulenceとfeDisplacementMapでノイズ歪みを与え、有機的にうねる液体表現を作るSVGフィルター。背景演出に。