SVGの3次ベジェ曲線でハート型を描く
3次ベジェ（C）パスコマンドを使用してハートアイコンを作成します。対称的なコントロールポイントがハートの特徴的なローブと尖った底部をどのように作成するかを学びます。
Icons
詳細な説明
3次ベジェ曲線によるハート型
ハートは最も認識されやすいシェイプの1つで、3次ベジェ曲線を学ぶ素晴らしい演習です。上部に2つの対称的なローブと尖った底部で構成されます。
パス
M 50,30 C 50,20 40,0 20,0 C 0,0 0,20 0,30
C 0,50 20,65 50,90 C 80,65 100,50 100,30
C 100,20 100,0 80,0 C 60,0 50,20 50,30 Z
構造
ハートは6つの3次ベジェセグメントで構築されます：
- 左ローブ上部：中央上部から左方向へ最も左の点まで
- 左ローブ下部：最も左の点から中央左へ
- 左側から先端へ：中央左から底部の先端へ
- 右側から先端：底部の先端から中央右へ
- 右ローブ下部：中央右から最も右の点へ
- 右ローブ上部：最も右の点から中央上部へ
コントロールポイントの対称性
ハートは垂直中心線（x = 50）について対称です。右側のコントロールポイントは左側を鏡像にしたものです：
| 左CP | 右CP |
|---|---|
| (40, 0) | (60, 0) |
| (0, 0) | (100, 0) |
| (0, 20) | (100, 20) |
| (20, 65) | (80, 65) |
ハートのカスタマイズ
- 広いローブ：上部のコントロールポイントを水平方向にさらに離す
- 深い切れ込み：開始の
Mポイントのy座標を下げる - 鋭い先端：底部のポイントをさらに下に移動し、曲線を引き締める
- 丸い底部：底部のエンドポイントをそれほど極端でない位置にする
ユースケース
ハート型はいいね/お気に入りボタン、ゲームの体力インジケーター、バレンタインテーマのデザイン、感情フィードバックアイコンに使用されます。パスベースのハートはストローク描画エフェクトでアニメーションしたり、他のシェイプにモーフィングできます。