How can I set svg pattern size properly? - html

Question

I have an SVG that contains pattern and path to fill. I've already figured out how to fill svg with image, but when I do it my svg crops.
There are 4 paths that are generated randomly:
On my website I try to fill them with image using following code:
path.js
let paths = []
paths.push(
"M0,223.2L293,0h450v415.3l-78.5,101.5l-233-50.9L320.4,579l-187.8-27.4L0,223.2z",
"M743,65.7L342.7,0L44.8,89.2L0,415.5l80.3,126.2l200.8-24.6L484.6,586l150.6-26.8L743,415.5V65.7z",
"M0,223.2L248.5,0H743v415.3L495.8,552.2l-220.7-56.3L74.3,552.2L0,223.2z",
"M0,497.2l29.5-142.4L0,122.8L198.2,0l339.6,41.6L726,0v449.4L647.5,532l-238.3-34.8L290.7,567L0,497.2zz"
)
let path = () => {
return paths[Math.floor(Math.random() * Math.floor(4))];
}
export default path
Home.js fragment
<div className="intro">
<p>Some text</p>
<svg width="1540px" height="580">
<defs>
<pattern id="pattern" patternUnits="userSpaceOnUse" height="580" width="1540">
<image height="100%" width="100%" className="introImage" href={introImage}/>
</pattern>
</defs>
<path d={path()} fill="url(#pattern)"/>
</svg>
</div>
Home.css fragment
.intro {
margin: 300px 0 0 0;
width: 100%;
height: 600px;
display: flex;
align-items: center;
}
.intro p {
margin: 0;
width: 65%;
font-family: Montserrat medium, sans-serif;
font-size: 32px;
}
.intro svg {
margin-left: 200px;
}
This is what I get:
As you see, my svg gets cropped and I don't know how to fix it.