Cloud Edge SVG element, flat

Cloud Edge SVG element, flat

Small and large rounded puffs cluster unevenly above the filled bottom. This edge can divide a children’s activity page or sit beneath a weather newsletter heading.

Similar SVGs

More from Shape dividers, flat · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/FDRScVz3vMpz/amnt.svg" alt="Cloud Edge" 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="baby-blue" data-name="Baby Blue"><path d="M18 541c-6-5-9-11-18-8v95l1024 1v-92h-7c-10 11-40-2-45 42-7 0-13 2-18 8-11-10-22-6-35 0-10-45-41-27-45-32-21-5-41 12-42 33-12-6-22-5-34-1-5-14-19-31-36-24 1-16-10-33-28-28-27 7-4 33-12 36-7-19-27-29-46-20-5 3-9 10-15 11v1c3 3-13 2-19 24-11-7-23-5-34 1-7-19-31-29-48-15-4-14 5-31-18-36-18-4-25 10-26 26l-5-2c-16-2-24 12-31 24h1c-11-4-19-6-30-3-1-6-2-13-5-18-13-22-40-20-55-3-6-9-14-16-25-15-9-2-18 0-22 9-26-12-40 0-47 25-10-3-22-5-31 4-5-7-9-12-16-15-8-3-14 4-22 3-13-2-11-21-32-9-18 1-27 8-32 25-10-6-19-6-30 0-1-19-18-35-37-34-3 4-8 6-11 11-12 16-1 11-26 12-1-13-11-30-25-34-6-1-12 0-17-2z" fill="#b3dcfb" stroke="#b3dcfb"/></g><g id="white" data-name="White"><path d="M867 472c2-39-44-62-68-28-6 8-7 16-8 25-26-16-45 7-49 30-17-1-30 12-29 29-11-3-22 3-26 14 11-1 18 3 27 8 9-33 48-24 53 6 16 2 28 9 34 25 9-4 18-3 28-1 3-19 21-32 40-31 0-20 14-40 35-43-4-19-13-39-37-34z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M399 444c-7-66-104-61-102 6-20-1-34 13-34 33 18 0 33 13 34 31 18 2 28 14 30 31l16 4c4-5 10-8 16-8-1-30 23-51 52-38-1-22 15-38 36-38-5-19-30-39-48-21z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M366 546c11-1 19 6 25 15 15-17 42-19 55 3 3 5 4 12 5 18 11-3 19-1 30 3h-1c7-12 15-26 31-24-3-40 57-39 54 3l11-3c-4-17 2-38 22-42-5-6-13-10-21-7 0-45-61-37-53 2-10 4-12 12-17 15-2-16-13-27-30-23 1-41-50-49-60-15-2 8 1 14 1 22-7-4-13-9-22-10-23-1-36 23-30 43z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M170 485c3-46-62-50-65-2-20-7-41 0-42 23 18 6 33 22 32 43 19-1 40 11 42 32 9-4 16-2 25 0 2-14 15-21 27-23 2-18 11-30 29-35-6-3-11-3-17-3 5-21-11-35-31-35z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M874 555c4 5 35-13 45 32 13-6 24-10 35 0 5-6 11-8 18-8 5-44 35-31 45-42 12-53-51-49-48-10-13-4-19 2-24 13-5-8-7-16-15-22-18-14-45-5-53 16-3 7-3 14-3 21z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M661 563v-1c6-13 16-14 20-20 6-9 0-22-7-28-21-20-43 1-42 25l-2 2c-10-19-36-26-47-4-14 29 19 23 27 44 10-2 17-5 28-2 6-11 9-17 23-16z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M292 520c2-29-35-45-53-20-23 32 31 32 17 65 4 3 8 6 11 11 10-3 17-4 26-3 5-16 15-21 28-28-1-18-12-25-29-25z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M18 541c5 2 11 1 17 2 14 4 24 21 25 34 25-1 14 4 26-12 3-5 8-7 11-11l-6 2c-1-52-63-64-73-15z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M196 563c21-12 19 7 32 9 8 1 14-6 22-3 14-57-68-47-54-6z" fill="#fcfcfc" stroke="#fcfcfc"/></g><g id="cobalt" data-name="Cobalt"><path d="M399 444c18-18 43 2 48 21-21 0-37 16-36 38-29-13-53 8-52 38-6 0-12 3-16 8l-16-4c-2-17-12-29-30-31-1-18-16-31-34-31 0-20 14-34 34-33-2-67 95-72 102-6zm468 28c24-5 33 15 37 34-21 3-35 23-35 43-19-1-37 12-40 31-10-2-19-3-28 1-6-16-18-23-34-25-5-30-44-39-53-6-9-5-16-9-27-8 4-11 15-17 26-14-1-17 12-30 29-29 4-23 23-46 49-30 1-9 2-17 8-25 24-34 70-11 68 28zM170 485c20 0 36 14 31 35 6 0 11 0 17 3-18 5-27 17-29 35-12 2-25 9-27 23-9-2-16-4-25 0-2-21-23-33-42-32 1-21-14-37-32-43 1-23 22-30 42-23 3-48 68-44 65 2zm122 35c17 0 28 7 29 25-13 7-23 12-28 28-9-1-16 0-26 3-3-5-7-8-11-11 14-33-40-33-17-65 18-25 55-9 53 20zM0 533c9-3 12 3 18 8 10-49 72-37 73 15l6-2c19-1 36 15 37 34 11-6 20-6 30 0 5-17 14-24 32-25-14-41 68-51 54 6 7 3 11 8 16 15 9-9 21-7 31-4 7-25 21-37 47-25 4-9 13-11 22-9-6-20 7-44 30-43 9 1 15 6 22 10 0-8-3-14-1-22 10-34 61-26 60 15 17-4 28 7 30 23 5-3 7-11 17-15-8-39 53-47 53-2 8-3 16 1 21 7-20 4-26 25-22 42l-11 3c3-42-57-43-54-3l5 2c1-16 8-30 26-26 23 5 14 22 18 36 17-14 41-4 48 15 11-6 23-8 34-1 6-22 22-21 19-24-14-1-17 5-23 16-11-3-18 0-28 2-8-21-41-15-27-44 11-22 37-15 47 4l2-2c-1-24 21-45 42-25 7 6 13 19 7 28-4 6-14 7-20 20 6-1 10-8 15-11 19-9 39 1 46 20 8-3-15-29 12-36 18-5 29 12 28 28 17-7 31 10 36 24 12-4 22-5 34 1 1-21 21-38 42-33 0-7 0-14 3-21 8-21 35-30 53-16 8 6 10 14 15 22 5-11 11-17 24-13-3-39 60-43 48 10h7c0-7 1-15 0-22-4-21-31-28-47-17-8 5-10 14-15 22-6 1-12 3-17 7-9-13-21-21-37-21 0-21-13-40-35-40-6-39-48-58-74-30
…
CSS background-image
.cloud-edge {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/FDRScVz3vMpz/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.cloud-edge {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/FDRScVz3vMpz/amnt.svg") center / contain no-repeat;
}
React
import CloudEdgeSvg from "./cloud-edge.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Cloud Edge: Irregular clusters of small and large rounded puffs rise above the filled bottom. A flat element. Replace the standalone outlined cloud with a full-width, flat-filled bottom edge topped by irregular clusters of small and large rounded puffs. as part of the pack Shape dividers, 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