JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="450" height="450">
    <defs>
        <pattern id="img1" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/people/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img2" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/animals/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img3" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/abstract/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img4" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/sports/" x="0" y="0" width="200" height="200"/>
        </pattern>
    </defs>
    <polygon id="path1" points="225,450 300,300 150,300" fill="url(#img1)" />
    <polygon id="path2" points="150,300 225,150 75,150" fill="url(#img2)" />
    <polygon id="path3" points="150,300 300,300 225,150" fill="url(#img3)" />
    <polygon id="path4" points="300,300 375,150 225,150" fill="url(#img4)" />
    <polygon id="path5" points="75,150 150,0 0,0" fill="url(#img1)" />
    <polygon id="path6" points="75,150 225,150 150,0" fill="url(#img2)" />
    <polygon id="path7" points="225,150 300,0 150,0" fill="url(#img3)" />
    <polygon id="path8" points="225,150 375,150 300,0" fill="url(#img4)" />
    <polygon id="path9" points="375,150 450,0 300,0" fill="url(#img1)" />
</svg>

CSS

polygon, path {
    opacity:0.5;
    transition:all 0.5s;
}

polygon:hover, path:hover {
    opacity:1;
}

JavaScript

var step = 0;
var $prev;

$("polygon").on("click", function() {
    switch (step) {
        // if it's the first step: save the current element for later
        case 0:
            step = 1;
            $prev = $(this);
            break;
        // if it's the second step: swap images and start again
        case 1:
            step = 0;
            var aux = $prev.attr("fill");
            $prev.attr("fill", $(this).attr("fill"));
            $(this).attr("fill", aux);
            break;
    }
});