<css-doodle>

  :doodle {

    @grid: 3 x 1;

  }

​

  width: 40vmin;

  height: 80vmin;

​

  --colorMain: rgb(@r(255), @r(255), @r(255));

  --colorSub: rgb(@r(255), @r(255), @r(255));

  --colorThird: rgb(@r(255), @r(255), @r(255));

​

  position: relative;

  box-sizing: border-box;

  margin: 1vmin;

  border-radius: 5vmin;

  border:2px solid #666;

  box-shadow: 1px 1px 4px 2px #222;

  background: conic-gradient(from @r(360)deg, var(--colorMain), transparent, var(--colorSub), transparent, var(--colorMain));

  overflow: hidden;

​

  @nth(2) {

    background: linear-gradient(var(--colorMain), var(--colorSub));

  }

  @nth(3) {

    background: unset;

  }

​

  :after {

    --smallSize: @r(1, 5)px;

    --size: @r(5, 12)px;

    --maskSize: @r(20, 60)px;

    // content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: repeating-linear-gradient(var(--colorMain) 0px, var(--colorSub) 20px);

    mask: 

      linear-gradient(135deg, #fff var(--smallSize), transparent 0),

      linear-gradient(-135deg, #fff var(--smallSize), transparent 0),

      linear-gradient(45deg, #fff var(--smallSize), transparent 0),

      linear-gradient(-45deg, #fff var(--smallSize), transparent 0),

      linear-gradient(135deg, #fff var(--size), transparent 0),

      linear-gradient(-135deg, #fff var(--size), transparent 0),

      linear-gradient(45deg, #fff var(--size), transparent 0),

      linear-gradient(-45deg, #fff var(--size), transparent 0);

    mask-size: var(--maskSize) var(--maskSize);

    mask-position: 50% 50%;

    -webkit-mask-composite: xor;

  }

​

  :before {

    --size: @r(2, 15)px;

    --maskSize: @r(10, 75)px;

    --percentage: @r(10, 30)%;

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(@r(360)deg, var(--colorMain), var(--colorSub));

    mask: 

      linear-gradient(135deg, #fff var(--size), transparent 0),

      linear-gradient(-135deg, #fff var(--size), transparent 0),

      linear-gradient(45deg, #fff var(--size), transparent 0),

      linear-gradient(-45deg, #fff var(--size), transparent 0),

      linear-gradient(135deg, #fff calc(var(--percentage) + var(--size)), transparent 0),

      linear-gradient(-135deg, #fff calc(var(--percentage) + var(--size)), transparent 0),

      linear-gradient(45deg, #fff calc(var(--percentage) + var(--size)), transparent 0),

      linear-gradient(-45deg, #fff calc(var(--percentage) + var(--size)), transparent 0),

      linear-gradient(135deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),

      linear-gradient(-135deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),

      linear-gradient(45deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),

      linear-gradient(-45deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0);

    mask-size: var(--maskSize) var(--maskSize);

    mask-position: 50% 50%;

    -webkit-mask-composite: xor;

  }

​

</css-doodle>