<div class="content">
  <section>
    <img src="https://images.unsplash.com/photo-1502311526760-ebc5d6cc0183?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f359ccb441c46d9265b2d27bf25b0391&auto=format&fit=crop&w=562&q=80" alt="Photo by Andy Watkins on Unsplash" height="350px" width="200px" class="image1"
    /> </section>
  <section>
    <img src="https://images.unsplash.com/photo-1455245737663-3edc3b61dd1a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=59b8de4f8d04c0fa7ead62083bfe68bb&auto=format&fit=crop&w=1350&q=80" alt="Photo by Andy Watkins on Unsplash" height="250px" width="300px" class="image2"
    />
  </section>
  <section>
    <img src="https://images.unsplash.com/photo-1468413253725-0d5181091126?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=829ab8c0acb239927481da8cd0c48bd6&auto=format&fit=crop&w=1350&q=80" alt="Photo by Andy Watkins on Unsplash" height="250px" width="300px" class="image3"
    />
  </section>
  <section>
    <img src="https://images.unsplash.com/photo-1421790500381-fc9b5996f343?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ec2c9a8f8c3f6c867753cc37c1e64886&auto=format&fit=crop&w=634&q=80" alt="Photo by Andy Watkins on Unsplash" height="300px" width="250px" class="image4"
    />
  </section>
  <section> <img src="https://images.unsplash.com/photo-1481402665672-0a280f0e9845?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ecc068e10b08cacbee54845e8e07c1d4&auto=format&fit=crop&w=1353&q=80" alt="Photo by Andy Watkins on Unsplash" height="250px" width="300px"
      class="image5" /> </section>
  <section> <img src="https://images.unsplash.com/photo-1453791052107-5c843da62d97?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c69a546f8ae2bab8f8e605d58fa3ed67&auto=format&fit=crop&w=1350&q=80" alt="Photo by Andy Watkins on Unsplash" height="250px" width="300px"
      class="image6" /> </section>
</div>

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  background: #C6FF00;
}

.image1 {
  margin: 10px;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 75%,
    75% 75%,
    75% 100%,
    50% 75%,
    0% 75%
  );
  animation: clipOut 4s infinite;
}

.image2 {
  margin: 10px;
  clip-path: polygon(
    0% 20%,
    40% 20%,
    40% 0%,
    100% 50%,
    40% 100%,
    40% 80%,
    0% 80%
  );
  animation: clipUp 4s infinite;
}

.image3 {
  margin: 10px;
  clip-path: polygon(
    20% 0,
    0% 20%,
    30% 50%,
    0% 80%,
    20% 100%,
    50% 70%,
    80% 100%,
    100% 80%,
    70% 50%,
    100% 20%,
    80% 0%,
    50% 30%
  );
  animation: clipUp3 4s infinite;
}

.image4 {
  margin: 10px;
  clip-path: polygon(50% 0%, 65% 30%, 100% 30%, 75% 55%, 85% 100%, 50% 70%, 15% 100%, 25% 55%, 0% 30%, 35% 30%);
  animation: clipUp4 4s infinite;
}

.image5 {
  margin: 10px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: clipUp5 4s infinite;
}

.image6 {
  margin: 10px;
  clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
  animation: clipUp6 4s infinite;
}


@keyframes clipOut {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
}

@keyframes clipUp {
  from {
    clip-path: polygon(0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 50% 0%, 50% 0%);
  }
}

@keyframes clipUp3 {
  from {
    clip-path: polygon(80% 20%, 70% 20%, 60% 20%, 50% 20%, 40% 20%, 30% 20%, 30% 20%, 40% 20%, 50% 20%, 60% 20%, 70% 20%, 80% 20%);
  }
}

@keyframes clipUp4 {
  from {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
  }
}

@keyframes clipUp5 {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  }
}

@keyframes clipUp6 {
  from {
    clip-path: polygon(25% 25%, 50% 50%, 75% 75%, 100% 100%);
  }
}