Painting Club

              
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      border-radius: 50%;
      width: 9cm;
      height: 5cm;
    }
    &[circle="one"] {
      top: 4cm;
      background: linear-gradient(90deg,black 0%,grey 50%,white 100%);
      transform: matrix(1, 2, 3, 4, 5, 6);
    }
    &[circle="two"] {
      left: 2cm;
      top: 4cm;
      opacity: 0.5;
      background: black;
      &:nth-of-type(1) {
        left: 4cm;
        top: 14cm;
        opacity: 0.8;
      }
    }
    &[circle="three"] {
      border-left: 20px solid;
      border-bottom: 15px solid black;
      transform: rotateX(12deg),scaleX(-1);
      width: 3.5cm;
      height: 11cm;
      left: 2cm;
      top: 1cm;
      background: lightgrey;
    }
    &[rectangle="four"] {
      border: 10px dotted black;
      width: 3cm;
      height: 2cm;
      left: 6cm;
      top: 13cm;
      background: lightgrey;
    }
  }
}

inc/03-26-20/css/style.scss
→ Transition through printableArea

              
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      border-radius: 50%;
      width: 19cm;
      height: 5cm;
    }
    &[circle="one"] {
      top: 14cm;
      opacity: 0.5;
      background: linear-gradient(90deg,black 0%,grey 50%,white 100%);
    }
    &[circle="two"] {
      left: 2cm;
      top: 4cm;
      background: black;
    }
    &[circle="three"] {
      border-left: 20px solid;
      border-bottom: 5px dotted black;
      transform: rotateX(2deg),scaleX(-1);
      width: 1.5cm;
      height: 11cm;
      left: 12cm;
      top: 1cm;
      background: lightgrey;
    }
    &[rectangle="four"] {
      border: 10px dotted black;
      width: 6cm;
      height: 3cm;
      position: absolute;
      left: 6cm;
      top: 13cm;
      background: lightgrey;
      transform: matrix(1, 2, 3, 4, 5, 6);
    }
  }
}

inc/04-02-20/css/style.scss
→ Transition through printableArea

              
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[rectangle] {
      left: 13cm;
      opacity: 0.6;
    }
    &[circle] {
      border-radius: 0;
      width: 14cm;
      height: 5cm;
    }
    &[circle="one"] {
      top: 6cm;
      background: linear-gradient(90deg,black 0%,grey 70%,white 90%);
      transform: matrix(1, 2, 3, 4, 5, 6);
    }
    &[circle="two"] {
      left: 2cm;
      top: 14cm;
      background: black;
      &:nth-of-type(even) {
        left: 4cm;
        top: 4cm;
        opacity: 0.8;
      }
    }
    &[circle="three"] {
      border-left: 20px solid;
      border-bottom: 5px solid grey;
      transform: rotateX(10deg),scaleX(-11);
      width: 3.5cm;
      height: 6cm;
      left: 2cm;
      top: 1cm;
      background: grey;
      &:nth-of-type(odd) {
        left: 4cm;
        top: 14cm;
        opacity: 0.8;
      }
    }
    &[circle="four"] {
      border: 3px solid black;
      width: 4cm;
      height: 2cm;
      left: 16cm;
      top: 3cm;
    }
  }
}

inc/04-08-20/css/style.scss
→ Transition through printableArea

              
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      border-radius: 30%;
      width: 4cm;
      height: 5cm;
    }
    &[circle="one"] {
      top: 2cm;
      background: linear-gradient(90deg,black 0%,grey 70%,white 100%);
      transform: matrix(1, 2, 3, 4, 5, 6);
    }
    &[circle="two"] {
      left: 2cm;
      top: 14cm;
      opacity: 0.5;
      background: black;
      &:nth-of-type(even) {
        left: 4cm;
        top: 4cm;
        opacity: 0.8;
      }
    }
    &[circle="three"] {
      border-left: 20px solid;
      border-bottom: 5px solid black;
      transform: rotateX(1deg),scaleX(-11);
      width: 3.5cm;
      height: 11cm;
      left: 2cm;
      top: 1cm;
      background: grey;
      &:nth-of-type(odd) {
        left: 4cm;
        top: 14cm;
        opacity: 0.8;
      }
    }
    &[rectangle="four"] {
      border: 1px dotted black;
      width: 4cm;
      height: 12cm;
      left: 6cm;
      top: 3cm;
      opacity: 0.8;
    }
  }
}

