Tiles SVG pattern, flat

Free

Preview on the whole page

Rows of small parallelograms are divided by thin, background-coloured joints. Use this tiled surface in room mockups or as a fill for brochure panels.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

tiles parallelograms surface isometric pattern flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/eAjg8FVxogcC/amnt.svg" alt="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="#f3eee4"/><defs><pattern id="tiles" width="20" height="40" patternUnits="userSpaceOnUse"><g fill="#527d78"><path d="M-17 1H2L-2 19H-21Z"/><path d="M3 1H22L18 19H-1Z"/><path d="M23 1H42L38 19H19Z"/></g><g fill="#c7795d"><path d="M-7 21H12L8 39H-11Z"/><path d="M13 21H32L28 39H9Z"/></g></pattern></defs><rect width="200" height="200" fill="url(#tiles)"/></svg>

CSS background-image

.tiles {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/eAjg8FVxogcC/amnt.svg");
  background-size: 200px 200px;
}

React

import TilesSvg from "./tiles.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Tiles: Small parallelogram tiles repeat in rows, separated by thin background-coloured joints. as part of the pack Isometric Patterns, Flat. Want one like it? Make your own in the SVG studio.

Rest of Isometric Patterns, Flat

Whole pack

Similar SVGs

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