SVG波浪生成器

在线 SVG 波浪生成器,调节波峰高度、波长、层数、颜色和方向,生成网页顶部或底部的波浪分隔线,导出 SVG 代码和图片,适合网页装饰。

预览

生成结果

SVG 尺寸

SVG 代码

CSS 背景代码

工具介绍

SVG波浪生成器可以快速生成自定义多层波浪SVG图形,支持调节振幅、波长、层数、颜色渐变、方向等参数,实时预览效果,可直接复制SVG代码或CSS背景代码使用。

使用方法

调整左侧参数即可实时生成波浪效果:

调整后可在预览区查看效果,生成完成后直接复制SVG代码或CSS背景代码即可使用。

生成原理

波浪根据正弦函数计算每个点的Y坐标:
Y = 基础Y + 振幅 × sin( X × 2π / 波长 )

平滑波浪使用二次贝塞尔曲线连接相邻点,折线波浪直接使用直线连接,多层波浪从上到下或从下到上均匀分布,多层自动生成渐变填充。

注意事项

生成的SVG代码可直接插入HTML页面使用,CSS背景代码可用于容器背景,所有生成结果仅供前端设计使用,不涉及任何业务或技术保证。

生成的SVG可以直接用在网页里吗?

可以,生成的SVG代码是标准的可缩放矢量图形,可以直接插入HTML,也可以保存为.svg文件使用,CSS背景方式可直接作为元素背景属性使用。

为什么多层波浪颜色会渐变?

多层波浪默认使用你设置的起始颜色到结束颜色的渐变填充,如果只需要单一颜色,只需要将起始颜色和结束颜色设置为相同即可。

可以生成水平平铺的波浪吗?

可以,你只需要设置合适的宽度,复制生成的CSS背景代码,其中已经包含了repeat-x平铺属性,可以直接水平平铺。

平滑波浪和折线波浪有什么区别?

平滑波浪使用贝塞尔曲线计算,边缘更顺滑适合视觉效果;折线波浪由直线段组成,适合需要棱角分明的效果,可根据设计需求选择。