inc/04-09-20/css/style.scss
→ Transition through printableArea

              
$base-color: grey;
$border-dark: rgba($base-color, 0.88);
$size: 4cm;
$opacity: 1;
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      border-radius: 30%;
      width: $size*4;
      height: $size*2;
      border: 5px dotted $base-color;
      background-size: 5px 5px;
      background-image: radial-gradient(circle at 10px -5px, transparent 12px, $base-color 13px);
    }
    &[circle="one"] {
      top: $size*2;
      background: linear-gradient(90deg,$border-dark 0%,$base-color 70%,rgba($base-color, 0.28) 100%);
      transform: matrix(1, 2, 3, 4, 5, 6);
    }
    &[circle="two"] {
      left: ($size*2)/3;
      top: $size*3;
      opacity: 0.5;
      background: rgba($base-color,.98);
      &:nth-of-type(even) {
        left: $size*3;
        top: $size;
        opacity: $opacity/2;
      }
    }
    &[circle="three"] {
      transform: rotateX(1deg),scaleX(-11);
      width: $size/3;
      height: $size*3;
      left: $size*5;
      top: $size;
      background: darken($base-color,65%);
      &:nth-of-type(odd) {
        left: $size;
        top: ($size*6)/3;
        opacity: $opacity/3.3;
      }
    }
    &[rectangle="four"] {
      border: 1px dotted $base-color;
      width: $size;
      height: $size*4;
      left: $size;
      top: ($size*6)/3;
      opacity: $opacity/4.3;
    }
  }
}

inc/04-10-20/css/style.scss
→ Transition through printableArea

              
$base-color: black;
$border-dark: rgba($base-color, 0.38);
$size: 4cm;
$opacity: 1;
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      border-radius: 40%;
      width: $size*12;
      height: $size*20;
      border: 95px dotted black;
      background:$border-dark;
    }
    &[circle="one"] {
      top: $size*2;
      background: linear-gradient(90deg,$border-dark 0%,$base-color 70%,rgba($base-color, 0.28) 100%);
      transform: matrix(1, 2, 3, 4, 5, 6);
    }
    &[circle="two"] {
      border: 5px wavy grey;
      left: 0;
      top: $size*2;
      opacity: 0.2;
      background: rgba($base-color,.8);
      &:nth-of-type(even) {
        left: $size;
        top: $size*2;
        opacity: $opacity/2;
      }
    }
    &[circle="three"] {
      transform: rotateX(3deg),scaleX(-1);
      width: $size/4;
      height: $size*3;
      left: $size;
      top: $size;
      background: darken($base-color,65%);
      &:nth-of-type(odd) {
        left: $size*5;
        opacity: $opacity/2;
      }
    }
    &[rectangle="four"] {
      border: 15px dashed $base-color;
      width: $size*5;
      height: $size*4;
      background: darken($base-color,15%);
    }
  }
}

inc/04-13-20/css/style.scss
→ Transition through printableArea

              
$base-color: grey;
$border-dark: rgba($base-color, 0.98);
$size: 6cm;
$opacity: .5;
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      width: $size*12;
      height: $size*20;
      border: 95px dotted black;
      background:$border-dark;
    }
    &[circle="one"] {
      top: $size*2;
      background: linear-gradient(50deg,$border-dark 0%,$base-color 70%,rgba($base-color, 0.28) 100%);
      &:nth-of-type(even) {
        left: $size;
        top: $size*2;
        opacity: $opacity/2;
      }
    }
    &[circle="two"] {
      border: 112px dotted grey;
      left: 0;
      top: $size*2;
      opacity: 0.2;
      background: rgba($base-color,.8);
      transform: matrix(1, 2, 3, 4, 5, 6);
    }
    &[circle="three"] {
      transform: rotateX(3deg),scaleX(-1);
      width: $size/4;
      height: $size*3;
      left: $size;
      top: $size;
      background: darken($base-color,65%);
      &:nth-of-type(odd) {
        left: $size*5;
        opacity: $opacity/2;
        border: 115px dashed $base-color;
      }
    }
    &[rectangle="four"] {
      border-radius: 40%;
      width: $size*5;
      height: $size*4;
      background: darken($base-color,15%);
    }
  }
}

