Image pattern to SVG path showing stretched

Question

I have a rectangular div, where I added a background-color, and background-image with repeat on, so that the semi-transparent image blend with the background color and make a colorful patterned background for my content. I took a pattern from SubtlePatterns which is: 300px × 295px in dimension. Here's the code:

#nd {
    background-image: url('../images/dark-mosaic.png');
    background-color: #b33939;
    color: #fff;
}

Now I wanted to make the harsh rectangle a bit smoother, so I took an SVG separator from this link. Used this answer to make an SVG path background image. With the following code:

<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="300" height="295">
            <image xlink:href="{{ asset('images/dark-mosaic.png') }}" x="0" y="0" width="300" height="295" />
        </pattern>
    </defs>
    <path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#img1)"></path>
</svg>

I ended up with a SVG shape with stretched/filled background image:

I consulted this link and fixed the width and height attribute of the <image> tag to the width and height of the image file, but I failed.

Now I have two questions:

• How can I make the background image to be tiled exactly like the rectangle?
• How can I put a fill color to the shape so that the SVG pattern matched with the pattern in the rectangle?

Answer 1

Instead of using a section element and an svg element and try to match the pattern for both elements you can use only the section and a clipPath to clip the section as you need.

The path for the "pattern" I'm using has fill="black". The section has background-color: skyBlue;

Please observe that the clipPath is using clipPathUnits="objectBoundingBox" and the d attribute has values from 0 to 1.

#nd {
  height:300px;
  background-color:skyBlue;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='black'%3E%3Crect x='0' y='0' width='20' height='20'/%3E%3Crect x='20' y='20' width='20' height='20'/%3E%3C/g%3E%3C/svg%3E");
   -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">  
            <path d="M0 .5 C .20 0 .50 0 1 .5 v.5H0Z"></path>
        </clipPath>
      </defs>
</svg>
<section id="nd"></section>

For the background-image I'm using a data:Uri image but you can use the external image.

If you take a look at the svg used as an image you'll see this (not a pattern!). Since css is by default repeating the image you don't need a pattern, just an image that is repeating.

<svg viewBox='0 0 40 40' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <g fill="black">
        <rect x='0' y='0' width='20' height='20'/>
        <rect x='20' y='20' width='20' height='20'/>
    </g>
</svg>

I hope you'll find this helpful.