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 形的波峰和波谷。大胆且几何化。
圆润山丘: 半圆形凸起，营造柔和、起伏的地形感。
不对称: 不同的上下振幅，营造自然、风吹般的外观。
团块/有机: 对曲线进行种子随机变化，以获得独特的有机形状。相同的输入始终产生相同的输出。