Menu

Beta
Sign in
Overlapping Blobs SVG element, flat

Overlapping Blobs SVG element, flat

Two organic forms meet in one silhouette with an indented waist. Use the paired shape behind a comparison chart or as a header accent on a webpage.

Free · from Blob Elements, Flat

Similar SVGs

More from Blob Elements, Flat

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/sQhYN3sLg1P9/amnt.svg" alt="Overlapping Blobs" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor"><path d="M55 22C76 14 99 20 111 37C117 45 120 55 119 65C128 58 140 55 151 58C173 63 187 83 187 107C188 132 174 153 153 161C142 165 131 164 121 160C116 172 107 181 94 185C70 193 43 183 28 163C14 143 13 115 26 96C32 87 40 81 49 77C39 69 34 58 36 46C38 35 45 26 55 22Z"/></svg>
CSS background-image
.overlapping-blobs {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/sQhYN3sLg1P9/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.overlapping-blobs {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/sQhYN3sLg1P9/amnt.svg") center / contain no-repeat;
}
React
import OverlappingBlobsSvg from "./overlapping-blobs.jsx"; // from the React tab above

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

Tags

blobsoverlappairshapeselementflat

Made with AMNT

AMNT SVG 1.1 drew this from the words Overlapping Blobs: Draw two partially overlapping organic shapes as one silhouette, with an indented waist. as part of the pack Blob Elements, Flat. Want one like it? Make your own in the SVG studio.

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

Settings