Waves SVG background, flat

Free

Preview on the whole page

Broad, gently curved bands move along the bottom of a solid blue field. Use this background on a coastal event page or behind an aquarium exhibit title.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

waves ocean water coastal animated background flat

How to use it

HTML <img>

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

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Calm blue background with gently layered waves along the lower edge"><rect width="1600" height="900" fill="#286A91"/><path d="M0 660 C260 625 440 645 680 690 S1150 745 1600 670 L1600 900 L0 900 Z" fill="#3B82A3"/><path d="M0 730 C270 695 475 720 720 765 S1200 790 1600 725 L1600 900 L0 900 Z" fill="#65A7B8"/><path d="M0 810 C250 770 495 785 760 825 S1270 855 1600 790 L1600 900 L0 900 Z" fill="#8BC1C8"/><path d="M0 865 C300 835 520 850 790 875 S1290 895 1600 850 L1600 900 L0 900 Z" fill="#B1D8D5"/></svg>

CSS background-image

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

React

import WavesSvg from "./waves.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Waves: Layer broad, gently curved bands along the lower edge over a solid blue field. as part of the pack Animated Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

Rest of Animated 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