jahredhope/multi-line-wave-animation.html

## multi-line-wave-animation.html
<html>
  <head>
    <style>
      body {
        background-color: hsl(220deg, 13%, 19%);
        color: white;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol";
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }
      h1 {
        font-weight: 500;
        font-size: 5vh;
      }

      .line-wave {
        position: fixed;
        width: 200%;
        height: 100vh;
        left: 0;
        top: 0;
        overflow: visible;
        pointer-events: none;
        z-index: -1;

        --move-period: 30s;
        --scale-period: 25s;

        --color-one: hsla(60, 80%, 50%, 0.3);
        --color-two: hsla(170, 100%, 50%, 0.3);
        --color-three: hsla(290, 100%, 50%, 0.3);
      }

      .line-wave path {
        transform-origin: center;
        stroke-width: 2;
        fill: transparent;
      }

      .line-wave g:nth-child(1) {
        animation: move-across var(--move-period) infinite linear;
      }
      .line-wave g:nth-child(2) {
        animation: move-across calc(var(--move-period) * 1.2)
          calc(var(--move-period) * -0.33) infinite linear;
      }
      .line-wave g:nth-child(3) {
        animation: move-across calc(var(--move-period) * 1.4)
          calc(var(--move-period) * -0.66) infinite linear;
      }
      .line-wave g:nth-child(1) path {
        animation: scale-y calc(var(--scale-period))
          calc(var(--scale-period) * -0.2) infinite ease;
        stroke: var(--color-one);
      }
      .line-wave g:nth-child(2) path {
        animation: scale-y calc(var(--scale-period) * 1.2)
          calc(var(--scale-period) * -0.53) infinite ease;
        stroke: var(--color-two);
      }
      .line-wave g:nth-child(3) path {
        animation: scale-y calc(var(--scale-period) * 1.1)
          calc(var(--scale-period) * -0.86) infinite ease;
        stroke: var(--color-three);
      }

      @keyframes scale-y {
        0% {
          transform: scaleY(30%);
        }

        50% {
          transform: scaleY(-30%);
        }

        100% {
          transform: scaleY(30%);
        }
      }

      @keyframes move-across {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(-50%);
        }
      }
    </style>
  </head>
  <body>
    <svg
      class="line-wave"
      preserveAspectRatio="none"
      viewBox="0 0 340 160"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g>
        <path
          d="M0 80  C 30 10, 55 10, 85 80 S 140 150, 170 80 C 200 10, 225 10, 255 80 S 310 150, 340 80"
        />
      </g>
      <g>
        <path
          d="M0 80  C 30 10, 55 10, 85 80 S 140 150, 170 80 C 200 10, 225 10, 255 80 S 310 150, 340 80"
        />
      </g>
      <g>
        <path
          d="M0 80  C 30 10, 55 10, 85 80 S 140 150, 170 80 C 200 10, 225 10, 255 80 S 310 150, 340 80"
        />
      </g>
    </svg>
    <h1>😌</h1>
  </body>
</html>
	<html>
	<head>
	<style>
	body {
	background-color: hsl(220deg, 13%, 19%);
	color: white;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
	"Segoe UI Symbol";
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	}
	h1 {
	font-weight: 500;
	font-size: 5vh;
	}

	.line-wave {
	position: fixed;
	width: 200%;
	height: 100vh;
	left: 0;
	top: 0;
	overflow: visible;
	pointer-events: none;
	z-index: -1;

	--move-period: 30s;
	--scale-period: 25s;

	--color-one: hsla(60, 80%, 50%, 0.3);
	--color-two: hsla(170, 100%, 50%, 0.3);
	--color-three: hsla(290, 100%, 50%, 0.3);
	}

	.line-wave path {
	transform-origin: center;
	stroke-width: 2;
	fill: transparent;
	}

	.line-wave g:nth-child(1) {
	animation: move-across var(--move-period) infinite linear;
	}
	.line-wave g:nth-child(2) {
	animation: move-across calc(var(--move-period) * 1.2)
	calc(var(--move-period) * -0.33) infinite linear;
	}
	.line-wave g:nth-child(3) {
	animation: move-across calc(var(--move-period) * 1.4)
	calc(var(--move-period) * -0.66) infinite linear;
	}
	.line-wave g:nth-child(1) path {
	animation: scale-y calc(var(--scale-period))
	calc(var(--scale-period) * -0.2) infinite ease;
	stroke: var(--color-one);
	}
	.line-wave g:nth-child(2) path {
	animation: scale-y calc(var(--scale-period) * 1.2)
	calc(var(--scale-period) * -0.53) infinite ease;
	stroke: var(--color-two);
	}
	.line-wave g:nth-child(3) path {
	animation: scale-y calc(var(--scale-period) * 1.1)
	calc(var(--scale-period) * -0.86) infinite ease;
	stroke: var(--color-three);
	}

	@keyframes scale-y {
	0% {
	transform: scaleY(30%);
	}

	50% {
	transform: scaleY(-30%);
	}

	100% {
	transform: scaleY(30%);
	}
	}

	@keyframes move-across {
	0% {
	transform: translateX(0);
	}

	100% {
	transform: translateX(-50%);
	}
	}
	</style>
	</head>
	<body>
	<svg
	class="line-wave"
	preserveAspectRatio="none"
	viewBox="0 0 340 160"
	version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	>
	<g>
	<path
	d="M0 80 C 30 10, 55 10, 85 80 S 140 150, 170 80 C 200 10, 225 10, 255 80 S 310 150, 340 80"
	/>
	</g>
	<g>
	<path
	d="M0 80 C 30 10, 55 10, 85 80 S 140 150, 170 80 C 200 10, 225 10, 255 80 S 310 150, 340 80"
	/>
	</g>
	<g>
	<path
	d="M0 80 C 30 10, 55 10, 85 80 S 140 150, 170 80 C 200 10, 225 10, 255 80 S 310 150, 340 80"
	/>
	</g>
	</svg>
	<h1>😌</h1>
	</body>
	</html>