SVG 波浪图案生成器

生成多层叠加的 SVG 波浪图案,颜色、振幅和层数均可自定义,适合用作区块背景或横幅。100% 在您的浏览器中本地处理,不会向服务器发送任何内容。

下载 SVG

工作原理

该图案由多条半透明的正弦曲线叠加而成,从最上层(更细、更不透明)到最下层(更宽、更柔和),营造出类似首页区块底部常见「波浪」横幅的层次感。每一层的相位略有不同,以避免曲线完全重叠。

下载的文件在任何尺寸下都能保持完美画质吗?

可以,这是真正的矢量 SVG:您可以直接嵌入网页(它会通过 viewBox 自适应容器宽度),也可以在设计软件中放大,都不会损失清晰度,这一点与位图不同。

如何把它用作我网站的区块背景?

复制 SVG 代码并直接粘贴到您的 HTML 中,或下载文件后将其设为 CSS 背景图。若要实现区块底部的横幅效果,请使用 position: absolute; bottom: 0 并配合 width: 100% 来定位。

图案完全由 JavaScript 在您的浏览器中生成,不会发起任何网络请求。