JSFiddle - React, Tailwind, and code Playground

by webref

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 577.8 528.3">
    <defs>
    <pattern xmlns="http://www.w3.org/2000/svg" id="img1" patternUnits="userSpaceOnUse" width="460" height="276">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/30/1359546539116/single-white-cloud-on-blu-008.jpg" x="0" y="0" width="460" height="276"/>
        </pattern>
    <pattern xmlns="http://www.w3.org/2000/svg" id="img2" patternUnits="userSpaceOnUse" width="460" height="276">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://images.naldzgraphics.net/2014/07/1-fine-sand-seamless-texture.jpg" x="0" y="0" width="460" height="276"/>
        </pattern>
    <pattern xmlns="http://www.w3.org/2000/svg" id="img3" patternUnits="userSpaceOnUse" width="460" height="276">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.paragonstl.com/wp-content/uploads/2013/03/fire-shutterstock-615x345.jpg" x="0" y="0" width="615" height="345"/>
        </pattern>        
    </defs>
    
    <polygon fill="url(#img1)" points="129,0.3 447.3,0.3 502.3,132 289.1,229.3 73.1,132.3 "  />
    <polygon fill="url(#img2)" points="68.3,142.3 283,236.1 283,527.6 0,298 "/>
    <polygon fill="url(#img3)" points="508.4,142.5 293.8,236.3 293.8,527.8 576.8,298.1 "/>

</svg>

CSS

body {
    margin: 0;
}

svg {
    display: block;
    
    width: 100%;
    height: 100vh;
}