<form class="form" action="">
  <svg class="form__bg">
    <defs>
      <mask id="form__mask" x="0">
        <rect width="100%" height="100%" rx="50" fill="#fff"/>
        <rect x="100%" y="100" width="100%" height="50" rx="25" fill="#000" transform="translate(-50 0)"/>
        <rect x="0%" y="200" width="100%" height="75" rx="37.5" fill="#fff" transform="translate(-80 0)"/>
        <rect x="-100%" y="150" width="100%" height="50" rx="25" fill="#000" transform="translate(50 0)"/>
        <rect x="0%" y="250" width="100%" height="100" rx="50" fill="#fff" transform="translate(80 0)"/>
      </mask>
    </defs>
    <rect mask="url(#form__mask)" x="-100%" width="300%" height="100%" fill="#82b7bc"/>
  </svg>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id illum minus similique voluptatibus officia cupiditate nisi aperiam! Maxime, harum neque consequatur ipsa corporis illum iusto sequi quae, laudantium quam laborum?
</form>

* {
  box-sizing: border-box;
}

body {
  background:
    linear-gradient(to right, #0001 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(to bottom, #0001 1px, transparent 1px) 0 0 / 8px 8px;
}

.form {
  position: relative;
  margin: 0 auto;
  padding: 15px 75px;
  width: 75%;
  z-index: 0;
  font-size: 2rem;
}

.form__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

import anime from "https://cdn.skypack.dev/animejs@3.2.1";

anime({
  targets: "#form__mask > rect",
  transform: "translate(0 0)",
  loop: true,
  easing: "linear",
  direction: "alternate"
})