Dotted Circle SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="grape" data-name="Grape"><path d="M619 934c-19 3-12 32 6 28 18-3 13-31-6-28z" fill="#011c5b" stroke="#011c5b"/><path d="M94 312c-19 1-18 31 1 30 18-2 17-30-1-30z" fill="#011c5b" stroke="#011c5b"/><path d="M937 654c-18 3-13 31 5 29 18-3 14-32-5-29z" fill="#011c5b" stroke="#011c5b"/><path d="M812 833c-18 4-12 33 7 28 18-4 11-31-7-28z" fill="#011c5b" stroke="#011c5b"/><path d="M54 439c-18 5-9 33 9 28 17-4 9-33-9-28z" fill="#011c5b" stroke="#011c5b"/><path d="M962 569c-18 2-17 30 1 29 19-1 17-30-1-29z" fill="#011c5b" stroke="#011c5b"/><path d="M99 695c-18 4-11 32 7 29 18-4 11-32-7-29z" fill="#011c5b" stroke="#011c5b"/><path d="M148 769c-19 2-15 30 3 29 19-1 15-30-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M512 38c-19 0-18 29 1 28s17-29-1-28z" fill="#011c5b" stroke="#011c5b"/><path d="M909 272c-19 2-15 30 3 29 19-1 15-30-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M111 273c-18 3-14 32 5 29 18-4 13-31-5-29z" fill="#011c5b" stroke="#011c5b"/><path d="M489 946c-19 2-16 31 3 29s14-30-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M553 40c-18 4-11 31 7 28 19-4 11-31-7-28z" fill="#011c5b" stroke="#011c5b"/><path d="M962 438c-18 4-11 33 8 28 18-4 10-32-8-28z" fill="#011c5b" stroke="#011c5b"/><path d="M70 613c-19 2-15 31 3 29 19-2 15-30-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M876 768c-19 1-19 30-1 30 18-1 20-30 1-30z" fill="#011c5b" stroke="#011c5b"/><path d="M299 91c-19 2-15 31 3 29 19-2 16-31-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M77 353c-18 2-16 31 3 29 18-2 15-31-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M54 482c-18 2-16 31 2 30 18-2 16-31-2-30z" fill="#011c5b" stroke="#011c5b"/><path d="M965 482c-18 4-10 33 8 28 18-4 11-32-8-28z" fill="#011c5b" stroke="#011c5b"/><path d="M262 113c-18 2-18 30 1 29s17-30-1-29z" fill="#011c5b" stroke="#011c5b"/><path d="M190 169c-18 4-11 32 7 28s12-32-7-28z" fill="#011c5b" stroke="#011c5b"/><path d="M534 946c-19 1-17 30 1 29 19-1 17-30-1-29z" fill="#011c5b" stroke="#011c5b"/><path d="M338 72c-18 3-14 31 4 29 19-3 14-31-4-29z" fill="#011c5b" stroke="#011c5b"/><path d="M860 200c-19 1-17 30 1 29 20-1 17-29-1-29z" fill="#011c5b" stroke="#011c5b"/><path d="M885 235c-18 3-13 31 5 29 19-3 13-32-5-29z" fill="#011c5b" stroke="#011c5b"/><path d="M52 527c-18 4-10 31 7 28 18-3 12-32-7-28z" fill="#011c5b" stroke="#011c5b"/><path d="M952 612c-18 2-16 32 3 29 18-2 15-31-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M920 694c-18 3-14 31 4 29s14-31-4-29z" fill="#011c5b" stroke="#011c5b"/><path d="M321 906c-18-2-20 27-1 28 18 1 20-27 1-28z" fill="#011c5b" stroke="#011c5b"/><path d="M682 72c-19 3-13 31 5 29 19-3 12-31-5-29z" fill="#011c5b" stroke="#011c5b"/><path d="M722 91c-19 2-14 30 3 29 19-1 16-30-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M223 140c-18 4-11 31 7 28 18-4 12-32-7-28z" fill="#011c5b" stroke="#011c5b"/><path d="M63 396c-18 4-12 32 6 28 18-3 13-31-6-28z" fill="#011c5b" stroke="#011c5b"/><path d="M81 655c-18 4-10 32 7 28 18-3 12-32-7-28z" fill="#011c5b" stroke="#011c5b"/><path d="M210 834c-19 0-18 29 1 29 18-1 17-30-1-29z" fill="#011c5b" stroke="#011c5b"/><path d="M280 885c-19 2-15 31 3 29 19-2 15-30-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M704 905c-19 2-17 30 1 29 19-1 17-30-1-29z" fill="#011c5b" stroke="#011c5b"/><path d="M642 57c-19 2-17 29 1 29 19 0 17-30-1-29z" fill="#011c5b" stroke="#011c5b"/><path d="M926 312c-18 4-10 32 8 28s10-32-8-28z" fill="#011c5b" stroke="#011c5b"/><path d="M382 57c-19 1-19 29 0 29 18 0 18-29 0-29z" fill="#011c5b" stroke="#011c5b"/><path d="M793 140c-18 5-9 32 9 27 18-4 9-31-9-27z" fill="#011c5b" stroke="#011c5b"/><path d="M60 570c-19 2-15 31 3 29 19-2 15-30-3-29z" fill="#011c5b" stroke="#011c5b"/><path d="M778 861c-18 3-13 31 5 28 19-3 14-31-5-28z" fill="#011c5b" stroke="#011c5b"/><path d="M465 40c-18 3-13 30 5 28 19-2 14-31-5-28z" fill="#011c5b" stroke="#011c5b"/><path d="M830 168c-19 1-17 30 1 29 19-1 17-29-1-29z" fill="#
…

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

.dotted-circle {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/YkRNquWfReDW/amnt.svg") center / contain no-repeat;
}

import DottedCircleSvg from "./dotted-circle.jsx"; // from the React tab above

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