Menu

Beta
Sign in
Beta
Dot Grid SVG element, flat

Dot Grid SVG element, flat

Six rows and columns of small round dots form a regular grid. It works as a background for a presentation slide or a guide on a printable worksheet.

Free · from Dots and grids, flat · Set 2

Similar SVGs

More from Dots and grids, flat · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/z_st3uwnZduC/amnt.svg" alt="Dot Grid" width="48" height="48">
Inline SVG
<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="M701 382c-59 3-55 93 5 90 59-3 54-93-5-90z" fill="#011c59" stroke="#011c59"/><path d="M188 126c-58 7-47 97 13 89 57-7 47-96-13-89z" fill="#011c59" stroke="#011c59"/><path d="M697 126c-58 8-47 96 13 89 57-7 47-96-13-89z" fill="#011c59" stroke="#011c59"/><path d="M316 126c-58 7-49 95 11 89 58-6 49-95-11-89z" fill="#011c59" stroke="#011c59"/><path d="M314 511c-57 8-45 97 15 89 57-8 45-97-15-89z" fill="#011c59" stroke="#011c59"/><path d="M825 639c-58 7-49 95 11 89 58-6 49-95-11-89z" fill="#011c59" stroke="#011c59"/><path d="M443 126c-58 7-48 96 12 89 58-7 47-96-12-89z" fill="#011c59" stroke="#011c59"/><path d="M315 639c-58 7-47 96 13 89 57-7 48-96-13-89z" fill="#011c59" stroke="#011c59"/><path d="M442 639c-58 8-46 97 14 89 57-8 46-97-14-89z" fill="#011c59" stroke="#011c59"/><path d="M188 639c-58 7-47 96 12 89 58-7 48-96-12-89z" fill="#011c59" stroke="#011c59"/><path d="M697 767c-58 8-47 97 13 89 57-7 47-96-13-89z" fill="#011c59" stroke="#011c59"/><path d="M696 511c-58 8-45 97 15 89 57-8 45-97-15-89z" fill="#011c59" stroke="#011c59"/><path d="M697 639c-58 7-47 96 13 89 57-7 47-96-13-89z" fill="#011c59" stroke="#011c59"/><path d="M824 126c-57 8-47 96 13 89 58-7 47-97-13-89z" fill="#011c59" stroke="#011c59"/><path d="M191 254c-59 4-53 94 8 89 57-5 51-93-8-89z" fill="#011c59" stroke="#011c59"/><path d="M698 254c-58 6-49 95 11 89 58-6 49-95-11-89z" fill="#011c59" stroke="#011c59"/><path d="M188 511c-58 7-47 97 13 89 57-8 47-96-13-89z" fill="#011c59" stroke="#011c59"/><path d="M194 382c-60 1-58 90 1 90 58 0 58-91-1-90z" fill="#011c59" stroke="#011c59"/><path d="M567 383c-56 9-42 99 18 88 57-10 43-97-18-88z" fill="#011c59" stroke="#011c59"/><path d="M188 767c-58 7-48 96 12 89 57-7 49-96-12-89z" fill="#011c59" stroke="#011c59"/><path d="M445 254c-58 4-52 94 8 89 59-5 52-93-8-89z" fill="#011c59" stroke="#011c59"/><path d="M319 254c-59 3-55 93 6 89 58-3 53-92-6-89z" fill="#011c59" stroke="#011c59"/><path d="M440 383c-56 9-42 99 18 88 57-10 42-97-18-88z" fill="#011c59" stroke="#011c59"/><path d="M442 511c-58 8-46 97 14 89 57-8 46-97-14-89z" fill="#011c59" stroke="#011c59"/><path d="M569 511c-58 8-45 97 14 89 58-8 46-97-14-89z" fill="#011c59" stroke="#011c59"/><path d="M824 511c-58 8-46 97 14 89 57-8 46-96-14-89z" fill="#011c59" stroke="#011c59"/><path d="M315 767c-58 8-47 97 13 89 57-7 47-97-13-89z" fill="#011c59" stroke="#011c59"/><path d="M322 382c-59 0-60 90 0 90 58 0 59-90 0-90z" fill="#011c59" stroke="#011c59"/><path d="M570 126c-58 7-48 96 12 89 58-7 48-96-12-89z" fill="#011c59" stroke="#011c59"/><path d="M572 254c-58 5-52 94 8 89 59-4 51-94-8-89z" fill="#011c59" stroke="#011c59"/><path d="M824 767c-58 8-46 97 13 89 58-7 47-96-13-89z" fill="#011c59" stroke="#011c59"/><path d="M569 767c-58 8-46 97 14 89 57-8 46-97-14-89z" fill="#011c59" stroke="#011c59"/><path d="M570 639c-58 7-48 96 12 89 58-7 48-96-12-89z" fill="#011c59" stroke="#011c59"/><path d="M826 254c-58 5-51 95 10 89 58-6 49-93-10-89z" fill="#011c59" stroke="#011c59"/><path d="M442 767c-58 8-46 97 14 89 57-8 46-97-14-89z" fill="#011c59" stroke="#011c59"/><path d="M822 383c-56 9-43 98 17 88 57-9 43-97-17-88z" fill="#011c59" stroke="#011c59"/></g></svg>
CSS background-image
.dot-grid {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/z_st3uwnZduC/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.dot-grid {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/z_st3uwnZduC/amnt.svg") center / contain no-repeat;
}
React
import DotGridSvg from "./dot-grid.jsx"; // from the React tab above

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

Tags

dot griddotspatternbackgroundelementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Dot Grid: Six evenly spaced rows and columns of small round dots. A flat element. as part of the pack Dots and grids, flat · Set 2. Want one like it? Make your own in the SVG studio.

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

Settings