Symmetry

@grid: 1 / 80vmin;

--shape: @shape(
  points: 180;
  scale: .7;
  frame: 30;
  r: abs.cos(3t) ^ cos(3t);
);

--color: (
  #4df4ff,#3dc7be,#f7f7f7,#1bb5ec,
  #f75940,#f6c90e,#2e4750,#303841
);

background: @doodle(
  :doodle {
    @grid: 6x1 / 100%;
    filter: drop-shadow(0 -2px 0 #fff);
  }
  clip-path: @shape(rotate: 30);
  @place: @plot(
    r: .5; 
    dir: auto -90
  );
  @size: 50%;
  ::before, ::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: var(--shape);
    rotate: y @pn(180deg, 0);
    background: radial-gradient(@p((--color)));
  }
);