clipPath cut off by container - html

Question

So I am pretty close to my desired effect, the issue though is that the clipPath I am using while rotating gets cut off by the container. Is there a way to remedy this? I tried messing with the viewBox and other properties but to no avail. I am not super well versed in using clipPath. Would using CSS clip-path be a better call and just rotate a pseudo element the opposite way?
.red {
background-image: url('https://cdn.mos.cms.futurecdn.net/u8wSHMmMMXzZuAFBCmcsCK-650-80.jpg');
background-size: 90%;
height: 100vh;
width: 700px;
clip-path: url(#clipPolygon);
position: relative;
z-index: 2;
margin-top: 120px;
margin-left: 250px;
}
.bg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
svg {
}
defs {
transition: all 5s;
transform: rotate(360deg);
}
<div class="red">
<svg>
<defs>
<clipPath id="clipPolygon">
<polygon points="200 250,400 100,300 50,0 0">
<animateTransform attributeName="transform" begin="0s" dur="2.5s" type="rotate" from="360 160 160" to="0 160 160" repeatCount="indefinite"/>
</polygon>
</clipPath>
</defs>
</svg>
</div>
<div class="bg">
<img src="https://www.mcgilvraydesign.com/img/bgdemo3.jpg" alt="">
</div>

Answer 1

You can use your polygon as a CSS mask then you can easily handle the rotation using two elements rotating in opposite direction
.red {
background:url(https://www.mcgilvraydesign.com/img/bgdemo3.jpg) center/contain no-repeat;
min-height:350px;
height: 100vh;
overflow:hidden;
}
.red > div {
/* control the mask here */
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0 400 300"><polygon points="200 250,400 100,300 50,0 0"/></svg>')
center/ /* position */
300px 200px /* size */
no-repeat;
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0 400 300"><polygon points="200 250,400 100,300 50,0 0"/></svg>')
center/
300px 200px
no-repeat;
height:100%;
position:relative;
animation:rotate 2s linear infinite;
}
.red > div::before {
content:"";
position:absolute;
/*big values here to avoid the cut effet*/
top:-100%;
left:-100%;
right:-100%;
bottom:-100%;
/* */
/* Control the skull here */
background: url('https://cdn.mos.cms.futurecdn.net/u8wSHMmMMXzZuAFBCmcsCK-650-80.jpg')
50% 45%/ /* position */
22% auto /* size*/
no-repeat,
#fff;
animation:inherit;
animation-direction:reverse;
}
#keyframes rotate {
to {
transform:rotate(-360deg);
}
}
body {
margin:0;
}
<div class="red">
<div></div>
</div>