Wave backgrounds with SVG and CSS

.bottom-wave {
  position: absolute;
  bottom: -2px;
  width: 100%;

  .waves {
    position: relative;
    width: 100%;
    height: 5vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 60px;
    max-height: 150px;

    .parallax > use {
      animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }
    .parallax > use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 10s;
    }
    .parallax > use:nth-child(2) {
      animation-delay: -5s;
      animation-duration: 10s;
    }
    .parallax > use:nth-child(3) {
      animation-delay: -7s;
      animation-duration: 10s;
    }
    .parallax > use:nth-child(4) {
      animation-delay: -1s;
      animation-duration: 10s;
    }
  }
}

// Animation for bottom-wave
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

<div class="bottom-wave">
	<svg
		class="waves"
		preserveAspectRatio="none"
		shape-rendering="auto"
		viewBox="0 24 150 28"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
	>
		<defs>
			<path
				d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
				id="gentle-wave"
			></path>
		</defs>
		<g class="parallax">
-   		<use fill="rgba(255, 0, 255, 0.1)" x="48" xlinkHref="#gentle-wave" y="0"></use>
-     		<use fill="rgba(255, 0, 255, 0.05)" x="48" xlinkHref="#gentle-wave" y="3"></use>
-     		<use fill="rgba(255, 0, 255, 0.01)" x="48" xlinkHref="#gentle-wave" y="5"></use>
-     		<use fill="rgba(255, 0, 255, 0.005)" x="48" xlinkHref="#gentle-wave" y="7"></use>
+     		<use fill="{{ post.title | getRandomColor(loop.index0, 0) }}" x="48" xlink:href="#gentle-wave" y="0"></use>
+     		<use fill="{{ post.title | getRandomColor(loop.index0, 1) }}" x="48" xlink:href="#gentle-wave" y="3"></use>
+     		<use fill="{{ post.title | getRandomColor(loop.index0, 2) }}" x="48" xlink:href="#gentle-wave" y="5"></use>
+     		<use fill="{{ post.title | getRandomColor(loop.index0, 3) }}" x="48" xlink:href="#gentle-wave" y="7"></use>
		</g>
	</svg>
</div>

// Get random colors (from a predefined set) for bottom-wave in blog cards
eleventyConfig.addFilter("getRandomColor", function (name, _postIdx, idx) {
  // Get the same number for each name -> colors are fixed for each name
  function getHash(input, numColors) {
    var hash = 0,
      len = input.length;
    for (var i = 0; i < len; i++) {
      hash = (hash << 5) - hash + input.charCodeAt(i);
      hash |= 0; // to 32bit integer
    }
    return Math.abs(hash) % numColors;
  }
  const color = waveColors[getHash(name, waveColors.length)];

  // Based on index -> new posts make old posts' colors change
  // function getHash(input, numColors) {
  //   return input % numColors;
  // }
  // const color = waveColors[getHash(_postIdx, waveColors.length)];

  switch (idx) {
    case 0:
      return `rgba(${color}, 0.1)`;
    case 1:
      return `rgba(${color}, 0.05)`;
    case 2:
      return `rgba(${color}, 0.01)`;
    case 3:
      return `rgba(${color}, 0.005)`;
  }
});