<div role="img" aria-label="a haystack with a pitchfork and a needle"></div>
<!--
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100'><style>svg{background:radial-gradient(farthest-side, %2300f2 0 85%,black 0 99%, transparent 0) 0 0 / 66% 66%,linear-gradient(45deg,transparent 45%,black 0 55%,transparent 0) 100% 100% / 45% 45%,linear-gradient(45deg,transparent 40%,black 0 60%,transparent 0) 100% 100% / 40% 40%;background-repeat:no-repeat;backdrop-filter: contrast(60%);}</style></svg>") 31 31, pointer;
-->
body {
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #f0f8ff;
}
div {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
width: 80vmin;
height: 80vmin;
afilter:
drop-shadow(0 -0.25vmin )
drop-shadow(0 0.25vmin)
drop-shadow(-0.25vmin 0)
drop-shadow(0.25vmin 0)
drop-shadow(0 -0.25vmin )
drop-shadow(0 0.25vmin)
drop-shadow(-0.25vmin 0)
drop-shadow(0.5vmin 0)
;
}
div::before {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #fdb700;
height: 100%;
clip-path: polygon(-7% 103%, 6% 96%, 3% 97%, 5% 91%, 3% 91%, 7% 85%, 3% 85%, 9% 78%, 5% 78%, 12% 73%, 12% 70%, 7% 72%, 13% 66%, 11% 65%, 13% 61%, 18% 58%, 14% 58%, 19% 55%, 15% 55%, 23% 50%, 19% 50%, 25% 46%, 21% 45%, 32% 42%, 27% 40%, 33% 40%, 30% 37%, 33% 37%, 40% 36%, 37% 34%, 43% 35%, 43% 32%, 46% 35%, 53% 32%, 51% 35%, 64% 34%, 61% 36%, 68% 37%, 64% 38%, 77% 42%, 73% 43%, 75% 44%, 80% 44%, 77% 46%, 81% 49%, 78% 49%, 82% 52%, 87% 55%, 82% 55%, 87% 61%, 91% 59%, 87% 63%, 90% 67%, 92% 71%, 88% 69%, 90% 73%, 89% 74%, 94% 78%, 97% 83%, 94% 83%, 98% 89%, 95% 89%, 96% 94%, 94% 92%, 102% 104%);
}
div::after {
content: "";
display: block;
position: absolute;
top: -5.5%;
left: 3%;
height: 100%;
width: 100%;
z-index: 3;
background:
radial-gradient(farthest-side, darkgray 99.9%, #0000 0) 25.66% 60.5% / 1.5% 1.5%,
radial-gradient(farthest-side, darkgray 99.9%, #0000 0) 25.66% 58.5% / 1.5% 1.5%,
radial-gradient(50% 80% at 50% 85%, transparent 80%, gray 0 99.9%, transparent 0) 21.75% 66.5% / 16% 8%,
conic-gradient(at 50% 150%, gray 3deg, transparent 0 357deg, gray 0) 23% 71.5% / 3% 13%,
conic-gradient(at 40% 150%, gray 3deg, transparent 0 357deg, gray 0) 28% 72.25% / 3% 14%,
conic-gradient(at 80% 130%, transparent 0 345deg, gray 0 354.5deg, transparent 0) 19% 74% / 3% 7.5%,
conic-gradient(at 0% 130%, transparent 0 9deg, gray 0 19deg, transparent 0) 32% 74% / 3% 7.5%,
linear-gradient(to right, transparent 43%, gray 0 57%, transparent 0) 20% 60% / 20% 5%,
linear-gradient(to right, transparent 45%, brown 0 55%, transparent 0) 20% 20% / 20% 50%,
linear-gradient(white, white) 54vmin 40.25vmin / 0.25% 1%,
conic-gradient(at 50% 100%, darkgray 3deg, transparent 0 357deg, darkgray 0) 50vmin 40vmin / 10% 8%
;
background-repeat: no-repeat;
transform: rotate(-20deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.