Raised Tiles SVG pattern, flat

Raised Tiles SVG pattern, flat

Individual square tiles rise above a flat base, exposing narrow shaded sides and gaps. Use this surface in interface mockups or on interior sample sheets.

Similar SVGs

More from Isometric Patterns, Flat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/KAQsrocNW4F8/amnt.svg" alt="Raised Tiles" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="#d7d4ca"/><defs><g id="tile"><path d="M7 7h36l5 5v36l-5-5V7Z" fill="#858f89"/><path d="M7 43h36l5 5H12l-5-5Z" fill="#a4aaa0"/><rect x="7" y="7" width="36" height="36" fill="#f2eee2"/></g></defs><use href="#tile" x="0" y="0"/><use href="#tile" x="50" y="0"/><use href="#tile" x="100" y="0"/><use href="#tile" x="150" y="0"/><use href="#tile" x="0" y="50"/><use href="#tile" x="50" y="50"/><use href="#tile" x="100" y="50"/><use href="#tile" x="150" y="50"/><use href="#tile" x="0" y="100"/><use href="#tile" x="50" y="100"/><use href="#tile" x="100" y="100"/><use href="#tile" x="150" y="100"/><use href="#tile" x="0" y="150"/><use href="#tile" x="50" y="150"/><use href="#tile" x="100" y="150"/><use href="#tile" x="150" y="150"/></svg>
CSS background-image
.raised-tiles {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/KAQsrocNW4F8/amnt.svg");
  background-size: 200px 200px;
}
React
import RaisedTilesSvg from "./raised-tiles.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT SVG 1.1 drew this from the words Raised Tiles: Individual square tiles lift above a flat base, showing narrow shaded sides and gaps. as part of the pack Isometric Patterns, Flat. 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