inc/04-15-20/css/style.scss
→ Transition through printableArea

              
$base-color: white;
$border-dark: rgba($base-color, 0.98);
$size: 6cm;
$opacity: .5;
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      width: $size*2;
      height: $size*20;
      border: 225px dotted black;
      opacity: 0.87;
      background:$border-dark;
    }
    &[circle="one"] {
      top: $size*2;
      background: linear-gradient(10deg,$border-dark 0%,$base-color 70%, black 100%);
      &:nth-of-type(even) {
        left: $size;
        top: $size*2;
        opacity: $opacity/2;
      }
    }
    &[circle="two"] {
      border-top: 112px solid darkgrey;
      left: $size;
      top: $size*2;
      opacity: 0.8;
      background: rgba($base-color,.8);
      transform:  scaleX(25deg);
      border-left: 335px dashed $base-color;
    }
    &[circle="three"] {
      transform: rotateX(30deg),scaleX(1);
      width: $size/8;
      height: $size*5;
      left: $size;
      top: 0;
      background: lighten($base-color,65%);
      &:nth-of-type(odd) {
        left: $size;
        border-left: 15px dashed $base-color;
      }
    }
    &[rectangle="four"] {
      border-radius: 70%;
      width: $size*8;
      height: $size*9;
      opacity: 0.17;
      background: darken($base-color,45%);
    }
  }
}

inc/04-21-20/css/style.scss
→ Transition through printableArea

              
$base-color: white;
$border-dark: rgba($base-color, 0.98);
$size: 6cm;
$opacity: .5;
@media print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      width: $size*2;
      height: $size*20;
      border: 225px dotted black;
      opacity: 0.87;
      background:$border-dark;
    }
    &[circle="one"] {
      top: $size*2;
      background: linear-gradient(10deg,$border-dark 0%,$base-color 70%, black 100%);
      &:nth-of-type(even) {
        left: $size;
        top: $size*2;
        opacity: $opacity/2;
      }
    }
    &[circle="two"] {
      border-top: 112px solid darkgrey;
      left: $size;
      top: $size*2;
      opacity: 0.8;
      background: rgba($base-color,.8);
      transform:  scaleX(25deg);
      border-left: 335px dashed $base-color;
    }
    &[circle="three"] {
      transform: rotateX(30deg),scaleX(1);
      width: $size/8;
      height: $size*5;
      left: $size;
      top: 0;
      background: lighten($base-color,65%);
      &:nth-of-type(odd) {
        left: $size;
        border-left: 15px dashed $base-color;
      }
    }
    &[rectangle="four"] {
      border-radius: 70%;
      width: $size*8;
      height: $size*9;
      opacity: 0.17;
      background: darken($base-color,45%);
    }
  }
}

