<div class="critter"></div>
body {
margin:0;
height:100vh;
display:grid;
place-items:center;
background:#e6e6e6;
}
.critter {
width: 250px;
height: 225px;
margin:50px 0 0;
position:relative;
--c:#78c800;
--c1:#f49000;
--c2:#8ee000;
--c3:#fff;
--c4:#4b4b4b;
background:
radial-gradient(farthest-side,var(--c3) 98%,#0000 ) 62.5% 27.5%/7% 8%,
radial-gradient(farthest-side,var(--c3) 98%,#0000 ) 28.5% 27.5%/7% 8%,
linear-gradient(var(--c4) 0 0)33% 32%/9% 8%,
linear-gradient(var(--c4) 0 0)68% 32%/9% 8%,
radial-gradient(farthest-side,var(--c4) 98%,#0000)68% 36.5%/9% 9%,
radial-gradient(farthest-side,var(--c4) 98%,#0000)68% 29%/9% 9%,
radial-gradient(farthest-side,var(--c4) 98%,#0000)33% 29%/9% 9%,
radial-gradient(farthest-side,var(--c4) 98%,#0000)33% 36.5%/9% 9%,
radial-gradient(farthest-side at bottom,var(--c2) 98%,#0000) 24.5% 11.5%/7% 10%,
radial-gradient(farthest-side at bottom,var(--c2) 98%,#0000) 75.5% 11.5%/7% 10%,
radial-gradient(farthest-side at bottom,var(--c2) 98%,#0000) 69% 9%/5% 10%,
radial-gradient(farthest-side at bottom,var(--c2) 98%,#0000) 31% 9%/5% 10%,
linear-gradient(to top right,var(--c2) 49.5%,#0000 50%) 36% 9%/10% 12%,
linear-gradient(to top left ,var(--c2) 49.5%,#0000 50%) 64% 9%/10% 12%,
radial-gradient(farthest-side,var(--c3) 94%,#0000 ) 62.5% 27.5%/7% 8%,
linear-gradient(var(--c3) 0 0) 72% 32%/20% 7%,
linear-gradient(var(--c3) 0 0) 28% 32%/20% 7%,
radial-gradient(farthest-side,var(--c3) 98%,#0000 )72% 33.5%/20% 23%,
radial-gradient(farthest-side,var(--c3) 98%,#0000 )72% 25.5%/20% 23%,
radial-gradient(farthest-side,var(--c3) 98%,#0000 )28% 25.5%/20% 23%,
radial-gradient(farthest-side,var(--c3) 98%,#0000 )28% 33.5%/20% 23%,
radial-gradient(farthest-side at bottom,#ffc200 98%,#0000)50% 42.5%/14% 8%,
radial-gradient(farthest-side,var(--c1) 98%,#0000)50% 45%/10% 11%,
radial-gradient(71% 94% at top,#0000 76%,var(--c2) 79% ) 50% 15%/21% 13%,
radial-gradient(farthest-side,var(--c2) 98%,#0000 ) 24.5% 19%/27% 26%,
radial-gradient(farthest-side,var(--c2) 98%,#0000 ) 75.5% 19%/27% 26%,
radial-gradient(farthest-side,var(--c2) 98%,#0000 ) 75.5% 38%/27% 26%,
radial-gradient(farthest-side,var(--c2) 98%,#0000 ) 24.5% 38%/27% 26%,
linear-gradient(var(--c2) 0 0) 50% 31%/64% 17%,
radial-gradient(farthest-side at top,var(--c2) 98%,#0000 0) 41% 71%/11% 6%,
radial-gradient(farthest-side at top,var(--c2) 98%,#0000 0) 59% 71%/11% 6%,
radial-gradient(farthest-side at top,var(--c2) 98%,#0000 0) 50% 80%/11% 6%,
linear-gradient(to top left ,var(--c) 50%,#0000 50.5%)62% 0%/28% 11%,
linear-gradient(to top right,var(--c) 50%,#0000 50.5%)37% 0%/28% 11%,
linear-gradient(to top left ,var(--c) 50%,#0000 50.5%)0% 67.5%/15% 30%,
linear-gradient(to top right,var(--c) 50%,#0000 50.5%)100% 67.5%/15% 30%,
linear-gradient(var(--c) 0 0)50% 9%/30% 5%,
radial-gradient(farthest-side,var(--c) 98%,#0000) 18% 0%/22% 26%,
radial-gradient(farthest-side,var(--c) 98%,#0000) 82% 0%/22% 26%,
radial-gradient(47% 100% at top,var(--c) 98%,#0000 )50% 93%/72% 34%,
radial-gradient(50% 100% at 50% 0%,var(--c) 98%,#0000 )104% 82%/28% 6%,
radial-gradient(50% 100% at 50% 0%,var(--c) 98%,#0000 )-4% 82%/28% 6%,
linear-gradient(var(--c) 0 0) 50% 38%/72% 67%,
radial-gradient(farthest-side,var(--c1) 98%,#0000 0) 35.5% 101%/10% 12%,
radial-gradient(farthest-side,var(--c1) 98%,#0000 0) 43% 101%/10% 12%,
radial-gradient(farthest-side,var(--c1) 98%,#0000 0) 57% 101%/10% 12%,
radial-gradient(farthest-side,var(--c1) 98%,#0000 0) 64.5% 101%/10% 12%,
linear-gradient(var(--c1) 0 0) 40% 102%/5% 5%,
linear-gradient(var(--c1) 0 0) 60% 102%/5% 5%;
background-repeat: no-repeat;
}
.critter:after {
content: "Let’s\00a0learn\00a0some Japanese?";
position: absolute;
left: 100%;
bottom: 80%;
text-align: center;
font-size: 28px;
font-weight: bold;
font-family: sans-serif;
padding: 10px;
background: #fff;
border-radius: 20px;
}
.critter:before {
content: "";
position: absolute;
width: 50px;
height: 61px;
left: 114%;
bottom: 60%;
transform-origin: top;
transform: skewX(-53deg);
background: #fff;
clip-path: polygon(0 0,100% 0,50% 100%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.