<div class="resizable-container"><svg class="beardy" viewBox="0 0 218 187" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M48 94.052h1v-11c0-25.957 21.043-47 47-47h74c25.957 0 47 21.043 47 47v54c0 25.958-21.043 47-47 47H96c-25.957 0-47-21.042-47-47v-11h-1c-8.837 0-16-7.163-16-16 0-8.836 7.163-16 16-16z" fill="#FFF0F0" stroke="#000" stroke-width="2"/>
  <path d="M94 36.052c-26.51 0-39 21.49-39 48v10c-9.389 0-17 7.611-17 17s7.611 17.5 17 17.5l-6.5-3c0 26.51 18.99 60.5 45.5 60.5h74c26.51 0 48-21.49 48-48v-54c0-26.51-21.49-48-48-48H94z" fill="#F3D7D7"/>
  <path d="M48 94.052h1v-11c0-25.957 21.043-47 47-47h74c25.957 0 47 21.043 47 47v54c0 25.958-21.043 47-47 47H96c-25.957 0-47-21.042-47-47v-11h-1c-8.837 0-16-7.163-16-16 0-8.836 7.163-16 16-16z" stroke="#000" stroke-width="2"/>
  <path fill="#7C4526" d="M86 46.052h112v20H86z"/>
  <path fill="#F72A2A" stroke="#000" stroke-width="2" d="M104 65.052h80v12h-80z"/>
  <path d="M105.374 70.484c.503.321.603.52.622.568-.019.048-.119.247-.622.569-.601.384-1.553.792-2.874 1.2-2.627.813-6.479 1.559-11.3 2.19-9.626 1.26-22.956 2.041-37.7 2.041-14.782 0-28.128-.034-37.777-.549-4.832-.257-8.687-.634-11.317-1.174-1.325-.272-2.267-.572-2.855-.88-.404-.213-.518-.358-.546-.41.02-.06.127-.308.684-.728.615-.464 1.578-.983 2.897-1.528 2.627-1.085 6.477-2.2 11.288-3.201 9.61-2.002 22.916-3.53 37.626-3.53 14.744 0 28.074.783 37.7 2.042 4.821.63 8.673 1.376 11.3 2.189 1.321.409 2.273.817 2.874 1.201zM.996 74.02l.002.005-.002-.005z" fill="#F72A2A" stroke="#000" stroke-width="2"/>
  <path d="M198.397 25.655c15.432 15.432 18.513 31.477 18.601 53.397H175v-17a5 5 0 00-5-5h-52a5 5 0 00-5 5v17H49.002c.088-21.92 3.169-37.965 18.601-53.397C83.312 9.947 110.652 1.052 133 1.052c22.348 0 49.688 8.895 65.397 24.603z" fill="#454545" stroke="#000" stroke-width="2"/>
  <path d="M199.104 24.948C215.045 40.888 218 57.51 218 80.052h-44v-18a4 4 0 00-4-4h-52a4 4 0 00-4 4v18H57c0-22.543 4.792-42.708 20.896-55.104S108.5-.948 133 .052s50.163 8.956 66.104 24.896z" fill="#222"/>
  <path d="M198.397 25.655c15.432 15.432 18.513 31.477 18.601 53.397H175v-17a5 5 0 00-5-5h-52a5 5 0 00-5 5v17H49.002c.088-21.92 3.169-37.965 18.601-53.397C83.312 9.947 110.652 1.052 133 1.052c22.348 0 49.688 8.895 65.397 24.603z" stroke="#000" stroke-width="2"/>
  <circle class="beardy__eye" cx="111" cy="110.052" r="8" fill="#3A3A3A"/>
  <path class="beardy__brow" d="M107.866 94.108a11.998 11.998 0 00-11.524 7.598M183 94.108a12.002 12.002 0 0111.524 7.598" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <circle class="beardy__eye" cx="182" cy="110.052" r="8" fill="#3A3A3A"/>
  <mask id="a" fill="#fff">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M48 137.037v-19.985s9.541 18.861 21 21.983c5.5 1.499 12.5 2.63 22.5 0 3.65-.959 5.05-3.116 6.621-5.538 1.657-2.553 3.504-5.401 8.379-7.452 9.5-3.997 73-3.715 81.5 0 5.1 2.23 7.86 5.256 10.008 7.611 1.432 1.57 2.592 2.842 3.992 3.381 5.831 2.244 16 0 16 0V171H48v-33.963zM134.994 136a7.994 7.994 0 100 15.988h30.012a7.994 7.994 0 100-15.988h-30.012z"/>
  </mask>
  <path class="beardy__beard" fill-rule="evenodd" clip-rule="evenodd" d="M48 137.037v-19.985s9.541 18.861 21 21.983c5.5 1.499 12.5 2.63 22.5 0 3.65-.959 5.05-3.116 6.621-5.538 1.657-2.553 3.504-5.401 8.379-7.452 9.5-3.997 73-3.715 81.5 0 5.1 2.23 7.86 5.256 10.008 7.611 1.432 1.57 2.592 2.842 3.992 3.381 5.831 2.244 16 0 16 0V171H48v-33.963zM134.994 136a7.994 7.994 0 100 15.988h30.012a7.994 7.994 0 100-15.988h-30.012z" fill="#492D1D"/>
  <path d="M48 117.052l1.785-.903-3.785.903h2zm0 19.985h2-2zm21 1.998l.526-1.929-.526 1.929zm22.5 0l.509 1.935-.51-1.935zm6.621-5.538l-1.678-1.089 1.678 1.089zm8.379-7.452l.776 1.844-.776-1.844zm81.5 0l.801-1.832-.801 1.832zm10.008 7.611l-1.478 1.348 1.478-1.348zm3.992 3.381l-.718 1.866.718-1.866zm16 0h2v-2.489l-2.431.536.431 1.953zM218 171v2h2v-2h-2zm-170 0h-2v2h2v-2zm-2-53.948v19.985h4v-19.985h-4zm23.526 20.054c-2.46-.671-4.938-2.226-7.32-4.324-2.368-2.086-4.543-4.622-6.401-7.107a74.896 74.896 0 01-5.615-8.76c-.136-.252-.24-.447-.308-.577l-.076-.146-.017-.035-.004-.007v-.001l-1.785.903c-1.785.903-1.785.904-1.784.904v.001l.002.005a.213.213 0 01.007.013l.024.046.089.171a70.26 70.26 0 001.61 2.873c1.1 1.861 2.69 4.38 4.653 7.006 1.96 2.62 4.319 5.385 6.962 7.713 2.63 2.317 5.642 4.29 8.911 5.181l1.052-3.859zm21.465-.005c-9.576 2.518-16.208 1.438-21.465.005l-1.052 3.859c5.743 1.565 13.11 2.746 23.535.005l-1.018-3.869zm5.452-4.693c-1.554 2.395-2.597 3.942-5.452 4.693l1.018 3.869c4.444-1.169 6.2-3.936 7.79-6.385l-3.356-2.177zm9.281-8.206c-5.445 2.291-7.567 5.565-9.28 8.206l3.355 2.177c1.599-2.464 3.173-4.885 7.477-6.696l-1.552-3.687zm83.077.011c-1.344-.588-3.519-1.025-6.08-1.38-2.633-.364-5.899-.668-9.572-.913-7.352-.49-16.428-.749-25.52-.767-9.092-.018-18.232.207-25.711.688-3.737.24-7.083.547-9.811.923-2.668.369-4.931.827-6.383 1.438l1.552 3.687c.923-.389 2.722-.796 5.378-1.162 2.596-.359 5.837-.657 9.521-.894 7.366-.475 16.413-.697 25.446-.68 9.033.018 18.019.275 25.262.758 3.623.242 6.786.538 9.29.885 2.576.356 4.245.741 5.026 1.082l1.602-3.665zm10.685 8.095c-2.181-2.39-5.177-5.687-10.685-8.095l-1.602 3.665c4.692 2.051 7.216 4.806 9.331 7.126l2.956-2.696zm3.232 2.862c-.864-.332-1.69-1.17-3.232-2.862l-2.956 2.696c1.322 1.449 2.816 3.155 4.752 3.899l1.436-3.733zM218 137.037l-.43-1.953h-.003l-.017.004-.075.016-.31.063a50.464 50.464 0 01-5.149.719c-3.231.277-6.837.231-9.298-.716l-1.436 3.733c3.37 1.297 7.764 1.252 11.075.968a54.295 54.295 0 005.581-.78c.153-.03.273-.054.356-.072l.097-.02a.38.38 0 01.027-.006l.009-.002.002-.001h.001l-.43-1.953zM220 171v-33.963h-4V171h4zm-172 2h170v-4H48v4zm-2-35.963V171h4v-33.963h-4zm83 6.957a5.995 5.995 0 015.994-5.994v-4c-5.52 0-9.994 4.474-9.994 9.994h4zm5.994 5.994a5.995 5.995 0 01-5.994-5.994h-4c0 5.519 4.474 9.994 9.994 9.994v-4zm30.012 0h-30.012v4h30.012v-4zm5.994-5.994a5.995 5.995 0 01-5.994 5.994v4c5.52 0 9.994-4.475 9.994-9.994h-4zM165.006 138a5.995 5.995 0 015.994 5.994h4c0-5.52-4.474-9.994-9.994-9.994v4zm-30.012 0h30.012v-4h-30.012v4z" fill="#000" mask="url(#a)"/>
  <rect class="beardy__grow beardy__beard" x="49" y="158" width="168" height="27" rx="13" fill="#492D1D" stroke="#000" stroke-width="2"/>
  <path class="beardy__beard" fill="#492D1D" d="M50 154h166v18H50z"/>
