<css-doodle>
  <style>
    @grid: 1 / 100vw 100vh;
    --shape:  @shape(
      points: 12;
      r: seq(sin(π/3), 1, sin(π/3), cos(π/3))
    );
    --shadow:  conic-gradient(
      from -60deg,
      @stripe(#f2f2f2, #cdcbcc, #999)
    );
    background: @doodle(
      background-size: 100px 100px;
      background-repeat: no-repeat;
      background-image: @m12.@doodle(
        background: @p(--shadow);
        clip-path: @p(--shape);
      );
      background-position:
        @m4(-50px calc(-50px + 75px * @n(-1))),
        @m4(15px calc(-88px + 75px * @n(-1))),
        @m4(80px calc(-50px + 75px * @n(-1)))
    ) 0 0 / 130px 150px;
  </style>
</css-doodle>
 
body {
  margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/css-doodle@0.28.1/css-doodle.min.js