Beta

Blob Ring SVG element, flat

Free

A thick wavy ring surrounds a round, empty centre. Place a number inside it on an infographic or use it to frame an icon on an app screen.

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

blobringcircleloopblobselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/iQCYZeKixMcZ/amnt.svg" alt="Blob Ring" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor"><path fill-rule="evenodd" d="M100 12C118 9 128 17 141 21C155 25 170 31 177 45C184 58 181 69 187 82C193 95 190 110 184 123C179 136 181 150 170 161C160 171 147 172 135 179C122 187 111 190 97 187C82 190 69 185 57 178C44 173 31 166 25 153C18 141 19 128 14 115C9 101 11 87 16 74C22 61 22 48 33 37C44 27 56 26 70 20C81 15 88 14 100 12ZM100 45C70 45 45 70 45 100C45 130 70 155 100 155C130 155 155 130 155 100C155 70 130 45 100 45Z"/></svg>
CSS background-image
.blob-ring {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/iQCYZeKixMcZ/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.blob-ring {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/iQCYZeKixMcZ/amnt.svg") center / contain no-repeat;
}
React
import BlobRingSvg from "./blob-ring.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Blob Ring: Draw a thick, evenly weighted wavy ring around a round empty centre. 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