<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;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.