<button>Get New Ones</button>

<div class="avatars-grid">
  <img src="https://avatars.dicebear.com/api/adventurer/1.svg" alt="" />
  <img src="https://avatars.dicebear.com/api/avataaars/1.svg" alt="" />
  <img src="https://avatars.dicebear.com/api/human/1.svg" alt="" />
  <img src="https://avatars.dicebear.com/api/big-smile/1.svg" alt="" />
  <img src="https://avatars.dicebear.com/api/bottts/1.svg" alt="" />
  <img src="https://avatars.dicebear.com/api/micah/1.svg" alt="" />
</div>

<svg>

  <filter id="turbulence-1">
    <feTurbulence type="fractalNoise" baseFrequency="0.001" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-2">
    <feTurbulence type="fractalNoise" baseFrequency="0.0015" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-3">
    <feTurbulence type="fractalNoise" baseFrequency="0.002" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-4">
    <feTurbulence type="fractalNoise" baseFrequency="0.0025" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-5">
    <feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

</svg>

@import url(https://fonts.googleapis.com/css?family=Just+Another+Hand);

img {
  animation: squigglevision 0.4s infinite alternate;
  max-width: 100%;
  &:nth-child(2), &:nth-child(4) {
    animation-delay: 0.1s;
  }
  &:nth-child(3), &:nth-child(5) {
    animation-delay: 0.2s;
  }
  &:nth-child(4) {
    animation-delay: 0.3s;
  }
}

@keyframes squigglevision {
  0% {
    filter: url("#turbulence-1");
  }
  25% {
    filter: url("#turbulence-2");
  }
  50% {
    filter: url("#turbulence-3");
  }
  75% {
    filter: url("#turbulence-4");
  }
  100% {
    filter: url("#turbulence-5");
  }
}

h1 {
  font-weight: 400;
  font-size: 40px;
  a {
    display: block;
    font-size: 60px;
    text-decoration: none;
  }
}

button {
  animation: squigglevision 0.4s infinite alternate;
  color: white;
  border: 2px solid white;
  background: none;
  font-size: 28px;
  border-radius: 3px;
  margin-bottom: 20px;
  padding: 10px;
  font-family: inherit;
  text-transform: uppercase;
}

body {
  background: #333;
  font-family: 'Just Another Hand', cursive;
  padding: 20px;
  text-align: center;
}

.avatars-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

$("button").on("click", function() {
  $("img").attr("src", (_, src) => {
    const regex = /\d/;
    return src.replace(regex, Math.random());
  });
});