<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(1) {

    --sizeLine: @r(1, 3)px;

    --sizeWidth: @r(8, 25)px;

    --degOne: @r(180)deg;

​

    :after {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background:

        repeating-linear-gradient(0, var(--colorMain) 0, var(--colorMain) var(--sizeLine), transparent var(--sizeLine), transparent var(--sizeWidth)),

        repeating-linear-gradient(60deg, var(--colorMain) 0, var(--colorMain) var(--sizeLine), transparent var(--sizeLine), transparent var(--sizeWidth)),

        repeating-linear-gradient(-60deg, var(--colorMain) 0, var(--colorMain) var(--sizeLine), transparent var(--sizeLine), transparent var(--sizeWidth));

      mask: conic-gradient(from var(--degOne), transparent, #fff, transparent 50%);

    }

​

    :before {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background:

        repeating-linear-gradient(0, var(--colorSub) 0, var(--colorSub) var(--sizeLine), transparent var(--sizeLine), transparent var(--sizeWidth)),

        repeating-linear-gradient(60deg, var(--colorSub) 0, var(--colorSub) var(--sizeLine), transparent var(--sizeLine), transparent var(--sizeWidth)),

        repeating-linear-gradient(-60deg, var(--colorSub) 0, var(--colorSub) var(--sizeLine), transparent var(--sizeLine), transparent var(--sizeWidth));

      mask: conic-gradient(from calc(var(--degOne) - 180deg), transparent, #fff, transparent 50%);

    }

  }

​

  @nth(2) {

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

    --degOne: @r(180);

    --degTwo: calc(180 - var(--degOne));

    --size: @r(20, 80)%;

    --lineSize: @r(1, 4)px;

    :after {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background:

        repeating-linear-gradient(calc(var(--degOne) * 1deg), var(--colorMain) 0, var(--colorMain) var(--lineSize), transparent var(--lineSize), transparent @r(4, 8)px);

      mask: radial-gradient(circle, #fff var(--size), transparent 0);

      mask-position: 0 0;

      mask-size: 60px 60px;

      mix-blend-mode: @pick(saturation, unset);

    }

    :before {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background:

        repeating-linear-gradient(calc(var(--degTwo) * 1deg), var(--colorSub) 0, var(--colorSub) var(--lineSize), transparent var(--lineSize), transparent @r(4, 8)px);

      mask: radial-gradient(circle, #fff var(--size), transparent 0);

      mask-position: 30px 30px;

      mask-size: 60px 60px;

    }

  }

  @nth(3) {

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

    --size: @r(15, 75)%;

    :after {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background: repeating-radial-gradient(circle, transparent 0, transparent 12.5%, var(--colorMain) 0, var(--colorMain) 25%, transparent 0, transparent 37.5%, var(--colorMain) 0, var(--colorMain) 50%, transparent 0, transparent 62.5%, var(--colorMain) 0, var(--colorMain) 75%, transparent 0, transparent 87.5%, var(--colorMain) 0, var(--colorMain));

      background-size: var(--size) var(--size);

      background-position: @r(100)% 0;

      mask: linear-gradient(#fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent 100%);

    }

    :before {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background: repeating-radial-gradient(circle, transparent 0, transparent 12.5%, var(--colorSub) 0, var(--colorSub) 25%, transparent 0, transparent 37.5%, var(--colorSub) 0, var(--colorSub) 50%, transparent 0, transparent 62.5%, var(--colorSub) 0, var(--colorSub) 75%, transparent 0, transparent 87.5%, var(--colorSub) 0, var(--colorSub));

      background-size: var(--size) var(--size);

      background-position: @r(100)% 0;

      mask: linear-gradient(transparent 25%, #fff 25%, #fff 50%, transparent 50%, transparent 75%, #fff 75%, #fff 100%);

    }

  }

</css-doodle>