inc/04-22-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color, 0.58);
$size: 10cm;
$opacity: 1;
@media print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      border-radius: 10%;
      width: $size/2;
      height: $size/2;
      background:$border-dark;
      transform:  scaleY(15deg);
    }
    &[circle="one"] {
        z-index:4;
      top: $size;
      background: linear-gradient(30deg,$border-dark 0%,$base-color 50%, black 100%);
      border: 125px solid grey;
      &:nth-of-type(even) {
        left: $size/6;
        top: $size/2;
      }
    }
    &[circle="two"] {
      left: $size;
      top: 0;
      opacity:1;
      background: rgba($base-color,.8);
      transform:  scaleX(5deg);
    }
    &[circle="three"] {
      width: $size/3;
      height: $size;
      left: $size;
      top: 0;
      background: lighten($base-color,25%);
      &:nth-of-type(odd) {
        transform: rotateX(1deg),scaleX(100);
        background: linear-gradient(80deg,$border-dark 2%,$base-color 30%, wheat 100%);
        margin-left: $size/6;
        border: 35px solid $base-color;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*3;
      height: $size*5;
      top:0;
      border: 550px dotted black;
      background: linear-gradient(80deg,$border-dark 2%,$base-color 30%, wheat 100%);
      opacity: .2;
    }
  }
}

inc/05-04-20/css/style.scss
→ Transition through printableArea

              
$base-color:darkgrey;
$border-dark: rgba($base-color,.8);
$size: 2cm;
$opacity: 1;
@media all, print {
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:black;
      opacity: .7;
      transform:  scaleX(45deg);
    }
    &[circle="one"] {
      width: $size*7;
      height: $size*12;
      background: linear-gradient(120deg,$border-dark 0%,$base-color 15%, black 100%);
      &:nth-of-type(even) {
        z-index: 2;
        right: $size/4;
        bottom: $size;
        border-left: 1px dashed white;
        transform:  scaleY(115deg);
        border-bottom: 70px dashed wheat;
        border-right:890px dotted white;
      }
    }
    &[rectangle="two"] {
      left: $size;
      background: darken($base-color,30%);
      transform:  scaleY(2deg);
    }
    &[circle="three"] {
      width: $size*3;
      height: $size*12;
      &:nth-of-type(odd) {
        transform: rotate(12deg),scaleX(10);
        background: wheat;
        margin-left: $size/2;
        border-top:13px solid lightgrey;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*2;
      height: $size*5;
      top:0;
      border-right: 300px dashed white;
    }
  }
}

inc/05-12-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.8);
$size: 1cm;
$opacity: 1;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(15deg);
      opacity: .9;
    }
    &[circle="one"] {
      width: $size*13;
      height: $size*16;
      background: linear-gradient(12deg,$border-dark 2%,$base-color 5%, black 100%);
      &:nth-of-type(even) {
        z-index: 2;
        bottom: $size*2;
        border-left: 20px dashed white;
        transform:  scaleY(15deg);
        border-bottom: 70px dashed wheat;
        border-left:190px dotted $base-color;
        border-top:390px Dashed gray;
        opacity: .6;
      }
    }
    &[rectangle="two"] {
      left: $size;
      background: darken($base-color,30%);
      transform:  scaleY(2deg);
    }
    &[circle="three"] {
      top:$size*2;
      width: $size*50;
      height: $size*15;
      &:nth-of-type(odd) {
        transform: rotate(12deg),scaleX(10);
        background:grey;
        margin-left: $size/2;
        border:103px dotted lightgrey;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*5;
      height: $size*8;
      top:0;
      left:$size*5;
      border-right: 6px dashed wheat;
    }
  }
}

inc/05-25-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: 1cm;
$opacity: 1;
@media all,Print{
  @page {
    size: 16cm 23cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(15deg);
      opacity: .9;
    }
    &[circle="one"] {
      width: $size*13;
      height: $size*16;
      background: linear-gradient(12deg,$border-dark 2%,$base-color 5%, black 100%);
      &:nth-of-type(even) {
        z-index: 2;
        bottom: $size*2;
        border-left: 20px dashed white;
        transform:  scaleY(15deg);
        border-bottom: 70px dashed $border-dark;
        border-left:190px dotted $base-color;
        border-top:390px Dashed gray;
        opacity: .6;
      }
    }
    &[rectangle="three"] {
      left: $size;
      background: darken($base-color,30%);
      transform:  scaleY(2deg);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*50;
      height: $size*15;
      &:nth-of-type(odd) {
        transform: rotate(2deg),scaleY(10);
        background:grey;
        margin-left: $size/2;
        border:103px dotted lightgrey;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*5;
      height: $size*8;
      top:0;
      left:$size*5;
      border-right: 6px dashed grey;
    }
  }
}

