Toollet
按任务或应用名称搜索搜索联系我们
价格

波浪 SVG 生成器

调整波浪的大小、形状和颜色,为网页创建分隔线或背景。复制或保存 SVG 或背景 CSS,也可以保存 PNG 图像。

选择预设

选择预设会替换当前设置,包括宽度、高度和颜色。

振幅表示垂直变化量;波浪数量表示整个宽度内包含的周期数。

高级设置相位0°・中心50%

使用 0–360 度的相位偏移起始位置。中心高度为 0% 时位于上边缘,100% 时位于下边缘。

超出图像范围的波浪部分会被裁切。

功能介绍

调整形状和颜色

调整波浪高度、数量、位置和填充方向,并使用一种或两种颜色创建波浪。

获取适合需求的格式

复制并保存 SVG 代码或 CSS 背景,也可以保存为 PNG 图像。

使用方法

  1. 选择起始形状

    直接调整数值,或从“选择模板”中选择相似形状。

  2. 调整尺寸和颜色

    指定宽度、高度、振幅和波浪数量。在高级设置中调整起始位置和中心高度。

  3. 生成并检查 SVG

    检查生成的波浪形状和透明区域。更改设置后重新生成。

  4. 获取所需格式

    选择 SVG 或 CSS 背景进行复制或保存,也可以保存 PNG。

适用场景

分隔页面区块

在内容区块之间或页脚上方创建波浪形分隔线。

匹配网站配色

使用纯色或渐变创建与页面配色相匹配的背景素材。

波浪形状和保存格式

振幅和波浪数量

振幅表示垂直变化幅度,波浪数量表示整个宽度内的周期数。此功能不用于显示音频波形。

波浪位置和裁切区域

使用相位更改起始位置,使用中心高度更改垂直位置。图像范围之外的部分会被裁切。

选择 SVG 或 PNG

SVG 以矢量形式表示形状。PNG 会按指定的像素尺寸保存图像,并保留透明区域。

如何放置 CSS 背景

CSS 用于指定背景图像。请为使用该背景的元素设置宽度和高度,以提供背景的显示区域。

常见问题

可以调整波浪形状和颜色吗?

你可以指定数值和颜色。选择“使用两种颜色”可设置第二种颜色和渐变角度。

选择模板后,当前设置会怎样?

所选模板的设置会替换当前设置,包括宽度、高度和颜色。选择模板后,请按需调整数值。

更改设置时,预览会更新吗?

更改后,请选择“生成 SVG”以检查结果。之前生成的结果将不再可供显示或保存。

SVG 是精确的正弦波吗?

波浪采用平滑的三次曲线进行近似绘制,并非用于数学测量或音频分析的波形。

文件处理

输入
根据数值波浪设置和颜色创建。无需选择图像。
输出
wave.svg、wave.css 和 wave.png。也可以复制 SVG 和 CSS。

当前设置

搜索工具