body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
}

.equalizer {
	width: 10em;
	height: 10em;
	display: flex;
	justify-content: space-between;
}

.equalizer span {
	width: 1.5em;
	background: linear-gradient(red, yellow, green);
	animation: up-and-down 2s linear infinite calc(-1 * 0.4s * var(--n));
}

.equalizer span:nth-child(1) {
	--n: 1;
}

.equalizer span:nth-child(2) {
	--n: 2;
}

.equalizer span:nth-child(3) {
	--n: 3;
}

.equalizer span:nth-child(4) {
	--n: 4;
}

.equalizer span:nth-child(5) {
	--n: 5;
}

@keyframes up-and-down{
	0%, 100% {
		clip-path: inset(27% 0 0 0);
	}

	10% {
		clip-path: inset(17% 0 0 0);
	}

	20% {
		clip-path: inset(55% 0 0 0);
	}

	30% {
		clip-path: inset(30% 0 0 0);
	}

	40% {
		clip-path: inset(13% 0 0 0);
	}

	50% {
		clip-path: inset(38% 0 0 0);
	}

	60% {
		clip-path: inset(80% 0 0 0);
	}

	70% {
		clip-path: inset(21% 0 0 0);
	}

	80% {
		clip-path: inset(0% 0 0 0);
	}

	90% {
		clip-path: inset(36% 0 0 0);
	}
}