JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <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>
  </body>
</html>

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: absolute;
  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: flex;
  justify-content: center;
  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%;
}