How to Use SVG Waves for Modern Web Design

Flat rectangular sections are boring. SVG waves add organic flow to your layouts and take your design from template to custom.

Why SVG Waves?

• Scalable — They look sharp on any screen size
• Lightweight — A wave SVG is typically under 1KB
• CSS-stylable — Change colors with fill, animate with CSS
• Accessible — They're decorative, so screen readers skip them

Basic SVG Wave Structure

<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
  <path
    d="M0 60 Q300 0 600 60 Q900 120 1200 60 L1200 120 L0 120 Z"
    fill="#6366f1"
  />
</svg>

The Q commands create quadratic curves. Adjusting the control points changes the wave shape.

Positioning Waves as Section Dividers

The most common pattern is placing waves between page sections:

.section-divider {
  width: 100%;
  height: 80px;
  display: block;
}

.section-divider svg {
  width: 100%;
  height: 100%;
}

<section style="background: #0f0f11;">
  <!-- Content -->
</section>
<div class="section-divider">
  <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M0 60 Q300 0 600 60 Q900 120 1200 60 L1200 120 L0 120 Z" fill="#1a1a2e"/>
  </svg>
</div>
<section style="background: #1a1a2e;">
  <!-- Content -->
</section>

Layered Waves for Depth

Stack multiple wave paths with different opacities:

<svg viewBox="0 0 1200 200" preserveAspectRatio="none">
  <path d="M0 200 L0 120 Q300 60 600 100 Q900 140 1200 80 L1200 200 Z"
        fill="#6366f1" opacity="0.6"/>
  <path d="M0 200 L0 140 Q400 80 800 130 Q1000 160 1200 120 L1200 200 Z"
        fill="#6366f1" opacity="0.3"/>
</svg>

This creates a parallax-like depth effect without JavaScript.

Animating Waves with CSS

Add gentle movement for a dynamic feel:

@keyframes wave {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-25px); }
}

.wave-animated path {
  animation: wave 8s ease-in-out infinite;
}

Keep animations subtle — large movements are distracting and increase CPU usage.

Responsive Waves

Use preserveAspectRatio="none" on the SVG so waves stretch to fill the container width. Set height with CSS rather than the SVG viewBox to control how tall the wave appears on different screens.

Skip the math and generate your perfect waves with our SVG Wave Generator — customize layers, colors, and complexity with real-time preview.