</svg>
  <svg class="arrow" viewBox="0 0 256 512" title="long-arrow-alt-down">
    <path d="M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z"></path>
  </svg>
</div>
*
  box-sizing border-box

body
  min-height 100vh
  overflow hidden
  background hsl(0, 0%, 90%)

.resizable-container
  min-height 220px
  max-height 450px
  min-width 200px
  max-width 400px
  width 200px
  resize both
  overflow hidden
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -100px)
  contain layout size style
  --css-contain layout size style

  &:active .arrow
    display none

.arrow
  position absolute
  bottom 0
  right 0
  width 26px
  transform translate(-50%, 0) rotate(-45deg) scale(0.75)
  animation bounce 0.5s infinite linear

  & > path
    fill hsl(10, 75%, 50%)
    stroke black
    stroke-width 20px

.beardy
  width 200px
  position absolute
  top 0%
  left 50%
  transform translate(-50%, 0%)
  overflow visible !important

  &__grow
    // Take height from 32 to 220
    height var(--length, 32px)
    transition height 0.25s, fill 0s
    
  &__beard
    fill 'hsl(30, 50%, %s)' % calc(var(--lightness, 15) * 1%)

  &__eye
    transform-origin 50% 110px
    animation blink 8s infinite linear

  &__brow
    opacity var(--brow, 0)
    stroke-width 4px

