Just A Suggestion for Clippy!

[Sam C.]

I really like your Clippy example...

I would suggest instead of just outputting the just the clip code, why not the whole code: Pic, CSS and HTML?

For example, the whole code would look like:
HTML

<section class="demo">
<div id="box" class="box" style="width: 100%; height: 800px;">
<div class="shadowboard" style="opacity: 0;"></div>
<div class="clipboard" style="clip-path: polygon(50% 0%, 100% 0, 100% 100%, 49% 87%, 19% 73%, 0 52%, 0 0);"></div>
</div>
</section>

CSS

.box {
    position: relative;
    /* box-shadow: inset 0 0 0 10px #fbfcf7, inset 0 0 0 11px #d3d0c9; */
    -ms-touch-action: none;
    touch-action: none;
    min-height: 200px;
    max-width: 100%;
    min-width: 420px;
    height: 800px;
    background: #e01e1e; //<-- Added to change the mask color
}
.shadowboard, .clipboard {
    background-image: url(pics/pittsburgh.jpg); //<-- allowed to change the pic url
}
.shadowboard {
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 0.375s;
    transition: opacity 0.375s;
}
.shadowboard, .clipboard {
    position: absolute;
    top: 0px; //<-- not sure why the border
    left: 0px; //not sure why the border
    right: 0px; //not sure why the border
    bottom: 0px; //not sure why the border
    background-color: #fbfcf7 !important;
    background-image: url(pics/pittsburgh.jpg); 
    background-size: cover;
    background-position: center center;
}

And perhaps Media Queries can control the size of the image to respond to different sizes?