wavey flag in pure CSS

flag.css

.flag {
	--stagger-delay: 100ms;
	--loop-time: 500ms;
	--billow: 20px;
	--columns: 5;
	--roundedness: 1em;
	--size: 200px;

	height: var(--size);
	width: calc(round(var(--size)/var(--columns), 1px) * var(--columns) * 2);
	display: flex;
	flex-direction: row;

	.column {
		display: flex;
		flex-direction: column;
		width: 100%;

		@supports (x: attr(data-column type(<number>))) {
			animation: oscillate var(--loop-time) infinite;
			animation-direction: alternate;
			animation-timing-function: ease-in-out;
			animation-fill-mode: backwards;
			animation-delay: calc(-1 * var(--stagger-delay) * (var(--columns) - attr(data-column type(<number>))));

			--offset: calc(var(--billow)/var(--columns) * attr(data-column type(<number>)));
		}

		&:first-child { border-radius: var(--roundedness) 0 0 var(--roundedness); }
		&:last-child { border-radius: 0 var(--roundedness) var(--roundedness) 0; }

		.pride & {
			background-image: linear-gradient(
				to bottom,
				#e40303 0% 16.67%,
				#ff8c00 16.67% 33.33%,
				#ffff41 33.33% 50%,
				#008026 50% 66.67%,
				#24408e 66.67% 83.33%,
				#732982 83.33% 100%
			);
		}

		.lesbian & {
			background-image: linear-gradient(
				to bottom,
				#ff7a5c  0% 20%,
				#ff9a56  20% 40%,
				#ffffff  40% 60%,
				#d161d3  60% 80%,
				#a20061  80% 100%
			);
		}

		.gay-men & {
			background-image: linear-gradient(
				to bottom,
				#002aff  0% 14.29%,
				#0052ff  14.29% 28.57%,
				#00d4ff  28.57% 42.86%,
				#ffffff  42.86% 57.14%,
				#00d4ff  57.14% 71.43%,
				#0052ff  71.43% 85.71%,
				#002aff  85.71% 100%
			);
		}

		.non-binary & {
			background-image: linear-gradient(
				to bottom,
				#ffff33  0% 25%,
				#ffffff  25% 50%,
				#9c4dff  50% 75%,
				#000000  75% 100%
			);
		}

		.agender & {
			background-image: linear-gradient(
				to bottom,
				#000000  0% 14.29%,
				#bfbfbf  14.29% 28.57%,
				#ffffff  28.57% 42.86%,
				#b4f684  42.86% 57.14%,
				#ffffff  57.14% 71.43%,
				#bfbfbf  71.43% 85.71%,
				#000000  85.71% 100%
			);
		}

		.asexual & {
			background-image: linear-gradient(
				to bottom,
				#000000  0% 25%,
				#a3a3a3  25% 50%,
				#ffffff  50% 75%,
				#810081  75% 100%
			);
		}

		.demisexual & {
			background-image: linear-gradient(
				to bottom,
				#3d3d3d  0% 20%,
				#a6a6a6  20% 40%,
				#ffffff  40% 60%,
				#d60082  60% 80%,
				#3d3d3d  80% 100%
			);
		}

		.pansexual & {
			background-image: linear-gradient(
				to bottom,
				#ff1b8d  0% 33.33%,
				#ffda00  33.33% 66.67%,
				#1bbdff  66.67% 100%
			);
		}

		.bisexual & {
			background-image: linear-gradient(
				to bottom,
				#d60082  0% 40%,
				#9b4f96  40% 60%,
				#0038a8  60% 100%
			);
		}

		.genderfluid & {
			background-image: linear-gradient(
				to bottom,
				#ff75a2  0% 20%,
				#ffffff  20% 40%,
				#be18d6  40% 60%,
				#000  60% 80%,
				#333ebd  80% 100%
			);
		}

		.genderqueer & {
			background-image: linear-gradient(
				to bottom,
				#b4f8f8  0% 33.33%,
				#ffffff  33.33% 66.67%,
				#ffb58d  66.67% 100%
			);
		}

		.aromantic & {
			background-image: linear-gradient(
				to bottom,
				#3ba740  0% 20%,
				#a8d8ea  20% 40%,
				#ffffff  40% 60%,
				#a6a6a6  60% 80%,
				#000000  80% 100%
			);
		}

		.demiromantic & {
			background-image: linear-gradient(
				to bottom,
				#3d3d3d  0% 20%,
				#a6a6a6  20% 40%,
				#ffffff  40% 60%,
				#ff1b8d  60% 80%,
				#3d3d3d  80% 100%
			);
		}


		.trans & {
			background-image: linear-gradient(
				to bottom,
				#5bcffb  0% 20%,
				#f5abb9 20% 40%,
				#ffffff 40% 60%,
				#f5abb9 60% 80%,
				#5bcffb 80% 100%
			);
		}
	}
}

@keyframes oscillate {
	from { transform: translateY(var(--offset)); }
	to { transform: translateY(calc(-1 * var(--offset))); }
}

usage.html

<div class="flag trans">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>