SVG波 & 区切り線ジェネレーター

SVG波 & 区切り線ジェネレーター

ウェブサイト用の美しい SVG 波形セクション区切り線を作成します。6 つの波形スタイル — スムーズなサイン波、レイヤードウェーブ、シャープなジグザグ、丸みを帯びた丘、非対称、オーガニックブロブ — から選択し、振幅、周波数、色、レイヤーをカスタマイズして、SVG コード、CSS 背景、HTML スニペット、またはダウンロード可能な SVG ファイルとしてエクスポートします。オプションの CSS アニメーションで流れるような波の効果も利用できます。

使い方

ドロップダウンから波形スタイルを選択し、コントロールを調整します。ライブプレビューは、振幅、周波数、幅、高さ、レイヤー数、色、不透明度を変更するとすぐに更新されます。下部の区切り線には垂直反転、方向をミラーリングするには水平反転を使用します。流れるような波の効果にはアニメーションを有効にします。結果に満足したら、エクスポートボタンを使用して、SVG コード、CSS 背景マークアップ、HTML スニペットをコピーするか、SVG ファイルをダウンロードします。

特徴

• 6 つの波形スタイル — スムーズサイン (クラシックなカーブ)、レイヤードウェーブ (重なり合う奥行き)、シャープジグザグ (角張った V 字型)、丸みを帯びた丘 (半円形の隆起)、非対称 (自然な風に吹かれたような感触)、ブロブ/オーガニック (ランダム化された有機的な曲線)。
• マルチレイヤーサポート — 個別の色と不透明度コントロールを備えた最大 4 つのレイヤー。レイヤーは位相オフセットされ、自然な奥行きを生み出します。グラデーションスタイルの区切り線に最適です。
• ライブプレビュー — セクション区切り線としての波を視覚的に表示する大きなプレビュー。あらゆるコントロールを調整するとリアルタイムで更新されます。設定可能な背景色。
• 振幅と周波数 — 波の高さ (20-200px) とピーク数 (1-10) を制御して、必要な形状を正確に作成します。
• 反転コントロール — 垂直反転 (セクション下部の区切り線用) または水平反転 (波の方向をミラーリング)。
• CSS アニメーション — スピードコントロール (スロー/ミディアム/ファスト) を備えたオプションの流れるような波のアニメーション。アニメーションコードは、有効になっている場合にエクスポートに含まれます。
• 4 つのエクスポートオプション — SVG コードをコピー (インライン)、CSS 背景をコピー (データ URI)、HTML スニペットをコピー (すぐに貼り付け可能なセクション区切り線)、SVG ファイルをダウンロード。
• カスタム寸法 — 幅と高さを設定してレイアウトに合わせます。デフォルトの 1200×200 は、ほとんどのウェブサイトセクションで機能します。

波形スタイル

スムーズサイン: ベジェ曲線近似を使用したクラシックな正弦波カーブ。クリーンでモダン。
レイヤードウェーブ: 位相オフセットを持つ複数のサイン波が奥行きと重なりを生み出します。ヒーローセクションに最適です。
シャープジグザグ: 角張った V 字型のピークと谷。大胆で幾何学的。
丸みを帯びた丘: 半円形の隆起で、柔らかく転がるような風景の感触。
非対称: 上下の振幅が異なり、自然で風に吹かれたような外観。
ブロブ/オーガニック: カーブにシードされたランダムなバリエーションにより、ユニークで有機的な形状になります。同じ入力は常に同じ出力を生成します。