Polka Dots SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/e54LGKAF1eM6/amnt.svg" alt="Polka Dots" 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="M205 592c-91 10-75 153 18 141s77-151-18-141z" fill="#012266" stroke="#012266"/><path d="M800 592c-89 11-78 151 20 141 89-10 78-152-20-141z" fill="#012266" stroke="#012266"/><path d="M602 592c-90 10-75 153 18 141 92-12 77-151-18-141z" fill="#012266" stroke="#012266"/><path d="M403 592c-91 11-73 154 19 141s74-152-19-141z" fill="#012266" stroke="#012266"/><path d="M702 772c-91 9-80 149 16 141 90-8 79-150-16-141z" fill="#012266" stroke="#012266"/><path d="M110 772c-91 9-80 149 14 141 93-8 80-150-14-141z" fill="#012266" stroke="#012266"/><path d="M505 772c-91 9-79 149 14 141s80-150-14-141z" fill="#012266" stroke="#012266"/><path d="M900 772c-91 9-82 147 13 141 92-6 81-150-13-141z" fill="#012266" stroke="#012266"/><path d="M308 772c-91 9-80 149 14 141 92-8 80-150-14-141z" fill="#012266" stroke="#012266"/><path d="M209 233c-93 7-82 149 11 141s82-148-11-141z" fill="#012266" stroke="#012266"/><path d="M707 411c-93 4-88 145 7 141 92-4 86-145-7-141z" fill="#012266" stroke="#012266"/><path d="M115 411c-92 3-89 143 5 141 93-2 88-144-5-141z" fill="#012266" stroke="#012266"/><path d="M508 411c-91 4-86 146 9 141 92-5 85-145-9-141z" fill="#012266" stroke="#012266"/><path d="M803 233c-92 9-79 150 14 141 93-10 79-149-14-141z" fill="#012266" stroke="#012266"/><path d="M314 411c-93 1-91 143 3 141 93-2 89-142-3-141z" fill="#012266" stroke="#012266"/><path d="M902 411c-92 6-85 147 11 141 90-5 82-146-11-141z" fill="#012266" stroke="#012266"/><path d="M606 233c-92 7-82 149 11 141s81-148-11-141z" fill="#012266" stroke="#012266"/><path d="M405 233c-91 10-78 150 16 140 92-9 77-149-16-140z" fill="#012266" stroke="#012266"/><path d="M706 56c-92 4-86 146 8 140 92-6 85-144-8-140z" fill="#012266" stroke="#012266"/><path d="M311 56c-92 5-85 145 8 140 92-5 85-145-8-140z" fill="#012266" stroke="#012266"/><path d="M510 56c-92 2-89 144 5 140 92-4 88-142-5-140z" fill="#012266" stroke="#012266"/><path d="M115 56c-92 3-88 144 5 140 93-3 88-143-5-140z" fill="#012266" stroke="#012266"/><path d="M902 56c-91 5-85 146 9 140 92-6 84-144-9-140z" fill="#012266" stroke="#012266"/></g></svg>

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

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

import PolkaDotsSvg from "./polka-dots.jsx"; // from the React tab above

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