Dotted Rectangle SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ZcrfSGpxCXLb/amnt.svg" alt="Dotted Rectangle" 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="M966 433c-20 3-14 35 6 31 20-3 14-34-6-31z" fill="#062461" stroke="#062461"/><path d="M54 392c-20 2-17 34 3 32 21-2 17-34-3-32z" fill="#062461" stroke="#062461"/><path d="M52 515c-20 4-13 35 7 31s13-34-7-31z" fill="#062461" stroke="#062461"/><path d="M53 433c-20 3-15 34 5 31 20-2 15-34-5-31z" fill="#062461" stroke="#062461"/><path d="M639 313c-20 2-17 33 3 32 21-2 17-34-3-32z" fill="#062461" stroke="#062461"/><path d="M53 474c-20 3-15 34 5 31s15-33-5-31z" fill="#062461" stroke="#062461"/><path d="M555 313c-20 2-17 33 3 31s17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M806 313c-20 3-15 34 5 31s15-34-5-31z" fill="#062461" stroke="#062461"/><path d="M219 313c-20 2-16 33 4 31 21-2 15-33-4-31z" fill="#062461" stroke="#062461"/><path d="M470 313c-20 3-16 34 4 31 21-2 16-33-4-31z" fill="#062461" stroke="#062461"/><path d="M969 392c-21 1-20 32 0 32 21 0 20-32 0-32z" fill="#062461" stroke="#062461"/><path d="M966 474c-20 3-14 35 6 31 19-3 14-34-6-31z" fill="#062461" stroke="#062461"/><path d="M52 556c-20 4-13 34 7 31 20-4 13-34-7-31z" fill="#062461" stroke="#062461"/><path d="M807 635c-20 2-17 34 3 32s17-34-3-32z" fill="#062461" stroke="#062461"/><path d="M967 352c-20 3-16 33 3 32 21-2 17-34-3-32z" fill="#062461" stroke="#062461"/><path d="M555 635c-20 2-17 33 3 31 21-2 17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M681 313c-20 2-17 33 3 31 20-1 17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M53 596c-20 3-15 34 5 31s15-33-5-31z" fill="#062461" stroke="#062461"/><path d="M765 313c-20 2-17 34 3 31 20-2 17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M850 313c-21 1-19 33 1 32s19-33-1-32z" fill="#062461" stroke="#062461"/><path d="M966 596c-20 3-14 34 6 31 20-4 14-34-6-31z" fill="#062461" stroke="#062461"/><path d="M640 635c-20 1-19 32 1 32 20-1 19-33-1-32z" fill="#062461" stroke="#062461"/><path d="M682 635c-20 1-19 32 1 31 21-1 19-32-1-31z" fill="#062461" stroke="#062461"/><path d="M135 313c-20 3-15 34 5 31s15-33-5-31z" fill="#062461" stroke="#062461"/><path d="M723 313c-20 2-17 33 3 32 20-2 17-34-3-32z" fill="#062461" stroke="#062461"/><path d="M967 313c-20 2-16 33 4 31s16-33-4-31z" fill="#062461" stroke="#062461"/><path d="M965 515c-19 4-12 35 8 31s12-35-8-31z" fill="#062461" stroke="#062461"/><path d="M53 313c-20 3-15 34 5 31s14-33-5-31z" fill="#062461" stroke="#062461"/><path d="M94 313c-20 2-17 32 3 31 21-1 17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M345 313c-20 2-17 33 3 31s17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M513 313c-20 2-17 33 3 31 20-1 17-32-3-31z" fill="#062461" stroke="#062461"/><path d="M597 313c-20 2-17 33 3 31 20-1 17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M220 635c-21 2-18 33 2 31 21-2 18-32-2-31z" fill="#062461" stroke="#062461"/><path d="M304 635c-20 1-19 33 1 32s19-33-1-32z" fill="#062461" stroke="#062461"/><path d="M471 635c-20 2-18 33 3 31 20-2 16-32-3-31z" fill="#062461" stroke="#062461"/><path d="M303 313c-20 2-17 33 3 31s17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M429 313c-20 2-17 33 3 31s16-32-3-31z" fill="#062461" stroke="#062461"/><path d="M54 352c-20 2-17 33 3 31s17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M54 635c-20 2-17 33 3 31 21-2 17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M596 635c-20 3-15 34 5 31s15-34-5-31z" fill="#062461" stroke="#062461"/><path d="M345 635c-20 2-17 33 3 31s16-32-3-31z" fill="#062461" stroke="#062461"/><path d="M428 635c-20 3-15 34 5 31s14-33-5-31z" fill="#062461" stroke="#062461"/><path d="M765 635c-20 2-17 33 3 31s17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M386 313c-20 3-15 34 5 31s14-33-5-31z" fill="#062461" stroke="#062461"/><path d="M261 635c-20 2-17 33 3 31s17-33-3-31z" fill="#062461" stroke="#062461"/><path d="M137 635c-21 1-19 32 1 31s19-31-1-31z" fill="#062461" stroke="#062461"/><path d="M261 313c-20 2-17 33 3 31s16-33-3-31z
…

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

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

import DottedRectangleSvg from "./dotted-rectangle.jsx"; // from the React tab above

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