Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
= pattern($type: horizontal, $size : 10px, $offset: 50%, $colorFirst: #000, $colorSecond: white)
  @if $type == vertical 
    $type: to left
  @if $type == horizontal
    $type: to top
  background-image: linear-gradient($type,  $colorFirst $offset,$colorSecond $offset,$colorSecond 100%)
  // background-image: radial-gradient($type,  $colorFirst $offset,$colorSecond $offset,$colorSecond 100%)
  background-size: $size $size
  background-position: 50% 50%
  
@keyframes rotate
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)
  
@keyframes scale
  0%
    transform: scale(1,1)
  100%
    transform: scale(4,4)

body 
  width: 100%
  height: 100%
  position: absolute
  margin: 0
  padding: 0
  
.layer
  display: block
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  width: 100%
  height: 100%
  display: flex
  flex-direction: column
  justify-content: center
  *
    margin: 0 auto
    overflow: hidden
    display: flex
    flex-direction: column
    justify-content: center
$color: rgb(90, 175, 230)

.background
  width: 100%
  height: 100%
  +pattern(horizontal, 8px, 50%, $color, yellow)
  animation: scale ease-in-out 10s infinite alternate
  
.backgroundagain
  width: 100%
  height: 100%
  +pattern(horizontal, 10px, 20%, $color)
  animation: scale ease-in-out 13.6666s infinite alternate

.circle-01
  width: 80vw
  height: 80vw
  // clip-path: polygon(50% 0%, 10% 80%, 90% 80%)
  border-radius: 40vw
  +pattern(horizontal, 40px, 50%, $color, blue)
  animation: rotate linear 13.3333s infinite reverse
.circle-02
  width: 60vw
  height: 60vw
  border-radius: 30vw
  +pattern(horizontal, 20px, 50%, $color)
  animation: rotate linear 10s infinite
.circle-03
  width: 30vw
  height: 30vw
  border-radius: 25vw
  +pattern(horizontal, 30px, 50%, $color)
  animation: rotate linear 6s infinite reverse
  
@keyframes sine
  0%
    transform: scale(1,1)
  100%
    transform: scale(0.4,0.4)
.layer-cube
  mix-blend-mode: add
  // transform: scale(2)
  // transform-origin: 50% 50%
  // animation: rotate ease-in-out 2s infinite alternate
.cube-wrapper
  width: 10vw
  height: 10vw
  animation: rotate ease-in-out 8s infinite alternate
  border-radius: 10vw
.cube
  width: 10vw
  height: 10vw
  position: absolute
  left: 50%
  top: 50%
  margin-left: -5vw
  margin-top: -5vw
  &.cube-top
    clip-path: polygon(50% 0%, 100% 25%, 50% 50%, 0% 25%)
    +pattern(vertical, 15px, 30%, white)
    animation: scale ease-in-out 0.5s infinite alternate
  &.cube-left
    clip-path: polygon(0% 25%, 50% 50%, 50% 100%, 0% 75%)
    +pattern(vertical, 10px, 20%, white)
    animation: scale ease-in-out 0.8s infinite alternate
  &.cube-right
    clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%)
    +pattern(vertical, 20px, 40%, white)
    animation: scale ease-in-out 1s infinite alternate
    
    
.sine-01
  animation: sine ease-in-out 3.3333s infinite alternate
.sine-02
  animation: sine ease-in-out 8s infinite alternate
.sine-03
  animation: sine ease-in-out 12s infinite alternate
  
*
  mix-blend-mode: difference
  opacity: 1

Frontend Forever App