JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="pattern one"></div>
<div class="pattern two"></div>
<div class="pattern three"></div>

SCSS

$color2: #e00e63;
$color3: #000000;
$color1: #3e66af;

pattern {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: red;
}

pattern.one {
  background-color: $color1;
  background-image: linear-gradient(30deg, $color2 12%, transparent 12.5%, transparent 87%, $color2 87.5%, $color2),
  linear-gradient(150deg, $color2 12%, transparent 12.5%, transparent 87%, $color2 87.5%, $color2),
  linear-gradient(30deg, $color2 12%, transparent 12.5%, transparent 87%, $color2 87.5%, $color2),
  linear-gradient(150deg, $color2 12%, transparent 12.5%, transparent 87%, $color2 87.5%, $color2),
  linear-gradient(60deg, $color3 25%, transparent 25.5%, transparent 75%, $color3 75%, $color3), 
  linear-gradient(60deg, $color3 25%, transparent 25.5%, transparent 75%, $color3 75%, $color3);
  background-size:40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
  
	animation: main 20s ease infinite;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}


@keyframes main {
	0% {
	  background-color: green;
	}
	50% {
	  background-color: yellow;
	}
	100% {
	  background-color: pink;
	}
}