SVG 波浪生成器

生成用于背景的 SVG 波浪和 blob 形状。自定义振幅、层数和颜色。

Color 1

Color 2

Height: 150px

Complexity: 3

Flip vertically

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" >
  <defs>
    <linearGradient id="wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#3b82f6" />
      <stop offset="100%" style="stop-color:#8b5cf6" />
    </linearGradient>
  </defs>
  <path fill="url(#wave-gradient)" d="M0,150 C96,136.30421604524145 192,144.24947591744058 288,90.19534392969035 C384,102.32877226830624 480,48.444724027262964 576,66.14183458940715 C672,105.63411848582291 768,87.20073011607383 864,91.2403791657516 C960,55.77395683398435 1056,74.94110647353864 1152,119.56861649650818 C1248,91.449070839044 1344,79.3373037282322 1440,45.90117476902833 L1440,150 L1440,200 L0,200 Z" />
</svg>

SVG Waves for Web Design - 技术详情

SVG waves add visual interest to website sections and hero areas. They're scalable, lightweight, and work across all browsers. Use them as section dividers, background decorations, or animated elements.

命令行替代方案

<svg viewBox="0 0 1200 120">\n  <path d="M0,60 Q300,0 600,60 T1200,60 V120 H0 Z" />\n</svg>

参考

查看官方规范