<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;
}
This Pen doesn't use any external CSS resources.