JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://the-taylors.org/teststation/raphael/v2.0/raphael.js"></script>

        <div id="holder">
            <img id="photo" src="../grid.jpg" width="320" height="240" alt="Test" style="display: none; ">
        </div>

CSS

body {
    background: #fff;
}
#holder path {
    stroke-width: 0 !important;
    stroke: transparent !important;
}

JavaScript

var img = document.getElementById("photo");
                img.style.display = "none";
                var r = Raphael("holder", 600, 600);
                
                r.path("M4,25L175,17L175,137L4,132Z")
                .attr({
                    stroke: "url(http://the-taylors.org/teststation/raphael/v2.0/mars.jpg)",
                    "stroke-width": 5
                });
                r.path("M188,16L361,10L361,141L188,137Z")
                .attr({
                    fill: "url(http://the-taylors.org/teststation/raphael/v2.0/mars.jpg)",
                    "stroke-width": 0
                });
                r.path("M375,10L547,3L547,146L375,142Z")
                .attr({
                    fill: "url(http://the-taylors.org/teststation/raphael/v2.0/mars.jpg)",
                    "stroke-width": 0
                });
                r.path("M10,500L100,500L100,600L10,600Z")
                .attr({
                    fill: "url(http://the-taylors.org/teststation/raphael/v2.0/mars.jpg)"
                });

                r.image("http://the-taylors.org/teststation/raphael/v2.0/mars.jpg", 50, 200, 175, 145);

                setTimeout(function(){
                    var $holder = $('#holder'),
                        $text   = $('<textarea />')
                            .width(300)
                            .height(300)
                            .val($holder.html()).appendTo('body');
                }, 1000);