JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div id="door">
    <div class="window"></div>
</div>

<svg  xmlns="http://www.w3.org/2000/svg" id="svg-door">
    <defs>
        <!-- For some reason, the pattern may not fill properly in chrome... but sometimes it does -->
         <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
             <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768" />
        </pattern>
    </defs>
    <path xmlns="http://www.w3.org/2000/svg" d="
M0,0 225,0 225,300 0,300 z
M165,10, 215,10 215,80 165,80 z" fill="url(#wood)" fill-rule="evenodd"/>
</svg>

CSS

#door{
    height:300px;
    width:225px;
    border 1px solid #000;
    background-color:orange;
    position:relative;
    margin-bottom: 50px;
}
.window{
    
   height:70px;
    width:50px;
    background-color:blue;
    opacity:0.6;
    top:10px;
    right:10px;
    position:absolute;
}

#svg-door {
   background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
    background-size: cover;
    box-sizing: border-box;
    padding: 100px;
    width: 100%;
    height: 500px;
}

JavaScript

// i want to be able to cut the hole in the orange the same so the opacity doesn't look purple and you will see the blue and the white through it. I.e. Like a window
// N.B. I am using a background image instead of background color which is wood so the solution must work with a repeating image:

// is there any way to cut this hole?

// Solutions looked at:
//      repeating the image and excluding an area

// Thanks in advance