Repeating an inline svg pattern

HTML & CSS
1

How is this done?

svg {
  background-repeat: repeat;
}

<svg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g></svg>
2

Hi there asasass,

I am struggling to understand what “this” is,
and also what actually needs to be “done”. :unhappy:

Can you help me and others, who may be
similarly confused, by supplying a little more
information with regard to your current problem ?

coothead

1 Like
3

This pattern svg when repeated.
image

Should look like this.
image

4

Hi there asasass,

I cannot put an example on “jsfiddle” in this instance. :wonky:

I am afraid that you will have to check out the attachment…

brick-wall.zip (1.6 KB)

…to test it. :winky:

coothead

1 Like
5

This is one way of doing it:

SVG encoder

background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23000'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}

This is another way:

<svg width="200" height="300" viewBox="0 0 200 300">
  <defs>
    <pattern id="brick"  width='42' height='44' patternUnits='userSpaceOnUse'> >
      <g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#brick)"></rect>
</svg>
1 Like
6

Hi there asasass,

your latest two examples don’t look like this…


Is that intentional ?

coothead

7

I just used that as an example, that’s all.

8

OK, you now have three examples to play with. :biggrin:

coothead

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.