html,body {
	width: 100%;
	height: 100%;
}

body {
	background-image: linear-gradient(to bottom right, cyan, magenta, orange, yellow);
}

@keyframes waterfall {
	0%		{transform: scale(1.0);fill: hsla(0, 100%, 100%, 1.0);}
	100%	{transform: scale(0.0);fill: hsla(0, 100%, 000%, 0.0);}
}

path {
	fill: hsla(0, 100%, 100%, 1.0);
	animation: waterfall 8s linear backwards infinite;
}

/* ROW ONE */
/* ROW TWO */
/* ROW THREE */
/* ROW FOUR */
path:nth-of-type(01) {animation-delay: -08.00s;transform-origin: 019% 100%;}
	path:nth-of-type(02) {animation-delay: -07.92s;transform-origin: 046% 100%;}
		path:nth-of-type(03) {animation-delay: -07.84s;transform-origin: 061% 100%;}
			path:nth-of-type(04) {animation-delay: -07.76s;transform-origin: 074% 100%;}
path:nth-of-type(05) {animation-delay: -07.68s;transform-origin: 013% 100%;}
	path:nth-of-type(06) {animation-delay: -07.60s;transform-origin: 050% 100%;}
		path:nth-of-type(07) {animation-delay: -07.52s;transform-origin: 070% 100%;}
			path:nth-of-type(08) {animation-delay: -07.44s;transform-origin: 078% 100%;}
path:nth-of-type(09) {animation-delay: -07.36s;transform-origin: 018% 100%;}
	path:nth-of-type(10) {animation-delay: -07.28s;transform-origin: 042% 100%;}
		path:nth-of-type(11) {animation-delay: -07.20s;transform-origin: 056% 100%;}
			path:nth-of-type(12) {animation-delay: -07.12s;transform-origin: 089% 100%;}
path:nth-of-type(13) {animation-delay: -07.04s;transform-origin: 017% 100%;}
	path:nth-of-type(14) {animation-delay: -06.96s;transform-origin: 045% 100%;}
		path:nth-of-type(15) {animation-delay: -06.88s;transform-origin: 054% 100%;}
			path:nth-of-type(16) {animation-delay: -06.80s;transform-origin: 071% 100%;}