Beta

Ocean SVG background, flat

Free
Ocean SVG background, flat

Broad aqua and navy wave shapes stay near the edges of a deep-blue field. It can back a marine research slide or a coastal travel guide cover.

Sign in to download. Free SVGs are free with any account.

oceanseawaternavymesh gradientbackgroundflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/aR_Nvn7vohaT/amnt.svg" alt="Ocean" 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="#15558D"/><path d="M0 0H1600V176C1380 210 1230 150 1040 177C815 209 720 300 480 265C285 237 145 185 0 224Z" fill="#102F63"/><path d="M0 0H1600V91C1390 128 1220 75 1030 105C810 139 690 217 470 181C275 150 125 103 0 145Z" fill="#0B254F"/><path d="M0 696C205 651 313 738 504 715C705 691 793 621 994 649C1200 678 1370 748 1600 685V900H0Z" fill="#299CB5"/><path d="M0 790C196 746 328 824 510 798C720 768 819 713 1009 747C1228 787 1409 832 1600 779V900H0Z" fill="#57C5CA"/><path d="M0 866C198 827 327 887 528 859C726 832 840 809 1022 839C1229 873 1436 881 1600 842V900H0Z" fill="#91DCD5"/></svg>
CSS background-image
.ocean {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/aR_Nvn7vohaT/amnt.svg");
  background-size: contain;
}
React
import OceanSvg from "./ocean.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Ocean: Full deep-blue field with broad aqua and navy wave shapes kept near the edges. as part of the pack Mesh Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

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