Beta

Wavy Blob SVG element, flat

Free

Broad waves run around the edge of this filled shape. Place it behind a quote in a newsletter or use it to mark a section in a workbook.

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

wavyblobrippleshapeblobselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/OvyIN4c5XHVI/amnt.svg" alt="Wavy Blob" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor"><path d="M100 14
    C116 14 121 25 135 28
    C149 31 161 26 171 39
    C181 52 175 64 180 77
    C185 90 193 97 186 112
    C179 127 169 129 166 143
    C163 157 161 171 146 177
    C131 183 122 174 109 181
    C96 188 87 191 73 183
    C59 175 59 164 45 160
    C31 156 20 151 18 135
    C16 119 26 112 21 98
    C16 84 12 75 21 62
    C30 49 42 51 50 39
    C58 27 65 19 80 21
    C89 22 92 14 100 14Z"/></svg>
CSS background-image
.wavy-blob {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/OvyIN4c5XHVI/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.wavy-blob {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/OvyIN4c5XHVI/amnt.svg") center / contain no-repeat;
}
React
import WavyBlobSvg from "./wavy-blob.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Wavy Blob: Draw a filled shape with broad waves running around its entire edge. as part of the pack Blob Elements, Flat. Want one like it? Make your own in the SVG studio.

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