Overlapping Blobs SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="teal" data-name="Teal"><path d="M330 74c-115 5-216 98-217 216-1 57 22 112 66 150 31 28 73 42 115 44 18 1 37-1 56 1 54 5 113 35 120 95 7 61-39 113-34 179 10 126 134 192 251 177 109-14 203-100 221-210 21-123-61-235-188-236-61-1-128 22-177-27-50-50-26-110-13-168 29-131-72-226-200-221z" fill="#028386" stroke="#028386"/></g><g id="midnight" data-name="Midnight"><path d="M318 59c-119 10-216 108-221 228-4 93 58 183 150 206 28 7 56 5 85 6 58 2 125 30 123 99-1 23-10 44-18 66-14 38-22 79-14 119 24 124 156 186 273 167 112-18 209-106 228-220 20-126-55-241-186-255-62-7-135 27-186-25-49-50-9-122-2-179 17-135-107-222-232-212zm12 15c128-5 229 90 200 221-13 58-37 118 13 168 49 49 116 26 177 27 127 1 209 113 188 236-18 110-112 196-221 210-117 15-241-51-251-177-5-66 41-118 34-179-7-60-66-90-120-95-19-2-38 0-56-1-42-2-84-16-115-44-44-38-67-93-66-150 1-118 102-211 217-216z" fill="#012636" stroke="#012636"/></g></svg>

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

.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/RRvN2UwpH04g/amnt.svg") center / contain no-repeat;
}

import OverlappingBlobsSvg from "./overlapping-blobs.jsx"; // from the React tab above

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