Wave Bands SVG background, flat

Free

Preview on the whole page

Wide bands with gently wavy edges cross a navy canvas. The pattern can frame a music festival programme or fill a presentation title slide.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

waves bands stripes water background flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/IS-idZ2xtcUo/amnt.svg" alt="Wave Bands" width="48" height="48">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"><rect width="1600" height="900" fill="#102A43"/><path d="M0 145 C270 105 520 105 800 145 S1330 185 1600 145 L1600 285 C1330 325 1080 325 800 285 S270 245 0 285 Z" fill="#1C4160"/><path d="M0 370 C270 330 520 330 800 370 S1330 410 1600 370 L1600 510 C1330 550 1080 550 800 510 S270 470 0 510 Z" fill="#265273"/><path d="M0 595 C270 555 520 555 800 595 S1330 635 1600 595 L1600 735 C1330 775 1080 775 800 735 S270 695 0 735 Z" fill="#326584"/><path d="M0 820 C270 780 520 780 800 820 S1330 860 1600 820 L1600 900 L0 900 Z" fill="#407692"/></svg>

CSS background-image

.wave-bands {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/IS-idZ2xtcUo/amnt.svg");
  background-size: contain;
}

React

import WaveBandsSvg from "./wave-bands.jsx"; // from the React tab above

<WaveBandsSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Wave Bands: Navy canvas crossed by wide, parallel bands with softly wavy edges. as part of the pack Wave Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

Rest of Wave Backgrounds, Flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence