CSS Doodle

<css-doodle>
:doodle {
  @grid: 3 / 100px;
}

:after {
   content: @index;
   color: white;
}

border: 1px solid white;
background: @pick(orange,pink);
</css-doodle>

<css-doodle>
  :doodle {
    @grid: 18 / 100%;
    background: #0a0c27;
  }
  --hue: calc(180 + 1.5 * @row * @col);
  background: hsl(var(--hue), 50%, 70%);
  margin: -.5px;
  transition: @r(.5s) ease;
  clip-path: polygon(@pick(
    '0 0, 100% 0, 100% 100%',
    '0 0, 100% 0, 0 100%',
    '0 0, 100% 100%, 0 100%',
    '100% 0, 100% 100%, 0 100%'
  ));
</css-doodle>

<css-doodle>
  @grid: 1 / 100vw 100vh; 
  background-size: 83px 135px;
  background-color: #D24B45; 
  background-image: @doodle(
    @grid: 2 / 100%; 
    background: @pn(#3C2B34,#F7F0E9, #F7F0E9);   
    transform-origin: @pn(100% 100%, 0 100%, 100% 0, 0 0);
    transform: rotateX(45deg) skewY(@pn(34deg, -34deg, -34deg));
  );
</css-doodle>

<css-doodle>
  :doodle {
    @grid: 20 / 100vmax;
    background: #0a0c27;
    font-family: sans-serif;
    overflow: hidden;
  }
  :after {
    content: \@hex.@r(0x2500, 0x257f);
    color: hsla(@r360, 70%, 70%, @r.9);
    font-size: 8vmin;
  }
</css-doodle>