<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
body {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

img {
  max-width: 100%;
}

div{
  background: url('https://bennettfeely.com/clippy/pics/pittsburgh.jpg'), linear-gradient(45deg, #3023AE 0%, #FF0099 100%);
  background-blend-mode: overlay, luminosity, screen, luminosity;
  background-size: cover;
  &:nth-child(1) img{
    clip-path: inset(5%);
  }
  &:nth-child(2) img{
    clip-path: inset(5% 15%);
  }
  &:nth-child(3) img{
    clip-path: inset(5% 10% 15% );
  }
  &:nth-child(4) img {
    clip-path: inset(5% 10% 15% 20%);
  }
  &:nth-child(5) img {
    clip-path: inset(5% 10% 15% 20% round 10px);
  }
  &:nth-child(6) img {
    clip-path: inset(5% 10% 15% 20% round 10px 20px);
  }
  &:nth-child(7) img {
    clip-path: inset(5% 10% 15% 20% round 10px 20px 30px);
  }
  &:nth-child(8) img {
    clip-path: inset(5% 10% 15% 20% round 10px 20px 30px 40px);
  }
  &:nth-child(9) img {
    clip-path: inset(10% 20% 5% 10% round 68% 32% 100% 0%);
  }
  &:nth-child(10) img {
    clip-path: inset(10% 20% 5% 10% round 98% 2% 100% 0% / 99% 0% 100% 1%);
  }
  &:nth-child(11) img {
    clip-path: inset(10% round 50%);
  }
  &:nth-child(12) img {
    clip-path: inset(20% 5% round 80%/50%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.