rendering

code

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" >
    <defs>
        <pattern id="pattern" width="2" height="2" patternUnits='userSpaceOnUse' patternTransform='scale(20)'>
            <path d="M 0 0 H 2 V 1 H 0 M 1 1 H 3 V 2 H 1 M 1 1 V 2 H -1 V 1 H 1 M 0 2 V 3 H 2 V 2 H 0 M 0 0 H 0 M 0 0 V 1" stroke-width="0.1" stroke="# 333" fill="lightcoral"/>
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#pattern)" />
</svg>
Copy the code

The online demo

Jsbin.com/dupugu/edit…

explain

svg pattern

Elements defined in pattern can be used to fill in other elements, just like background colors. Here we define a shape in pattern,

<path d="M 0 0 H 2 V 1 H 0 M 1 1 H 3 V 2 H 1 M 1 1 V 2 H -1 V 1 H 1 M 0 2 V 3 H 2 V 2 H 0 M 0 0 H 0 M 0 0 V 1" stroke-width="0.1" stroke="# 333" fill="lightcoral"/>
Copy the code

The Rect element is then filled with the defined pattern.

 <rect width="100%" height="100%" fill="url(#pattern)" />
Copy the code

Shape design

When an element is filled with pattern, it is in rectangular shape. Therefore, the shape we define in pattern needs to be able to repeat as a rectangular shape to become a full brick wall effect.

Tools: yqnn. Making. IO/SVG – path – Ed…

The design looks like this

It’s made up of four rectangles

However, the areas where pattern repeats are only the parts drawn by the yellow line, and only this part meets the requirements