Decorative SVG Backgrounds

SVG isn't just for small icons and loaders. It can also be used to create stunning, full-width decorative backgrounds that add life to your website's headers or sections.

Because they are vector-based, these backgrounds remain crisp regardless of the screen size, and because they are code-based, they can be animated with very little performance overhead.

Example: Animated Ocean Waves

One of the most popular decorative effects today is the "animated wave" at the bottom of a hero section. This is created by defining a path that looks like a wave and then horizontally translating it in a continuous loop.

For large elements like backgrounds, CSS transforms are the recommended approach for maximum performance. In this example, we use two overlapping SVG paths with different opacities and different animation speeds to create a sense of depth and movement:

<!doctype html>
<title>Example</title>
<style>
  .wave-bg {
    background: linear-gradient(to bottom, #001f3f, #003366);
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
  }
  .wave-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%; /* Double width for seamless loop */
    height: 100%;
  }
  .wave-path {
    animation: moveWave 10s linear infinite;
  }
  .wave-path-slow {
    animation: moveWave 15s linear infinite;
  }
  @keyframes moveWave {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
</style>

View Output

To create a seamless loop with CSS:

Create a wave path that is twice as wide as the viewbox (so it repeat).
Set the width of the SVG to 200%.
Use a CSS keyframe animation to translate the path from translateX(0) to translateX(-50%).

Animated Particles and Patterns

You can also use SVG to create subtle "particle" effects, such as drifting bubbles, rising steam, or floating dust. This is achieved by animating individual shapes (like circles or small paths) with varying speeds and delays to create a randomized, organic feel.

Example: Drifting Particles

In this example, we use several circles with staggered CSS animation delays and varying durations to simulate a gentle rising effect.

<!doctype html>
<title>Example</title>
<style>
  .particle-bg {
    background: #1a1a1a;
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
  }
  .particle {
    fill: rgba(255, 255, 255, 0.3);
    animation: drift 15s linear infinite;
  }
  .p1 { animation-duration: 12s; animation-delay: 0s; }
  .p2 { animation-duration: 18s; animation-delay: -5s; }
  .p3 { animation-duration: 14s; animation-delay: -2s; }
  .p4 { animation-duration: 20s; animation-delay: -10s; }
  .p5 { animation-duration: 16s; animation-delay: -7s; }

@keyframes drift {
    from { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 0.5; }
    80% { opacity: 0.5; }
    to { transform: translateY(-100px) translateX(20px); opacity: 0; }
  }
</style>

View Output

Performance Considerations

When animating large areas of the screen:

Use CSS Transforms: Browsers are highly optimized for animating the transform property.
Keep Opacity High: Extremely low opacity or complex filters on large backgrounds can sometimes impact performance on low-end devices.
Respect User Preferences: Always consider wrapping your animations in a @media (prefers-reduced-motion: no-preference) query for accessibility.