CSSとSVGでブロブする3つの方法

滑らかで有機的な形状のブロブは、イラストや背景効果に最適なWeb​​デザインに遊び心のあるタッチを与えました。イラストソフトウェアはオプションですが、CSSとSVGを使用してブロブを作成する楽しみを探りましょう。

ここに3つのアプローチがあります。

1。SVGサークルと楕円

最も単純な方法では、SVGのサークルと楕円のオーバーラップが含まれます。 SVG<circle></circle>要素は簡単です：

<circle cx="100" cy="100" fill="red" r="40"></circle>

• cxおよびcy ：円の中心座標を定義します。
• r ：半径を指定します。
• fill ：塗りつぶしの色を設定します。

複数の重複する円が基本的な塊を作成します：

<svg height="300" width="300">
  <circle cx="80" cy="80" fill="red" r="40"></circle>
  <circle cx="120" cy="80" fill="red" r="40"></circle>
  
</svg>

より多様性については、使用してください<ellipse></ellipse>水平および垂直の半径を独立して制御するには：

<ellipse cx="200" cy="80" fill="red" rx="100" ry="50"></ellipse>

単純ですが、この方法は真の塊のオーガニックな感触を欠いているかもしれません。

または、基本的なサークルの場合、CSSで十分です。

 。丸 {
  ボーダーラジウス：50％;
  高さ：50px;
  幅：50px;
}

2。複雑な形状のSVGパス

複雑なブロブデザインの場合、SVG<path></path>要素は究極のコントロールを提供します。次のようなコマンドを使用して、線と曲線を描画できます。

• M ：ポイントに移動します。
• L ：線を引きます。
• C ：立方体のベジエ曲線を描きます。
• Z ：パスを閉じます。

これらのコマンドの詳細な説明は、Chris Coyierの包括的なガイドに記載されています。複雑なパスを手動で作成するのは退屈な場合があるため、ツールを使用してパスデータを生成することを検討してください。例えば：

<path d="M10 10 C 20 20, 40 20, 50 10 Z" fill="red"></path>

このパスは（10、10）から始まり、曲線（50、10）、および形状を閉じます。

3。グーイ効果のためのCSSおよびSVGフィルター

この手法は、SVGフィルターを活用して、交差する形状から「グーイ」効果を作成します。透明性を備えた2つの重複する長方形を使用してから、ぼかしと色の操作にSVGフィルターを適用します。

SVGフィルターは使用して定義されます<filter></filter>CSSを介して適用されます。

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
    <fegaussianblur in="SourceGraphic" stddeviation="30"></fegaussianblur>
    <fecolormatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -7"></fecolormatrix>
  </filter>
</svg>

feGaussianBlurは形状を曖昧にし、 feColorMatrix色を調整します。フィルターはCSSで参照されます。

 .blob-container {
  フィルター：url（ "＃goo"）;
  / * ...その他のスタイル... */
}

このアプローチは、ユニークで簡単にカスタマイズ可能なグーイーブロブ効果を提供します。さまざまなフィルター値を試して、望ましい外観を実現します。

値とパラメーターを調整して、各メソッドのブロブの形状と外観を微調整することを忘れないでください。

以上がCSSとSVGでブロブする3つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。