inc/08-14-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: 1cm;
$opacity: 1;
@media all,Print{
  @page {
    size: 16cm 23cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(5deg);
      opacity: .6;
    }
    &[circle="one"] {
      width: $size*13;
      height: $size*16;
      background: linear-gradient(12deg,$border-dark 2%,$base-color 5%, black 100%);
      &:nth-of-type(even) {
        z-index: 2;
        bottom: $size*2;
        border-left: 2px dashed white;
        transform:  scaleY(15deg);
        border-bottom: 70px dashed $border-dark;
        border-left:120px dotted $base-color;
        border-top:30px Dashed black;
        opacity: .6;
      }
    }
    &[rectangle="three"] {
      left: $size;
      background: darken($base-color,30%);
      transform:  scaleY(20deg);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*30;
      height: $size*15;
      &:nth-of-type(odd) {
        transform: rotate(2deg),scaleY(10);
        background:grey;
        margin-left: $size/2;
        border:303px dotted black;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*3;
      height: $size*12;
      top:0;
      left:$size*2;
      border-right: 726px dashed white;
    }
  }
}

inc/08-15-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: 1cm;
$opacity: 1;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(5deg);
      opacity: .6;
    }
    &[circle="one"] {
      width: $size*23;
      height: $size*12;
      background: linear-gradient(12deg,$border-dark 2%,$base-color 5%, black 100%);
      &:nth-of-type(even) {
        z-index: 2;
        bottom: $size*3;
        border-left: 100px dashed white;
        transform:  scaleY(15deg);
        border-bottom: 170px dashed $border-dark;
        border-left:100px dotted grey;
        border-top:30px dotted white;
        opacity: .9;
      }
    }
    &[rectangle="three"] {
      left: $size;
      background: darken($base-color,30%);
      transform:  scaleY(10deg);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*30;
      height: $size*25;
      &:nth-of-type(odd) {
        transform: rotate(20deg),scaleY(100);
        background:black;
        margin-left: $size/6;
        border:53px dotted white;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*9;
      height: $size*12;
      top:0;
      left:$size*2;
      border: 72px dotted lightgrey;
    }
  }
}

inc/08-16-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: 2cm;
$opacity: 1;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(25deg);
      opacity: 1;
    }
    &[circle="one"] {
      width: $size*13;
      height: $size*12;
      background: linear-gradient(12deg,$border-dark 2%,$base-color 5%, black 100%);
      &:nth-of-type(even) {
        z-index: 2;
        bottom: $size*3;
        border-left: 100px dotted black;
        transform:  scaleY(55deg);
        border-bottom: 17px dotted $border-dark;
        border-left:25px dotted black;
        border-top:30px dotted black;
        opacity: .8;
      }
    }
    &[rectangle="three"] {
      left: $size;
      background: darken($base-color,30%);
      transform:  scaleY(50deg);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*3;
      height: $size*25;
      &:nth-of-type(odd) {
        transform: rotate(20deg),scaleX(100);
        background:white;
        margin-left: $size/6;
        border:13px dotted black;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*15;
      height: $size*32;
      top:0;
      left:$size*2;
      border-bottom: 32px dotted white;
    }
  }
}

inc/08-17-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: 1cm;
$opacity: 1;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(5deg);
      opacity: 1;
    }
    &[circle="one"] {
      width: $size*3;
      height: $size*20;
      &:nth-of-type(even) {
        z-index: 1;
        bottom: $size*1;
        border-left: 10px inset double white;
        transform:  scaleY(15deg);
        border-bottom: 117px dotted white;
        border-left:25px inset ridge white;
        border-top:130px groove white;
        opacity: .8;
      }
    }
    &[rectangle="three"] {
      left: $size;
      background: darken($base-color,30%);
      transform:  scaleY(50deg);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*13;
      height: $size*25;
      &:nth-of-type(odd) {
        transform: rotate(20deg),scaleX(100);
        background: linear-gradient(12deg,$border-dark 2%,$base-color 5%, black 100%);
        margin-left: $size/6;
        border:113px dashed white;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*15;
      height: $size*32;
      top:0;
      left:$size*2;
      border-bottom: 32px dotted white;
    }
  }
}

