设计 / SVG

用于区块分隔的SVG波浪生成器

生成平滑的分层SVG波浪，用于两个页面区块之间的边缘：选择层数、波浪数量、高度、平滑度和颜色，然后下载SVG或将其复制为CSS背景。

用于区块分隔的SVG波浪生成器: 每一层都是由一排点组成的，这些点以随机幅度交替位于基线的上方和下方，再通过平滑曲线连接，并填充至底部边缘。后面的层颜色更浅，因此能呈现出层次感。SVG会自动适应任意宽度，CSS版本则会将其嵌入为data URI背景。 完全在浏览器中本地运行，文件不会上传到服务器。

类别
开发者工具
使用次数
在浏览器中
费用
免费·无需注册
可用性
可直接使用
SVG波浪生成器本地处理

完全在浏览器中运行

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

SVG可以拉伸到任意宽度（preserveAspectRatio="none"），因此适合用作全宽区块分隔线。将它放在一个区块的底部，并使用下一个区块的背景颜色；也可以将其翻转后用于顶部。相同的随机种子始终会绘制出相同的波浪。

SVG还是CSS？

内联SVG可以通过CSS设置样式和制作动画，其填充色可以使用currentColor。作为CSS背景时，SVG是一个数据URI：无需额外加载内容，但颜色会固定在代码中。无论采用哪种方式，文件都只有几百字节；还可以使用SVG清理工具进一步整理。

平滑度

曲线是转换为三次贝塞尔线段的Catmull-Rom样条：平滑度达到最高时，曲线会平缓地经过每个点；平滑度为零时，点之间变成直线，形成锯齿状的山形边缘。

使用方法

  1. 设置层数、波浪数量及其高度。
  2. 选择颜色；如需放在区块顶部，请翻转波浪。
  3. 点击生成新的随机波浪，然后下载SVG或复制CSS。

隐私与限制

波浪在你的浏览器中绘制。

相关工具

SVG blobCSS图案CSS渐变

常见问题

如何在两个区块之间使用它？

将波浪设置为下方区块的颜色，并将它放置在上方区块的底部且铺满全宽；如需将其用于区块顶部，请翻转波浪。

使用相同的设置会生成相同的波浪吗？

会：形状由随机种子决定，因此只有点击生成新波浪时才会改变。

我可以将这些波浪用于商业用途吗？

可以：这些形状是为你生成的，不受许可证限制。

免费工具·使用在浏览器中次·无需账户