JSFiddle - React, Tailwind, and code Playground

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<center>
    <div class="r0tate">
    <div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
</div>

<svg class="svg-content" viewBox="0 0 616.8 599" preserveAspectRatio="xMinYMin meet" height="0" width="0">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1"></path></clipPath>
</svg>
</div>
</center>

CSS

.imageHero {
  max-width: 60%;
	max-height: 60%;
	width: 65vh;
  height: 65vh;
  margin: 40px;
  clip-path: url('#my-clip-path');
  animation: clipRotateAnim 6s linear infinite;
  position: relative;
  overflow: hidden;
}

.imageHero::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: inherit;
  animation-direction: reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg);
  }
}

.r0tate {
		display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

.svg-content { 
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}