@keyframes blink
  0%, 49%, 51%, 53%, 100%
    transform scaleY(1)
  50%, 52%
    transform scaleY(0.1)

@keyframes bounce
  50%
    transform translate(-50%, 0) rotate(-45deg) scale(0.75) translate(0, 15%)

@container (min-height: 250px) {
  .beardy {
    --length: 50px;
  }
}
@container (min-height: 300px) {
  .beardy {
    --length: 100px;
  }
}
@container (min-height: 350px) {
  .beardy {
    --length: 150px;
  }
}
@container (min-height: 400px) {
  .beardy {
    --length: 200px;
    --brow: 1;
  }
}
@container (min-height: 450px) {
  .beardy {
    --length: 250px;
    --brow: 1;
  }
}
@container (min-width: 250px) {
  .beardy {
    --lightness: 25;
  }
}
@container (min-width: 300px) {
  .beardy {
    --lightness: 45;
  }
}
@container (min-width: 350px) {
  .beardy {
    --lightness: 65;
  }
}
@container (min-width: 400px) {
  .beardy {
    --lightness: 85;
  }
}

@media --css-container and (min-width: 250px) {
  .beardy {
    --lightness: 25;
  }
}
@media --css-container and (min-width: 300px) {
  .beardy {
    --lightness: 45;
  }
}
@media --css-container and (min-width: 350px) {
  .beardy {
    --lightness: 65;
  }
}
@media --css-container and (min-width: 400px) {
  .beardy {
    --lightness: 85;
  }
}

@media --css-container and (min-height: 250px) {
  .beardy {
    --length: 50px;
  }
}
@media --css-container and (min-height: 300px) {
  .beardy {
    --length: 100px;
  }
}
@media --css-container and (min-height: 350px) {
  .beardy {
    --length: 150px;
  }
}
@media --css-container and (min-height: 400px) {
  .beardy {
    --length: 200px;
    --brow: 1;
  }
}
@media --css-container and (min-height: 450px) {
  .beardy {
    --length: 250px;
    --brow: 1;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/cqfill