Beta

Overlapping Blobs SVG background, flat

Free
Overlapping Blobs SVG background, flat

Two broad blobs meet along the lower edge, with a third colour marking their overlap. It works on event flyers and social media announcement cards.

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

blobsoverlapbackgroundabstractflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Wb84k-6mt8OB/amnt.svg" alt="Overlapping Blobs" 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="#F5F2EA"/><defs><clipPath id="left-blob"><path d="M-100 900V690C95 555 325 530 525 590C750 655 925 785 1080 900Z"/></clipPath></defs><path d="M-100 900V690C95 555 325 530 525 590C750 655 925 785 1080 900Z" fill="#B8C9BE"/><path d="M440 900C610 690 825 575 1070 555C1320 535 1525 620 1700 745V900Z" fill="#D8C5AD"/><path d="M440 900C610 690 825 575 1070 555C1320 535 1525 620 1700 745V900Z" fill="#879F96" clip-path="url(#left-blob)"/></svg>
CSS background-image
.overlapping-blobs {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Wb84k-6mt8OB/amnt.svg");
  background-size: contain;
}
React
import OverlappingBlobsSvg from "./overlapping-blobs.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Overlapping Blobs: Two broad blobs overlap along the lower edge, with their shared area shown in a third flat colour. as part of the pack Blob Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

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