<css-doodle>

  :doodle {

    @grid: 2 x 5;

​

  }

  width: 40vmin;

  height: 40vmin;

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

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

​

  position: relative;

  box-sizing: border-box;

  margin: 1vmin;

  border-radius: 50%;

  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));

  background: var(--colorMain);

  overflow: hidden;

  :after {

    --angle: calc(360deg / @index);

    --start: @r(8, 30)px;

    --end: @r(24, 80)px;

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

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

    mask: @m(@index, (

      repeating-linear-gradient(calc(var(--angle) * @n), #fff 0, #fff var(--start), transparent var(--start), transparent var(--end))

    ));

    -webkit-mask-composite: xor;

  }

​

</css-doodle>