<!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.