How to create a staggered square tiling pattern in svg?

Question

I want to fill a rectangle space with a repeating image pattern. The images are arranged in a staggered square tiling. Two adjacent rows are staggered in the x-direction by half the width of the side of the square.

How to use the pattern element in svg to achieve this?

Here is the diagram of the result I want

I tried to achieve this shift but it did not work.

<svg width=1000 height=1000>
  <pattern id="bar" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
    <rect class="checker" x="0" width="100" height="100" y="0" fill="blue" />
    <rect class="checker" x="100" width="100" height="100" y="0" fill="yellow" />
    <rect class="checker" x="50" y="100" width="100" height="100" y="0" fill="red" stroke="red" />
    <rect class="checker" x="150" y="100" width="100" height="100" y="0" fill="green" />
  </pattern>
  <rect width="100%" height="100%" fill=url(#bar)>
</svg>

The difficulty is that each of my squares is an image and it cannot be split in half. So I can't find the smallest element of this pattern.

Thank you in advance.

Any code to show how you want to achieve the shift relative on X? If not? Then have you tried anything? — mardubbles, May 23 '22 at 00:14
I read this article which is about staggered rectangle tiling: https://css-tricks.com/optimizing-svg-patterns/ However, when each square is an image(which cannot be cut in half), I did not find any workable approach. — Tingying He, May 23 '22 at 00:35

score 2 · Accepted Answer · answered May 23 '22 at 00:58

Something like this... You can replace the paths with images.

The trick is to draw one of the pieces in two separate halves allowing the pattern rect to clip each half.

<svg>
  <pattern id="p" patternUnits="userSpaceOnUse" width="80" height="80">
    <path transform="translate(8,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
    <path transform="translate(48,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
    <path transform="translate(28,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
    <path transform="translate(68,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
    <path transform="translate(-12,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
  </pattern>
  <rect width="200" height="200" fill="url(#p)"/>
</svg>

How to create a staggered square tiling pattern in svg?

1 Answers1