help find the SVG mask so that using clip path and css to make a rectangular image like this, it’s important that all corners are sharp as in the picture, the dimensions of this block can be arbitrary, but the wavelength is always the same enter image description here

There is such an example, but does not fit - https://www.html5rocks.com/en/tutorials/masking/adobe/ enter image description here

    1 answer 1

    In general, I drew a contour (as in the example) and put a photo with a paternom and flushed it - the demo itself

    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 447.63491 248.40051"> <defs> <pattern id="pattern" patternTransform="matrix(0.67788443,0,0,0.35518436,336.70444,366.21677)" height="1068" width="1141.3332" patternUnits="userSpaceOnUse"> <image y="5.884182e-015" x="-3.0433989e-014" id="image857" xlink:href="https://cs2.livemaster.ru/storage/54/32/fc870a3aa706ff4f4a05930e7dcv--odezhda-plate-bolshie-tsvety.jpg" preserveAspectRatio="none" height="1068" width="1141.3333" /> </pattern> </defs> <g transform="translate(216.85431,1.6998068)"> <path d="m -181.65379,242.88934 c -11.51211,-3.17704 -13.93065,-3.22999 -23.42124,-0.5128 -4.09789,1.17324 -7.82106,1.82197 -8.2737,1.44165 -0.45264,-0.38034 0.35672,-4.22433 1.79858,-8.54218 2.52597,-7.5644 2.50168,-8.17681 -0.66611,-16.79455 -4.069,-11.0694 -4.06745,-12.05043 0.0369,-23.40451 l 3.32457,-9.19693 -3.61822,-10.52145 -3.61822,-10.52145 3.61822,-10.52144 3.61821,-10.52145 -3.32457,-9.19693 c -4.10502,-11.35593 -4.10633,-12.33392 -0.0315,-23.41907 l 3.29302,-8.95842 -3.56886,-10.531632 c -3.56782,-10.52856 -3.568,-10.53421 -0.61909,-19.292911 3.68578,-10.94731 3.68719,-14.509 0.0101,-25.42839 -2.93922,-8.72806 -2.9391,-8.73149 0.65384,-19.18229 l 3.59354,-10.45267 -3.16167,-8.5989503 c -1.73893,-4.7294296 -2.95711,-8.78404959 -2.70708,-9.01026959 0.25003,-0.22621 5.59549,0.90075 11.87879,2.50436999 l 11.42419,2.91567 12.52592,-3.04123 12.52592,-3.04122999 12.46611,3.02670999 12.46611,3.02671 12.688,-3.03562 12.68799,-3.03561999 12.46489,3.02640999 12.464881,3.02642 12.46489,-3.02642 12.46489,-3.02640999 12.687993,3.03561999 12.68799,3.03562 12.46612,-3.02671 12.46611,-3.02670999 12.52592,3.04122999 12.52593,3.04123 11.10848,-2.83509 c 13.70544,-3.4979 14.24704,-3.49729 27.28284,0.0305 l 10.58889,2.86558 12.87611,-3.08063 12.87611,-3.08062999 12.50281,3.03562999 12.502806,3.03562 12.55747,-3.0044 12.55747,-3.00438999 12.55747,3.00438999 12.55748,3.0044 12.50281,-3.03562 12.50281,-3.03562999 12.89357,3.08480999 12.89358,3.08481 10.06611,-2.74993 c 5.53637,-1.51245999 10.06612,-2.56889999 10.06612,-2.34764999 0,0.22125 -1.42149,4.26931999 -3.15887,8.99570959 -3.1577,8.5903203 -3.15771,8.5964703 -0.0203,17.0065403 3.92585,10.52349 3.93413,14.19786 0.0562,24.91403 -3.08359,8.52125 -3.08354,8.60667 0.0126,17.34055 3.87563,10.93478 3.86603,14.296231 -0.071,24.849791 -3.14099,8.419702 -3.14098,8.421212 0.0203,17.340542 3.92791,11.08227 3.92556,14.41551 -0.0176,24.98545 -3.13741,8.41007 -3.13739,8.41622 0.0203,17.00654 1.73737,4.72639 3.15886,10.25396 3.15886,12.28348 -1.68823,23.67944 -9.70224,54.02037 -3.22516,71.55924 1.70388,4.60002 2.91283,8.51921 2.68657,8.70931 -0.22626,0.19012 -4.97995,-0.82157 -10.56375,-2.2482 -12.67299,-3.23789 -13.53974,-3.23211 -26.90669,0.17939 l -10.94542,2.79348 -12.52175,-3.04022 -12.52176,-3.04022 -12.5954,3.05811 -12.5954,3.0581 -12.46488,-3.02641 -12.46488,-3.02642 -12.614766,3.0181 -12.61477,3.0181 -10.98293,-2.80304 c -13.5107,-3.4482 -13.63417,-3.44816 -27.79839,0.0106 l -11.52199,2.81305 -11.02208,-2.81305 c -6.06267,-1.54777 -12.21962,-2.81365 -13.68264,-2.81365 -1.46302,0 -7.61997,1.26588 -13.68212,2.81305 l -11.02208,2.81303 -11.52199,-2.81305 c -14.2141,-3.47031 -14.65469,-3.46962 -27.63518,0.0431 l -10.554323,2.85623 -12.78017,-3.10297 -12.78016,-3.10291 -12.728471,3.09041 -12.72848,3.09041 -11.76486,-3.10022 -11.76487,-3.10025 -10.53762,2.44085 c -15.2971,3.54329 -17.4212,3.59806 -27.85631,0.71824 z" style="fill:url(#pattern);" /> </g> </svg>

    • Thanks more, will you tell me where these svg contours are drawn? Photoshop, Illustrator? - WebSiteCoder
    • This is done in inkscape - MaximLensky
    • @Ubuntu User Literate approach, good answer (+) A little right, the bottom corner is not finished - too big wave and some transitions between the waves turned out to be sharp. It was necessary to put these node points in Inkscape - “Make selected nodes automatically smoothed” - Alexandr_TT
    • @Alexandr_TT but it seems to be a complete copy - although it may be something I didn’t finish - I’m only enraged by the transformations, but in general, inkscape generates code much worse than the same corel draw or illustrator, but inkscape can do something they don’t know how together - but I would like to know how to avoid transformations in this program - MaximLensky
    • one
      @Ubuntu User transformations occur when you move, rotate, magnify an object in Inkscape. Transformations will not be, if you draw a "pen" right in the right place of the canvas and do not transform the image. - Alexandr_TT