JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
  <defs>    
    <clipPath id="clip-path">
      <rect id="rect" x="0" y="0" height="346" width="250"/>
    </clipPath>
  </defs>
  
  <path fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
  <path clip-path="url(#clip-path)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>  
</svg>

CSS

body {
  background: #333;
  padding: 2em;
}

svg {
  display: block;
  left: 50%;
  max-width: 8em;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
}

#rect {
  animation: slideOver 5s linear infinite;
}

@keyframes slideOver {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}