Animating Gradients (Stripes, Circles, etc.)

1

I wanted to try some things out with animating gradients. The end result is this: https://twitter.com/kirupa/status/1012929724463497217

The full markup for it is as follows:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>Animating Gradients</title>
  <style>
    body {
      padding: 25px;
    }

    #outerContainer {
      display: grid;
      grid-template-columns: 200px 200px;
      grid-gap: 40px;
    }

    .container {
      width: 200px;
      height: 200px;
      background-color: #3891A6;
    }


    .horizontalStripes {
      background-image: linear-gradient( 90deg,
      #F42272,
      #F42272 20px,
      #F397D6 20px,
      #F397D6 40px);
      animation: slide 1s linear infinite;
      background-size: 40px 100%;
    }

    @keyframes slide {
      to {
        background-position: 40px 100%;
      }
    }

    .diagonalStripes {
      background-image: repeating-linear-gradient( -45deg,
      #1F505B,
      #1F505B 20px,
      #3891A6 20px,
      #3891A6 40px);
      background-size: 200% 200%;
      animation: diagonalSlide 2s linear infinite;
    }

    @keyframes diagonalSlide {
      100% {
        background-position: 100% 100%;
      }
    }

    .arrows {
      background-image: linear-gradient( 45deg,
      #333333,
      #333333 20px,
      #666 20px,
      #666 40px);
      background-size: 20px 20px;
      animation: arrowsSlide 4s linear infinite;
    }

    @keyframes arrowsSlide {
      to {
        background-position: 100% -400px;
      }
    }

    .radialStripes {
      background-image: radial-gradient( circle,
      #03CEA4,
      #03CEA4 20px,
      #FCD757 20px,
      #FCD757 40px);
      background-size: 40px 40px;
      background-position: 0% 0%;
      animation: radial 1s linear alternate infinite;
    }

    @keyframes radial {
      100% {
        background-position: -100px -100px;
        background-size: 100px 100px;
      }
    }
  </style>
</head>

<body>

  <div id="outerContainer">
    <div class="container diagonalStripes">

    </div>

    <div class="container horizontalStripes">

    </div>

    <div class="container arrows">

    </div>

    <div class="container radialStripes">

    </div>

</body>

</html>

Cheers,
Kirupa