inc/08-18-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: 1cm;
$opacity: .6;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(5deg);
      opacity: 1;
      background: linear-gradient(120deg, rgba(0,0,0,1) 0%, rgba(40,40,40,1) 35%, rgba(246,248,249,1) 100%);
    }
    &[circle="one"] {
      width: $size*2;
      height: $size*20;
      &:nth-of-type(even) {
        z-index: 1;
        top: $size*8;
        border-left: 10px inset double white;
        transform:  scaleY(15deg);
        border-right:522px dotted white;
      }
    }
    &[rectangle="three"] {
      left: $size;
      background: linear-gradient(22deg,$border-dark 2%,$base-color 5%, black 100%);
      transform:  scaleY(50deg);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*13;
      height: $size*25;
      &:nth-of-type(odd) {
        transform: rotate(20deg),scaleX(100);
        background: linear-gradient(120deg, rgba(0,0,0,1) 0%, rgba(40,40,40,1) 35%, rgba(246,248,249,1) 100%);
        margin-left: $size/6;
        border:403px dashed $border-dark;
        border-radius: 50% 90% 50% 10% / 60% 60% 40% 40%;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*20;
      height: $size*12;
      bottom:$size*10;
      left:$size;
      border-bottom: 222px dashed white;
      display: block;
      background-color: white;
      border-radius: 50% 50% 90% 20% / 60% 60% 40% 40%;
    }
  }
}

inc/09-15-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: 1cm;
$opacity: .6;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(5deg);
      opacity: 1;
      background: linear-gradient(120deg, rgba(0,0,0,1) 0%, $border-dark 35%, white 100%);
    }
    &[circle="one"] {
      width: $size*8;
      height: $size*35;
      &:nth-of-type(even) {
        shape-outside: ellipse(20% 90%);
        clip-path: ellipse(10% 50%);
        background: black;
        z-index: 1;
        top: $size*8;
        border-left: 10px inset double white;
        transform:  scaleY(15deg);
        border-right:122px dotted black;
      }
    }
    &[rectangle="three"] {
      left: $size;
      shape-outside: ellipse(20% 50%);
      clip-path: ellipse(20% 50%);
      background: linear-gradient(22deg,$border-dark 2%,$base-color 5%, black 100%);
      -webkit-clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
      clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*13;
      height: $size*25;
      &:nth-of-type(even) {
        transform: rotate(20deg),scaleX(100);
        margin-left: $size/7;
        border:203px dashed $border-dark;
        border-radius: 50% 90% 50% 10% / 60% 60% 40% 40%;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*30;
      height: $size*12;
      bottom:$size*15;
      opacity: $opacity;
      border-bottom: 822px dashed;
      background: linear-gradient(20deg, rgba(0,0,0,1) 0%, $border-dark 75%, rgba(246,248,249,1) 100%);
      border-radius: 50% 50% 90% 20% / 60% 60% 40% 40%;
    }
  }
}

inc/09-16-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.2);
$size: .8cm;
$opacity: .7;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:$border-dark;
      transform:  scaleX(25deg);
      opacity: $opacity;
      shape-outside: ellipse(90% 50%);
      clip-path: ellipse(10% 50%);
      background: linear-gradient(100deg, white 0%, $border-dark 25%,black 100%);
    }
    &[circle="one"] {
      width: $size*18;
      height: $size*45;
      &:nth-of-type(even) {
        background: black;
        z-index: 1;
        top: $size*2;
        border-left: 10px inset double white;
        transform:  scaleY(15deg);
        border-right:222px dotted black;
      }
    }
    &[rectangle="three"] {
      left: $size;
      shape-outside: ellipse(10% 50%);
      background: linear-gradient(22deg,$border-dark 0%,$base-color 5%, black 100%);
      -webkit-clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
      clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*17;
      height: $size*25;
      &:nth-of-type(even) {
        transform: rotate(20deg),scaleX(100);
        margin-left: $size/7;
        border:103px solid white;
        border-radius: 50% 90% 50% 10% / 60% 60% 40% 40%;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*30;
      height: $size*12;
      bottom:$size*25;
      border-bottom: 802px dotted black;
      background: linear-gradient(40deg, rgba(0,0,0,1) 0%, $border-dark 75%, rgba(246,248,249,1) 100%);
      border-radius: 50% 50% 90% 20% / 80% 80% 40% 40%;
    }
  }
}

