JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <defs>
        <!-- pattern1 - no aspect ratio control -->
        <pattern id="pattern1" height="100%" width="100%"
        patternContentUnits="objectBoundingBox">
            <image height="1" width="1" preserveAspectRatio="none" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Gl%C3%BChwendel_brennt_durch.jpg/399px-Gl%C3%BChwendel_brennt_durch.jpg" />
        </pattern>
        
        <!-- pattern2 - aspect ratio control on the image only -->
        <pattern id="pattern2" height="100%" width="100%"
        patternContentUnits="objectBoundingBox">
            <image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Gl%C3%BChwendel_brennt_durch.jpg/399px-Gl%C3%BChwendel_brennt_durch.jpg" />
        </pattern>
        
        <!-- pattern3 - aspect ratio control on both image and pattern -->
        <pattern id="pattern3" height="100%" width="100%"
        patternContentUnits="objectBoundingBox" 
        viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
            <image height="1" width="1"  preserveAspectRatio="xMidYMid slice" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Gl%C3%BChwendel_brennt_durch.jpg/399px-Gl%C3%BChwendel_brennt_durch.jpg" />
        </pattern>
    </defs>
    
    <rect x="2%" y="2%" height="30%" width="65%" 
        fill="url(#pattern1)"/>
    <circle cx="85%" cy="17%" r="15%" fill="url(#pattern1)"/>
    
    <rect x="2%" y="35%" height="30%" width="65%" 
        fill="url(#pattern2)"/>
    <circle cx="85%" cy="50%" r="15%" fill="url(#pattern2)"/>
    
    <rect x="2%" y="68%" height="30%" width="65%" 
        fill="url(#pattern3)"/>
    <circle cx="85%" cy="83%" r="15%" fill="url(#pattern3)"/>
    
    
</svg>

CSS

html, body, svg {
    width:100%;
    min-height:500px;
    margin:0; padding:0;
}
rect, circle {
    stroke:black;
}