SVGマスク、クリップパス、そしてモーフィングについて

動画編集ソフトで作ったような「インクが滲み出て背景の写真が変わるエフェクト」や「アイコンの形が滑らかに別の形へ変わる表現」を、軽量なコードだけで実装可能にする、SVGマスクの仕組みからモーフィングの応用テクニックまでを詳しく解説します。

表現の幅を広げる「切り抜き」：マスクとクリップパス

テクスチャや画像を特定の形で切り抜く方法として、SVGには <mask> と <clipPath> が用意されています。これらは似て非なるもので、表現できる豊かさが全く異なります。

クリップパスとは

クリップパスは、いわゆる「クッキーの型抜き」です。指定した図形の「内側か外側か」をパキッと二階調（表示か非表示か）で判定します。

マスクとは

マスクは、白と黒の「輝度（明るさ）」や「アルファ値（透明度）」を使って切り抜く方法です。

• 白（#ffffff）の部分
  100% 表示される
• 黒（#000000）の部分
  0%（完全に隠れる）
• グレーや半透明の部分
  その度合いに応じて「半透明」に透ける

このグラデーション（半透明）が使えるという点が、マスクの最大の強みです。

実践：マスクを絡めた「じわっと現れる」アニメーション

CSSのグラデーションと線画アニメーションを組み合わせることで、画像やテキストがじわじわと波紋のように現れるエフェクトを作ることができます。

<svg viewBox="0 0 800 450" width="100%" height="100%">
  <defs>
    <mask id="ink-mask">
      <rect width="800" height="450" fill="#000000" />
      <circle class="mask-circle" cx="400" cy="225" r="0" fill="#ffffff" />
    </mask>
  </defs>

  <image href="background.jpg" width="800" height="450" mask="url(#ink-mask)" />
</svg>

/* CSSでマスク内の円を大きくする */
.mask-circle {
  animation: reveal 2s ease-out forwards;
  transform-origin: center;
}

@keyframes reveal {
  to {
    r: 500px; /* 画像全体を覆うサイズまで大きくする */
  }
}

円の代わりに、前述した「線（Stroke）」を太くしていくアニメーションをマスク内で流せば、「手書きの文字の軌跡に合わせて、後ろの画像が浮かび上がってくる」といった、より複雑な演出も可能になります。

モーフィング（Morphing）：図形を滑らかに変形させる

モーフィングとは、ある形状から別の形状へと、生き物のように滑らかに変形させるアニメーションです（例：再生ボタンの「▶」が一時停止の「■」に変わるなど）。

モーフィングの仕組みとルール

SVGのモーフィングは、パスデータ（d 属性）の中にある座標の数値をパラパラ漫画のようにアニメーションさせているだけです。 そのため、CSSやSMIL（SVG内蔵のアニメーション機能）でモーフィングを行う場合、以下のルールがあります。

点の数が異なると、ブラウザは「どの点がどこへ移動すればいいのか」を計算できず、アニメーションがバグるか、瞬時に形が切り替わるだけになってしまいます。

CSSでのシンプルなモーフィング例

/* 点の数が同じであれば、CSSのtransitionだけで変形可能。点の数が違う場合は点を重ねる等で対処可能 */
.icon{
  width:28px;
  height:28px;
  background:#111;
  clip-path:polygon(0% 0%,0% 0%,100% 50%,100% 50%,100% 50%,0% 100%,0% 100%,0% 0%);
  transition:clip-path 450ms cubic-bezier(0.37,0,0.63,1);
}
.icon.is-stop{
  clip-path:polygon(0% 0%,100% 0%,100% 0%,100% 50%,100% 100%,100% 100%,0% 100%,0% 0%);
}

複雑なモーフィングを形にする実践的なアプローチ

実際のデザインでは、デザインツール（FigmaやIllustrator）で作った複雑なロゴ同士をモーフィングさせたいケースがほとんどです。これらは大抵、点の数が一致しません。

手動で点の数を合わせるのは至難の業であるため、JavaScriptライブラリを頼ることもあります。

GSAP（GreenSock）の「MorphSVGPlugin」を使う

Webアニメーションの最高峰であるGSAPの有料プラグイン「MorphSVG」を使うと、アンカーポイントの数が全く異なる複雑な図形同士でも、自動で最適化して美しく変形させてくれます。

無料で使いたい場合は他のものを

オープンソースでモーフィングを実現したい場合は、KUTE.js が有力な選択肢になります。GSAPほど万能ではありませんが、コントロールポイントを自動補正する機能（SVG Morphプラグイン）が含まれており、美しい変形が可能です。

まとめ：高度な表現を成功させるワークフロー

SVGのマスクやモーフィングを扱う際は、コードを書く前の「素材作り（Figma等での作業）」が成否を分けます。

1. マスク: 隠す部分は黒、見せる部分は白。重ね順（レイヤー構造）をSVGのタグ構造と一致させる。
2. モーフィング: 可能な限りシンプルな形状（パスのポイント数を減らす）で作る。複雑なものは最初からJSライブラリ（GSAP等）の導入を前提に設計する。

これらの技術を組み合わせることで、Webサイト全体の体験がより上質なものへと変化するかもしれません。

まずはFigmaからシンプルなパスを2つ書き出して、CSSでのモーフィングやマスクに挑戦してみてはいかがでしょうか。