inc/09-17-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.2);
$size: .8cm;
$opacity: .7;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      background:white;
      transform:  scaleX(25deg);
      opacity: $opacity;
      shape-outside: ellipse(29% 50%);
      clip-path: ellipse(10% 50%);
      background: linear-gradient(100deg, white 0%, $border-dark 25%,black 100%);
    }
    &[circle="one"] {
      width: $size*8;
      height: $size*45;
      &:nth-of-type(even) {
        background: black;
        z-index: 1;
        right: 0;
        top: $size*2;
        border-left: 10px inset double white;
        transform:  scaleY(5deg);
        border-right:122px dotted white;
      }
    }
    &[rectangle="three"] {
      left: $size;
      shape-outside: ellipse(10% 50%);
      background: linear-gradient(22deg,$border-dark 0%,$base-color 5%, black 100%);
      -webkit-clip-path: polygon(26px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
      clip-path: polygon(26px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*20;
      height: $size*35;
      &:nth-of-type(even) {
        transform: rotate(10deg),scaleX(100);
        margin-left: $size/2;
        border:10px solid white;
        border-radius: 50% 90% 50% 80% / 60% 60% 40% 80%;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*100;
      height: $size*42;
      bottom:$size;
      left:0;
      border: 502px dashed white;
      background: linear-gradient(60deg, rgba(0,0,0,1) 0%, $border-dark 70%, rgba(246,248,249,1) 100%);
      border-radius: 50% 50% 90% 80% / 60% 80% 90% 80%;
    }
  }
}

inc/09-18-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: .8cm;
$opacity: .8;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      transform:  scaleX(5deg);
      opacity: $opacity;
      shape-outside: ellipse(99% 50%);
      clip-path: ellipse(60% 50%);
      background: linear-gradient(100deg, white 0%, $border-dark 35%,black 100%);
    }
    &[circle="one"] {
      width: $size*5;
      height: $size*15;
      &:nth-of-type(even) {
        background: $border-dark;
        z-index: 1;
        right: 0;
        top: $size;
        border:502px dotted $border-dark ;
      }
    }
    &[rectangle="three"] {
      shape-outside: ellipse(50% 50%);
      background: linear-gradient(22deg,$border-dark 0%,$base-color 45%, black 100%);
      -webkit-clip-path: polygon(326px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
      clip-path: polygon(326px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*20;
      height: $size*35;
      &:nth-of-type(even) {
        transform: rotate(10deg),scaleX(100);
        margin-left: $size/2;
        border:10px solid white;
        border-radius: 50% 90% 50% 80% / 60% 60% 40% 80%;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*10;
      height: $size*20;
      border: 402px dashed $border-dark;
      background: linear-gradient(60deg, rgba(0,0,0,1) 0%, $border-dark 25%, rgba(246,248,249,1) 100%);
      border-radius: 50% 50% 90% 80% / 60% 80% 90% 80%;
    }
  }
}

inc/09-19-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: .8cm;
$opacity: .8;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      transform:  scaleX(5deg);
      opacity: $opacity;
      shape-outside: ellipse(99% 50%);
      clip-path: ellipse(60% 50%);
      background: linear-gradient(100deg, white 0%, $border-dark 35%,black 100%);
    }
    &[circle="one"] {
      width: $size*5;
      height: $size*15;
      &:nth-of-type(even) {
        background: $border-dark;
        z-index: 1;
        right: 0;
        top: $size;
        border:502px dotted $border-dark ;
      }
    }
    &[rectangle="three"] {
      shape-outside: ellipse(50% 50%);
      background: linear-gradient(22deg,$border-dark 0%,$base-color 45%, black 100%);
      -webkit-clip-path: polygon(326px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
      clip-path: polygon(326px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
    }
    &[circle="two"] {
      top:$size*2;
      width: $size*20;
      height: $size*35;
      &:nth-of-type(even) {
        transform: rotate(10deg),scaleX(100);
        margin-left: $size/2;
        border:10px solid white;
        border-radius: 50% 90% 50% 80% / 60% 60% 40% 80%;
      }
    }
    &[rectangle="four"] {
      z-index: 3;
      width: $size*5;
      height: $size*70;
      border: 602px dotted $border-dark;
      background: linear-gradient(60deg, rgba(0,0,0,1) 0%, $border-dark 25%, rgba(246,248,249,1) 100%);
      border-radius: 50% 50% 90% 80% / 60% 80% 90% 80%;
    }
  }
}

