JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="300" height="300">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="200" height="200">
            <image xlink:href="http://lorempixel.com/200/200/people/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img2" patternUnits="userSpaceOnUse" width="200" height="200">
            <image xlink:href="http://lorempixel.com/200/200/animals/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img3" patternUnits="userSpaceOnUse" width="200" height="200">
            <image xlink:href="http://lorempixel.com/200/200/abstract/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img4" patternUnits="userSpaceOnUse"  width="200" height="200">
            <image xlink:href="http://lorempixel.com/200/200/sports/" x="0" y="0" width="200" height="200"/>
        </pattern>
    </defs>
    <path id="path1" stroke="black" d="M150,0 225,150 75,150 150,0" fill="url(#img1)" />
    <path id="path2" stroke="black" d="M0,300 75,150 150,300 0,300" fill="url(#img2)" />
    <path id="path3" stroke="black" d="M75,150 225,150 150,300 75,150" fill="url(#img3)" />
    <path id="path4" stroke="black" d="M150,300 300,300 225,150 150,300" fill="url(#img4)" />
</svg>

CSS

path {
    
}

JavaScript

var step = 0;
var $prev = "";

$("path").on("click", function() {
    switch (step) {
        case 0:
            step = 1;
            $prev = $(this);
            break;
        case 1:
            step = 0;
            var aux = $prev.attr("fill");
            $prev.attr("fill", $(this).attr("fill"));
            $(this).attr("fill", aux);
            break;
    }
});