<svg width="0" height="0" viewBox="0 0 500 350" aria-hidden="true">
<filter id='noiseFilter'>
<feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' />
</filter>
</svg>
<div class="filter"></div>
<div class="hamster">
<div class="head">
<div class="ears">
</div>
<div class="eyes">
<div></div>
</div>
<div class="mouth">
<div></div>
<div></div>
</div>
</div>
<div class="body">
<div class="hands">
<div></div>
</div>
<div class="feet"></div>
</div>
</div>
:root {
--base-width: 40vw;
--body: calc(var(--base-width) * 1.3);
--color: BurlyWood;
--secondary-color: sienna;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
align-content: center;
justify-content: center;
margin: 0;
background: skyblue;
background-image: url("https://assets.codepen.io/159218/clouds.svg");
}
.filter {
position: absolute;
inset: 0;
filter: url(#noiseFilter);
z-index: 20;
opacity: 0.4;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.head,
.eyes,
.feet,
.hands,
.mouth {
&::before,
&::after {
content: "";
}
}
.mouth {
position: absolute;
top: 30%;
inset-inline: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
&::before {
position: absolute;
top: 50%;
border-radius: 50%;
aspect-ratio: 1;
background: black;
width: calc(var(--base-width) / 40);
}
}
.mouth div {
width: calc(var(--base-width) / 8);
aspect-ratio: 1;
border-radius: 50%;
border-bottom: 5px solid black;
}
.hamster {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-inline: auto;
}
.head {
position: relative;
width: var(--base-width);
aspect-ratio: 1;
background: var(--color);
border-radius: 48%;
background: radial-gradient(
farthest-corner circle at 100% 0%,
var(--secondary-color) 32% 0%,
31%,
var(--color) 100%
);
&::before,
&::after {
position: absolute;
width: calc(var(--base-width) / 5);
aspect-ratio: 5/ 4;
border-radius: 50%;
background: var(--color);
top: -5%;
left: calc(var(--base-width) / 7);
rotate: -30deg;
z-index: -1;
}
&::after {
inset-inline: auto calc(var(--base-width) / 7);
rotate: 30deg;
background: var(--secondary-color);
}
}
.eyes {
position: absolute;
top: 20%;
width: 60%;
left: 20%;
display: grid;
grid-template-columns: calc(var(--base-width) / 8) auto calc(
var(--base-width) / 8
);
z-index: 1;
&::before,
&::after {
width: calc(var(--base-width) / 10);
aspect-ratio: 1;
border-radius: 50%;
background: black;
}
}
.body {
position: relative;
width: var(--body);
aspect-ratio: 8/6.5;
background: var(--color);
border-radius: 48%;
margin-top: calc(var(--base-width) / -1.6);
}
.hands {
position: absolute;
top: 38%;
width: 60%;
left: 15%;
display: grid;
grid-template-columns: calc(var(--base-width) / 8) auto calc(
var(--base-width) / 8
);
z-index: 1;
&::before,
&::after {
border-right: calc(var(--base-width) / 30) solid black;
border-bottom: calc(var(--base-width) / 30) solid black;
width: calc(var(--body) / 6);
aspect-ratio: 1;
rotate: -45deg;
transform: skew(20deg, 20deg);
}
&::after {
rotate: 135deg;
}
}
.feet {
&::before,
&::after {
position: absolute;
width: calc(var(--base-width) / 7);
aspect-ratio: 3/4;
border-radius: 50%;
background: var(--color);
bottom: -4%;
left: calc(var(--base-width) / 3);
rotate: 20deg;
z-index: -1;
}
&::after {
inset-inline: auto calc(var(--base-width) / 3);
rotate: -20deg;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.