inc/09-20-20/css/style.scss
→ Transition through printableArea

              
$base-color:black;
$border-dark: rgba($base-color,.4);
$size: .8cm;
$opacity: .7;
@media all,Print{
  @page {
    size: 21cm 29.7cm;
  }
  div {
    position: absolute;
    &[circle] {
      background-repeat: repeat;
      transform:  scaleX(15deg);
      opacity: $opacity;
      shape-outside: ellipse(90% 50%);
      clip-path: ellipse(90% 50%);
      background: linear-gradient(100deg, white 0%, $border-dark 5%,black 100%);
    }
    &[circle="one"] {
      width: $size*7;
      height: $size*55;
      shape-outside: ellipse(99% 80%);
      clip-path: ellipse(90% 30%);
      &:nth-of-type(even) {
        background: $border-dark;
        right: 0;
        top: 0;
        border:960px dotted black;
      }
    }
    &[rectangle="three"] {
      shape-outside: ellipse(100% 80%);
      background: linear-gradient(82deg,$border-dark 0%,$base-color 5%, black 100%);
      -webkit-clip-path: polygon(426px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
      clip-path: polygon(426px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
    }
    &[circle="two"] {
      top:0;
      width: $size*10;
      height: $size*25;
      &:nth-of-type(even) {
        transform: rotate(20deg),scaleX(70);
        margin-left: $size/2;
        border:100px double black;
        border-radius: 10% 90% 50% 80% / 60% 60% 10% 90%;
      }
    }
    &[rectangle="four"] {
      z-index: 1;
      top:$size;
      width: $size*15;
      height: $size*1;
      border:362px double $border-dark;
      background: linear-gradient(60deg, rgba(0,0,0,1) 0%, $border-dark 69%, rgba(246,248,249,1) 100%);
      border-radius: 70% 50% 10% 80% / 10% 80% 90% 80%;
    }
  }
}

inc/09-21-20/css/style.scss
→ Transition through printableArea

Click for pdf source

jpg

03-26-20.jpg
jpg

04-02-20.jpg
jpg

04-08-20.jpg
jpg

04-09-20.jpg
jpg

04-10-20.jpg
jpg

04-13-20.jpg
jpg

04-15-20.jpg
jpg

04-21-20.jpg
jpg

04-22-20.jpg
jpg

05-04-20.jpg
jpg

05-12-20.jpg
jpg

05-25-20.jpg
jpg

08-14-20.jpg
jpg

08-15-20.jpg
jpg

08-16-20.jpg
jpg

08-17-20.jpg
jpg

08-18-20.jpg
jpg

09-15-20.jpg
jpg

09-16-20.jpg
jpg

09-17-20.jpg
jpg

09-18-20.jpg
jpg

09-19-20.jpg
jpg

09-20-20.jpg
jpg

09-21-20.jpg