How to fill background clipPath in svg element?

Question

css

Hey!
I found a couple of examples, just on my topic, I’m not a layout designer at all and I’m not strong in CSS and HTML5, I just can’t fit them to myself ...
My task:
The block is full screen wide, the height is fixed, there is a curve around the perimeter of the svg block ( Bezier), inside the curvilinear area must be filled with a background with repetition (background-repeat).
Schematic example:

Thanks for the advice

Answer 1

As usual, we assign an identifier to the path and for it we already make a pattern in which the desired background is:

code

<svg width="300" height="300">
      <pattern id="back"
             x="0" y="0" width="50" height="50"
             patternUnits="userSpaceOnUse" >
               
            <g fill="blue">
             <rect x="0" y="0" width="20" height="20" />
             <rect x="20" y="20" width="20" height="20" />
            </g>
      </pattern>
   <path
       id="path10"
       d="m 150.43452,265.25 c -1.00794,0.50397 -1.9775,1.09338 -3.02381,1.51191 -0.58577,0.23431 -3.10919,-0.22353 -3.77976,0 -4.96278,1.65426 4.68265,0.15982 -6.04762,0.75595 -3.02962,0.16831 -6.04762,0.50397 -9.07143,0.75595 -3.77976,0 -7.56177,-0.13026 -11.33928,0 -3.53467,0.12189 -7.04918,0.62002 -10.58334,0.75595 -3.02157,0.11622 -6.0535,-0.18861 -9.071424,0 -1.036934,0.0648 -2.015873,0.50397 -3.023809,0.75596 -1.511906,0 -3.023809,0 -4.535715,0 -0.755951,0 -1.511906,0 -2.267857,0 -0.251984,0 -0.577774,0.17818 -0.755952,0 -0.178181,-0.17818 0,-0.50397 0,-0.75596 0,-0.87515 0.165944,-4.16233 0,-4.53571 -0.737989,-1.66047 -1.888686,-3.11681 -3.023809,-4.53571 -0.890466,-1.11308 -1.863884,-2.1953 -3.023809,-3.02381 -6.869337,-4.90667 1.806522,3.31842 -3.779763,-2.26786 -0.251984,-0.25199 -0.459444,-0.55828 -0.755952,-0.75595 -0.468823,-0.31255 -1.113483,-0.35753 -1.511906,-0.75596 -0.178178,-0.17818 0,-0.50396 0,-0.75595 0,-0.25198 0,-1.00794 0,-0.75595 0,0.50397 0,2.01587 0,1.5119 0,-3.43142 0.466056,-7.32465 -0.755952,-10.58333 -0.250253,-0.66734 -0.970769,-1.04807 -1.511905,-1.5119 -1.225048,-1.05005 -2.530991,-2.00209 -3.779761,-3.02381 -1.511906,-1.25992 -3.023809,-2.51984 -4.535715,-3.77976 -0.503968,-0.75596 -0.869469,-1.62543 -1.511903,-2.26786 -0.178181,-0.17818 -0.546291,0.13977 -0.755955,0 -0.593016,-0.39535 -1.007935,-1.00794 -1.511903,-1.51191 -0.251984,-0.25198 -0.643263,-0.41788 -0.755952,-0.75595 -0.159369,-0.4781 0,-1.00793 0,-1.5119 -0.251986,-1.25992 -0.278765,-2.58679 -0.755954,-3.77977 -3.238587,-8.09646 -0.9228,-0.26695 -4.535712,-6.04761 -0.719196,-1.15072 -0.905047,-2.56605 -1.511906,-3.77977 -0.159369,-0.31873 -0.558279,-0.45944 -0.755952,-0.75595 -0.815025,-1.22254 -1.610764,-2.46557 -2.267857,-3.77976 -0.225383,-0.45076 0.356359,-1.15555 0,-1.51191 -0.178181,-0.17817 -0.643263,0.22539 -0.755952,0 -0.225382,-0.45076 0,-1.00793 0,-1.5119 0,-2.77182 0,-5.54365 0,-8.31548 0,-0.50396 0,-1.00793 0,-1.5119 0,-0.25198 0.07968,-0.5169 0,-0.75595 -0.429114,-1.28734 -1.035439,-2.50919 -1.511906,-3.77977 -0.279791,-0.7461 -0.460012,-1.528 -0.755951,-2.26785 -0.209262,-0.52316 -0.533998,-0.99401 -0.755954,-1.51191 -0.534538,-1.24726 -0.905045,-2.56604 -1.511904,-3.77976 -0.159369,-0.31874 -0.596585,-0.43721 -0.755951,-0.75595 -1.754775,-5.26432 0.499287,0.37095 -2.267858,-3.77976 -0.139777,-0.20967 0.112689,-0.53057 0,-0.75596 -0.695859,-1.39172 -1.571998,-0.12018 -2.267857,-1.5119 -0.112692,-0.22538 0.112691,-0.53057 0,-0.75595 -0.159369,-0.31874 -0.615577,-0.42841 -0.755952,-0.75596 -0.627785,-1.46482 -0.799187,-3.11027 -1.511906,-4.53571 -2.916962,-2.91696 -0.770363,-0.0576 -1.511906,-3.02381 -0.136657,-0.54663 -0.57777,-0.97736 -0.755951,-1.5119 -0.125074,-0.37523 -0.06438,-2.20348 0,-2.26786 0.178181,-0.17818 0.503967,0 0.755951,0 1.511906,0 3.033776,0.1733 4.535715,0 25.161999,-2.90331 5.141968,-2.26786 27.970239,-2.26786 7.559524,0 15.119046,0 22.67857,0 0.179639,0 2.854378,-0.0847 3.023809,0 0.318738,0.15937 0.643263,0.41788 0.755954,0.75595 0.159369,0.47811 -0.09884,1.01773 0,1.51191 0.156274,0.78137 0.624951,1.48185 0.755952,2.26786 0.124277,0.74566 -0.183346,1.53447 0,2.26785 0.329115,1.31646 1.048168,2.50449 1.511906,3.77977 0.544631,1.49773 0.852432,3.08487 1.511903,4.53571 0.608004,1.33761 1.659853,2.44215 2.267862,3.77976 0.65947,1.45084 1.00793,3.02381 1.5119,4.53572 0.25199,0.75595 0.59968,1.48648 0.75595,2.26785 0.34944,1.7472 0.43722,3.53861 0.75595,5.29167 0.99777,5.48774 0.48412,0.56046 2.26786,6.80357 0.13845,0.48458 -0.0713,1.013 0,1.51191 0.80537,5.63759 0.75595,2.17899 0.75595,4.53571 0,0.25199 -0.11269,0.53057 0,0.75595 0.15937,0.31874 1.00794,0.50397 0.75596,0.75595 -0.25199,0.25199 -1.05572,-0.56324 -0.75596,-0.75595 3.60339,-2.31646 7.52862,-4.09079 11.33929,-6.04762 5.51353,-2.83127 11.14326,-5.43444 16.63095,-8.31547 11.05086,-5.80171 11.12601,-6.86945 20.41072,-10.58334 1.4797,-0.59188 3.07088,-0.88412 4.53571,-1.5119 0.32755,-0.14038 0.59658,-0.43722 0.75595,-0.75595 0.11269,-0.22538 -0.25198,-0.75596 0,-0.75596 0.25199,0 -0.25198,0.75596 0,0.75596 0.79685,0 1.53231,-1.06243 2.26786,-0.75596 3.73443,1.55602 8.10817,5.73059 11.33929,8.31548 0.98383,0.78707 2.20386,1.31126 3.02381,2.26786 0.73338,0.85561 0.93211,2.05749 1.5119,3.02381 1.69036,2.81727 3.62587,5.48361 5.29167,8.31547 1.09169,1.85588 2.45575,4.53137 3.02381,6.80357 0.0611,0.24447 0,0.50397 0,0.75596 0,0.50397 0,1.00793 0,1.5119 0,0.25199 0.17818,0.57778 0,0.75595 -0.17818,0.17818 -0.53057,-0.11269 -0.75596,0 -0.31873,0.15937 -0.43721,0.59659 -0.75595,0.75596 -0.47513,0.23756 -2.54867,-0.23757 -3.02381,0 -0.31874,0.15936 -0.43721,0.59658 -0.75595,0.75595 -0.45077,0.22538 -1.15555,-0.35636 -1.51191,0 -0.17818,0.17818 0.17819,0.57777 0,0.75595 -0.39842,0.39842 -1.06114,0.41788 -1.5119,0.75595 -0.57018,0.42764 -0.94173,1.08428 -1.5119,1.51191 -0.45077,0.33807 -1.02875,0.46606 -1.51191,0.75595 -1.67186,-0.0738 -1.97549,1.56898 -3.02381,2.26786 -3.65587,1.82793 0.0409,-0.21966 -2.26786,1.5119 -0.72683,0.54513 -1.54102,0.96678 -2.26785,1.51191 -0.28509,0.21381 -0.43722,0.59658 -0.75596,0.75595 -0.92862,0.46431 -2.45451,0.37332 -3.02381,1.5119 -0.13177,0.26355 0,3.98079 0,4.53572 0,0.8411 -0.14097,4.86876 0,5.29167 0.28731,0.86191 1.04447,1.48878 1.51191,2.26785 0.28989,0.48316 0.44341,1.04309 0.75595,1.51191 0.19767,0.29651 0.59658,0.43721 0.75595,0.75595 0.60686,1.21372 1.0828,2.49242 1.51191,3.77976 0.0797,0.23906 -0.17818,0.57777 0,0.75595 0.39842,0.39843 1.11348,0.35753 1.5119,0.75596 0.17818,0.17818 -0.11269,0.53057 0,0.75595 0.15937,0.31874 0.59659,0.43721 0.75596,0.75595 0.0847,0.16943 0,2.84417 0,3.02381 0,0.6551 0.14597,2.5859 0,3.02381 -0.20334,0.61002 -1.89966,4.04478 -2.26786,4.53571 -0.42763,0.57018 -1.14521,0.90076 -1.51191,1.51191 -0.40997,0.68329 -0.31394,1.60484 -0.75595,2.26786 -0.13977,0.20966 -0.50397,0 -0.75595,0 -0.25199,0 -0.50397,0 -0.75595,0 -0.50397,0 -1.0338,-0.15937 -1.51191,0 -0.53454,0.17818 -0.97736,0.57777 -1.5119,0.75595 -0.60847,0.20282 -2.54074,-0.24154 -3.02381,0 -1.67145,0.83572 -0.23459,0.46917 -0.75595,1.5119 -0.15937,0.31874 -0.50397,0.50397 -0.75596,0.75596 -0.25198,0 -0.64326,-0.22539 -0.75595,0 -0.22538,0.45076 0.22538,1.06114 0,1.5119 -0.11269,0.22538 -0.75595,0.25198 -0.75595,0 0,-0.25198 1.00793,0 0.75595,0 -0.75595,0 -1.5119,0 -2.26786,0 -1.79491,0 -0.51149,-0.0611 -3.77976,0.75595 z"
       style="fill:url(#back);"/>
</svg>

Link to the sandbox: https://codepen.io/simkaUser/pen/JygBZJ?editors=1100