Overlapping Bubbles SVG element, flat

Overlapping Bubbles SVG element, flat

One large speech bubble partly covers another, suggesting related messages or voices. Place the pair on a chat feature page or an illustration about conversation.

Similar SVGs

More from Speech Bubbles, Flat · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/pvxvOu5biJnQ/amnt.svg" alt="Overlapping Bubbles" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="blue" data-name="Blue"><path d="M427 108c-137 7-284 76-342 207-22 52-28 111-13 166 12 45 39 82 72 114 24 24 34 19 18 57-8 21-18 42-29 62-6 9-27 40-25 49 5 20 82-23 94-29 11-6 82-53 83-53 7-2 13 1 20 3 143 39 322 10 426-104 30-33 54-72 65-116 15-58 9-119-17-174-62-131-214-188-352-182z" fill="#0085fc" stroke="#0085fc"/></g><g id="navy" data-name="Navy"><path d="M881 717c19-11 37-27 52-43 94-103 56-256-61-323-7-4-50-21-51-23-3-3-16-43-20-51-16-32-37-60-61-85-52-52-122-84-193-99-150-32-332 11-434 131-84 100-103 243-22 351 15 19 32 39 53 53-4 37-56 98-60 127-2 9 0 18 5 26 24 31 84-5 111-18 23-11 45-25 67-40 5-3 20-16 25-17 8-1 21 6 30 8 30 7 61 10 92 11 14 1 51-4 61-2 4 1 9 6 12 9 39 28 86 46 134 53 29 4 58 5 88 2 9-1 47-8 52-8 6 2 13 11 18 14 25 20 94 71 126 54 12-6 17-20 15-33-3-17-15-34-22-49-7-16-13-32-17-48zM427 108c138-6 290 51 352 182 26 55 32 116 17 174-11 44-35 83-65 116-104 114-283 143-426 104-7-2-13-5-20-3-1 0-72 47-83 53-12 6-89 49-94 29-2-9 19-40 25-49 11-20 21-41 29-62 16-38 6-33-18-57-33-32-60-69-72-114-15-55-9-114 13-166 58-131 205-200 342-207zM826 356c13 2 26 11 38 18 57 34 98 95 98 164 0 42-16 82-43 115-7 7-13 14-21 21-7 7-40 26-42 34-3 10 4 25 7 34 4 12 34 73 34 77 0 2 0 5-3 7-7 5-22-4-28-7-21-9-40-21-59-35-9-6-28-25-37-28-10-4-54 7-68 8-25 2-50 1-75-2-40-6-83-19-116-43 175-27 347-169 315-363z" fill="#021542" stroke="#021542"/></g><g id="amber" data-name="Amber"><path d="M826 356c32 194-140 336-315 363 33 24 76 37 116 43 25 3 50 4 75 2 14-1 58-12 68-8 9 3 28 22 37 28 19 14 38 26 59 35 6 3 21 12 28 7 3-2 3-5 3-7 0-4-30-65-34-77-3-9-10-24-7-34 2-8 35-27 42-34 8-7 14-14 21-21 27-33 43-73 43-115 0-69-41-130-98-164-12-7-25-16-38-18z" fill="#fdd20b" stroke="#fdd20b"/></g></svg>
CSS background-image
.overlapping-bubbles {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/pvxvOu5biJnQ/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.overlapping-bubbles {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/pvxvOu5biJnQ/amnt.svg") center / contain no-repeat;
}
React
import OverlappingBubblesSvg from "./overlapping-bubbles.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Overlapping Bubbles: Large front speech bubble partly covering a second bubble behind it. A flat element. as part of the pack Speech Bubbles, Flat · Set 2. 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