工具介绍
SVG波浪生成器可以快速生成自定义多层波浪SVG图形,支持调节振幅、波长、层数、颜色渐变、方向等参数,实时预览效果,可直接复制SVG代码或CSS背景代码使用。
使用方法
调整左侧参数即可实时生成波浪效果:
- 振幅:波浪上下波动的幅度,数值越大波浪起伏越大
- 波长:单个波浪周期的长度,数值越大波浪越平缓
- 波浪层数:生成多层渐变波浪的层数,最多支持10层
- 颜色设置:起始颜色和结束颜色,多层波浪会生成渐变填充
- 尺寸:设置SVG整体宽度和高度
- 平滑波浪:使用贝塞尔曲线生成平滑波浪,不勾选则生成折线波浪
- 波浪从下向上:反转波浪方向,波浪从底部开始向上延伸
调整后可在预览区查看效果,生成完成后直接复制SVG代码或CSS背景代码即可使用。
生成原理
波浪根据正弦函数计算每个点的Y坐标:
Y = 基础Y + 振幅 × sin( X × 2π / 波长 )
平滑波浪使用二次贝塞尔曲线连接相邻点,折线波浪直接使用直线连接,多层波浪从上到下或从下到上均匀分布,多层自动生成渐变填充。
注意事项
生成的SVG代码可直接插入HTML页面使用,CSS背景代码可用于容器背景,所有生成结果仅供前端设计使用,不涉及任何业务或技术保证。