$color: hsl(random(360),50%,50%); $size: 10vw;

*, *:before, *:after { box-sizing: border-box; }
#frame {
  width: 100vw;
  display: flex;
  flex-flow: column;
  .pattern {
    width: 100vw; height: 100vh;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: $size $size !important;
    // PATTERN 1
    &:nth-child(1) {
      background: shade($color,10%) repeating-radial-gradient(
        $color 0%,$color 50%,
        transparent 50%,transparent 75%,
        $color 75%,$color 90%,
        transparent 90%,transparent 100%
      );
    }
    // PATTERN 2
    &:nth-child(2) {
      background: shade($color,10%) repeating-radial-gradient(
        $color 0%,$color 25%,
        shade($color,5%) 25%,shade($color,5%) 50%,
        $color 50%,$color 75%,
        transparent 75%,transparent 100%
      );
    }
    // PATTERN 3
    &:nth-child(3) {
      background: shade($color,5%) repeating-radial-gradient(
        $color 0%,$color 10%,
        shade($color,30%) 10%,shade($color,30%) 20%,
        $color 20%,$color 30%,
        shade($color,20%) 30%,shade($color,20%) 40%,
        $color 40%,$color 50%,
        shade($color,10%) 50%,shade($color,10%) 60%,
        $color 60%,$color 70%,
        transparent 70%, transparent 80%
      );
    }
    // PATTERN 4
    &:nth-child(4) {
      background: shade($color,15%) repeating-radial-gradient(
        $color 0%,$color 25%,
        transparent 25%,transparent 35%,
        $color 35%,$color 45%,
        transparent 45%,transparent 75%,
        $color 75%,$color 80%,
        transparent 80%, transparent 100%
      );
    }
    // PATTERN 5
    &:nth-child(5) {
      background: shade($color,10%) repeating-radial-gradient(
        $color 0%,$color 10%,
        transparent 10%,transparent 20%,
        $color 20%,$color 30%,
        transparent 30%,transparent 40%,
        $color 40%,$color 50%,
        transparent 50%,transparent 100%
      );
    }
    // PATTERN 6
    &:nth-child(6) {
      background: shade($color,5%) repeating-radial-gradient(
        $color 0%,$color 5%,
        shade($color,30%) 5%,shade($color,30%) 10%,
        $color 10%,$color 15%,
        transparent 15%,transparent 20%,
        $color 20%,$color 25%,
        shade($color,20%) 25%,shade($color,20%) 30%,
        $color 30%, $color 35%,
        transparent 35%,transparent 40%,
        $color 40%,$color 45%,
        shade($color,10%) 45%,shade($color,10%) 50%,
        $color 50%,$color 60%,
        transparent 60%,transparent 70%,
        $color 70%,$color 80%,
        transparent 80%,transparent 100%
      );
    }
  }
}