Menu

Beta
Sign in
Beta
Triangle Grid SVG element, flat

Triangle Grid SVG element, flat

Interlocking diagonal lines create a repeated field of small triangles. Use the grid for a geometry exercise or as a patterned background on a report cover.

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/CNFv44olLHB2/amnt.svg" alt="Triangle 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="navy" data-name="Navy"><path d="M511 61c-4 1-39 63-44 71-13 24-28 48-42 72-28 47-56 96-84 143-57 96-113 191-169 287-29 48-57 96-85 143-14 24-28 48-42 72-28 48-41 46 21 46 149 0 298 0 448 0 149 0 298 0 448 0 6 0 35 2 39-1 6-4-19-40-23-47-14-23-28-48-42-71-29-48-57-96-85-144-55-96-113-190-169-287-28-48-56-96-84-143-14-24-28-48-42-72-6-10-39-70-45-69zM467 161h91l-47 77zm-8 4l46 78h-93zm107 0l46 78h-93zM413 252h90l-44 77zm197 0l-44 79-47-79zm-205 4l45 78h-90zm106 1l46 77h-90zm108-1l45 78h-90zM449 345l-44 76-47-77c16 0 81-3 91 1zm215 0l-45 76-45-76c12-2 81-4 90 0zm-313 3l45 78h-92zm108 0l44 78h-90zm107 0l46 78h-93zm107 1l45 77h-92zM397 435l-46 80-46-79zm214 0l-45 80-46-80zm108 0l-45 80-48-80zm-422 5l45 78h-91zm107 0l46 78h-90zm108 1l45 77h-90zm108-1l46 78h-92zm107 1l46 77h-91zM342 527l-45 80-46-79zm108 0l-45 78-46-78zm215 1l-46 77-47-78zm108-1l-46 78-45-77zm-530 5l45 78h-91zm108 0l45 78h-91zm108 0l44 78h-90zm107 0l46 78h-93zm107 1l47 77h-92zm109-1l45 78h-91zM288 619l-45 80-46-80zm108 0l-45 80-46-80zm215 0l-45 80-46-80zm108 0l-46 79-47-79zm109 0l-47 78-45-78zm-639 5l46 78h-92zm108 0l45 78h-91zm107 0l46 78h-91zm108 1l45 77h-91zm107-2l47 79h-92zm108 0l47 79h-92zm109 1l45 78h-91zM234 711l-46 78-46-78zm108 0l-45 80-48-80zm108 0l-45 80-46-80zm107 0l-45 78-45-78zm109 0l-46 78-48-78zm106 1l-45 78-47-79zm109-1l-45 80-48-80zm9 4l45 79h-91zm-757 1l46 78h-92zm110 0l45 78h-91zm107 0l46 78h-91zm109 0l44 78h-90zm107 0l44 78h-90zm106 0l46 78h-90zm110 0l46 78h-94zM180 803l-46 79-46-79zm108 0l-46 78-47-78zm108 0l-45 80-46-80zm108 0l-45 80c-9-22-41-60-45-79zm107 0l-46 78-45-78zm108 0l-46 78-47-78zm108 0l-46 78-47-78zm110 0l-47 80-46-80zM80 808l45 78h-91zm109 0l46 78h-94zm108 0l45 78h-91zm107 0l46 78h-92zm108 0l45 78h-90zm107 1l46 77h-91zm108 0l46 77h-91zm109-1l45 78h-91zm108 1l47 77h-92zM556 151c-13 4-32 1-45 1-7 0-42 1-43-2l44-76zm0 193c0 7-38 65-44 78-6-13-45-70-44-78zM423 435h8 15 9 9 10 6 9 7c2 0 8-1 7 2l-44 78-46-80zm133 94l-44 76c-6-7-45-72-44-77 13-4 32-1 46-1 6 0 41-1 42 2zm-77 90h9 16l-45 78-46-78z" fill="#022a4a" stroke="#022a4a"/></g><g id="teal" data-name="Teal"><path d="M937 803h-93l46 80z" fill="#02aba5" stroke="#02aba5"/><path d="M397 435l-92 1 46 79z" fill="#02aba5" stroke="#02aba5"/><path d="M288 803h-93l47 78z" fill="#02aba5" stroke="#02aba5"/><path d="M827 803h-93l47 78z" fill="#02aba5" stroke="#02aba5"/><path d="M881 711h-93l48 80z" fill="#02aba5" stroke="#02aba5"/><path d="M180 803h-92l46 79z" fill="#02aba5" stroke="#02aba5"/><path d="M342 711h-93l48 80z" fill="#02aba5" stroke="#02aba5"/><path d="M396 803h-91l46 80z" fill="#02aba5" stroke="#02aba5"/><path d="M719 435h-93l48 80z" fill="#02aba5" stroke="#02aba5"/><path d="M234 711h-92l46 78z" fill="#02aba5" stroke="#02aba5"/><path d="M342 527l-91 1 46 79z" fill="#02aba5" stroke="#02aba5"/><path d="M288 619h-91l46 80z" fill="#02aba5" stroke="#02aba5"/><path d="M450 527h-91l46 78z" fill="#02aba5" stroke="#02aba5"/><path d="M719 803h-93l47 78z" fill="#02aba5" stroke="#02aba5"/><path d="M828 619h-92l45 78z" fill="#02aba5" stroke="#02aba5"/><path d="M665 528l-93-1 47 78z" fill="#02aba5" stroke="#02aba5"/><path d="M773 527l-91 1 45 77z" fill="#02aba5" stroke="#02aba5"/><path d="M450 711h-91l46 80z" fill="#02aba5" stroke="#02aba5"/><path d="M396 619h-91l46 80z" fill="#02aba5" stroke="#02aba5"/><path d="M719 619h-93l47 79z" fill="#02aba5" stroke="#02aba5"/><path d="M666 711h-94l48 78z" fill="#02aba5" stroke="#02aba5"/><path d="M772 712l-92-1 47 79z" fill="#02aba5" stroke="#02aba5"/><path d="M611 435h-91l46 80z" fill="#02aba5" stroke="#02aba5"/><path d="M611 803h-91l45 78z" fill="#02aba5" stroke="#02aba5"/><path d="M664 345c-9-4-78-2-90 0l45 76z" fill="#02aba5" stroke="#02aba5"/><path d="M449 345c-10-4-75-1-91-1l47 77z" fill="#02aba5" stroke="#02aba5"/><path d="M611 619h-91l46 80z" fill="#02aba5" stroke="#02aba5"/><path d="M459 348l-46 78h90z" fill="#02aba5" stroke="#02aba5"/><path d="M459 716l
…
CSS background-image
.triangle-grid {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/CNFv44olLHB2/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.triangle-grid {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/CNFv44olLHB2/amnt.svg") center / contain no-repeat;
}
React
import TriangleGridSvg from "./triangle-grid.jsx"; // from the React tab above

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

Tags

triangle gridtrianglesgeometrypatterndotselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Triangle Grid: Interlocking diagonal lines forming repeated small triangles. 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