Receding Squares SVG background, flat

Receding Squares SVG background, flat

Separate square outlines grow smaller along a diagonal, keeping the center open. Use them on a math worksheet or as a border for a slide.

Similar SVGs

More from Perspective Backgrounds, Flat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/CH-FY_-fZBFK/amnt.svg" alt="Receding Squares" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"><rect width="1600" height="900" fill="#172630"/><g fill="none" stroke="#52747A" stroke-width="2" opacity=".65"><rect x="-120" y="530" width="430" height="430"/><rect x="180" y="615" width="235" height="235"/><rect x="405" y="685" width="120" height="120"/><rect x="555" y="735" width="58" height="58"/></g><g fill="none" stroke="#78918B" stroke-width="2" opacity=".48"><rect x="1400" y="-100" width="310" height="310"/><rect x="1255" y="165" width="165" height="165"/><rect x="1165" y="350" width="82" height="82"/><rect x="1110" y="455" width="38" height="38"/></g></svg>
CSS background-image
.receding-squares {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/CH-FY_-fZBFK/amnt.svg");
  background-size: contain;
}
React
import RecedingSquaresSvg from "./receding-squares.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT SVG 1.1 drew this from the words Receding Squares: Separate square outlines decrease in size along a diagonal path, away from the open center. as part of the pack Perspective Backgrounds, 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