<div class="bat"></div>
body {
margin:0;
height:100vh;
display:grid;
place-items:center;
background:lightblue;
--b:lightblue;
--c:#231f20;
}
.bat {
height:300px;
width:300px;
position:relative;
}
.bat:before {
content: "";
position: absolute;
width: 90%;
height: 40px;
bottom: 59px;
left:37%;
transform: rotate(2deg);
background: repeating-linear-gradient(90deg,#565556 0 6px,#3e2c20 0 8px) 10px 0/24% 100% no-repeat, #7d4e25;
border-radius: 0 15px 15px 0;
clip-path: polygon(0 0,10px 0,10px 23%,40% 19%,60% 0,100% 0,100% 100%,60% 100%,40% 81%,10px 77%,10px 100%,0 100%);
}
.bat:after {
content: "";
position: absolute;
inset: 0;
background:
conic-gradient(from -160deg at top,#181617 320deg,#0000 0) 47.8% 71%/3% 3%,
conic-gradient(from -160deg at top,#181617 320deg,#0000 0) 52% 71%/3% 3%,
linear-gradient(#181617 0 0) 48% 68%/1.8% 5%,
linear-gradient(#181617 0 0) 52% 68%/1.8% 5%,
linear-gradient(#fff 0 0) 50% 44%/4% .9%,
radial-gradient(farthest-side,#fff 98%,#0000) 43.5% 35%/1% 1%,
radial-gradient(farthest-side,#fff 98%,#0000) 55% 35%/1% 1%,
radial-gradient(farthest-side,#231f20 98%,#0000) 55.5% 35.4%/4.2% 4.2%,
radial-gradient(farthest-side,#231f20 98%,#0000) 44% 35.4%/4.2% 4.2%,
radial-gradient(farthest-side,#fff 98%,#0000) 44% 36%/7% 7%,
radial-gradient(farthest-side,#fff 98%,#0000) 56% 36%/7% 7%,
radial-gradient(farthest-side,var(--b) 98%,#0000) 50% 11%/21% 25%,
radial-gradient(farthest-side at 50% 40%,var(--c) 98%,#0000) 50% 35%/27% 25%,
radial-gradient(farthest-side,#181617 98%,#0000) 50% 53%/16% 27%,
radial-gradient(50% 100% at bottom,var(--b) 98%,#0000) 50% 62%/37% 8%,
radial-gradient(50% 100% at bottom,var(--b) 98%,#0000) 78% 60%/15% 8%,
radial-gradient(50% 100% at bottom,var(--b) 98%,#0000) 22% 60%/15% 8%,
radial-gradient(50% 100% at bottom,var(--b) 98%,#0000) -4% 59%/22% 12%,
radial-gradient(50% 100% at bottom,var(--b) 98%,#0000) 104% 58%/22% 12%,
radial-gradient(50% 100% at top ,var(--b) 98%,#0000) 50% 32%/50% 25%,
radial-gradient(50% 100% at bottom,var(--c) 98%,#0000) 50% 41%/100% 36%;
background-repeat: no-repeat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.