<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<style>
		path {
			transform-origin: 50% 0%;
		}

		.background--custom {
			background-color: #FFFFFF;
			position: absolute;
			width: 100vw;
			height: 100vh;
			z-index: -1;
			top: 0;
			left: 0;
		}

		@keyframes path0 {
			0% {
				transform: rotate(10deg);
			}

			100% {
				transform: rotate(-10deg);
			}
		}

		@keyframes path1 {
			0% {
				transform: rotate(-20deg);
			}

			100% {
				transform: rotate(20deg);
			}
		}

		@keyframes path2 {
			0% {
				transform: rotate(20deg);
			}

			100% {
				transform: rotate(-20deg);
			}
		}
	</style>
</head>

<body>
	<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
		<path fill="#b007f2" fill-opacity="0.9" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path0 7.142857142857143s linear infinite alternate;" />
		<path fill="#8fed72" fill-opacity="0.5" d="M-100 -100L200 -100L200 70L-100 70Z" style="animation: path1 4.672897196261682s linear infinite alternate;" />
		<path fill="#01590a" fill-opacity="0.1" d="M-100 -100L200 -100L200 30L-100 30Z" style="animation: path2 4.237288135593221s linear infinite alternate;" />
	</svg>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.