avatar fun / cutout effect (dubbed impossible avatar) / faces of tom

avatar-fun-cutout-effect-dubbed-impossible-avatar-faces-of-tom.markdown

avatar fun / cutout effect (dubbed impossible avatar) / faces of tom

their noggins sticking out. quote by Wes Bos. https://www.youtube.com/watch?v=0ua-Odhd0Go

A Pen by Tom Hermans on CodePen.

License.

index.html

<header>
  <h1>faces of me</h1>
  <p title="term coined by Wes Bos">some exploration into avatars with "their noggins sticking out"*.</p>
</header>
<main>

  <div class="myava-container" style="--myava-size: 120px; --bgcircle: linear-gradient(215deg, #19b2e7, #991381);">
    <div class="myava-circle"></div>
    <div class="myava-wrap">
      <div class="myava-image">
        <img src="https://i.ibb.co/Hf3vYJ01/avatar-thinking-TA-2025-12-09-13-12-44-Aneditoria-620586967-1-upscayl-4x-upscayl-standard-4x.webp" alt="Tom Avatar" />
      </div>
    </div>
    <div class="myava-wrap-outline"></div>
  </div>
  
  <div class="myava-container" style="--myava-size: 140px;  --bgcircle: linear-gradient(15deg, #17f8ff, #0d0d55)">
    <div class="myava-circle"></div>
    <div class="myava-wrap">
      <div class="myava-image">
        <img src="https://i.ibb.co/dwtz8gvD/avatar-600-TA-2026-01-25-13-03-29-Aneditoria-1209128566-2-upscayl-4x-upscayl-standard-4x.webp" src="" alt="Tom Avatar" />
      </div>
    </div>
    <div class="myava-wrap-outline"></div>
  </div>


  <div class="myava-container" style="--myava-size: 160px; --bgcircle: linear-gradient(15deg, #5eff17, #044217)">
    <div class="myava-circle"></div>
    <div class="myava-wrap">
      <div class="myava-image">
        <img src="https://i.ibb.co/93W7TThn/avatar-2-Qr8-GP-np-ASNk-Onn-UN4-F-upscayl-4x-upscayl-standard-4x.webp" src="" alt="Tom Avatar" />
      </div>
    </div>
    <div class="myava-wrap-outline"></div>
  </div>

  <div class="myava-container" style=" --bordercircle: oklch(0.96 0.19 108.68);">
    <div class="myava-circle"></div>
    <div class="myava-wrap">
      <div class="myava-image">
        <img src="https://i.ibb.co/kVq8dqNM/860565044910400305-square.webp" src="" alt="Tom Avatar" />
      </div>
    </div>
    <div class="myava-wrap-outline"></div>
  </div>

  <div class="myava-container" style="--myava-size: 160px;     --bgcircle: linear-gradient(15deg, #115c48, #f1ed0b);">
    <div class="myava-circle"></div>
    <div class="myava-wrap">
      <div class="myava-image">
        <img src="https://i.ibb.co/Dgz2TqxX/avatar-TA-2026-02-10-11-13-29-Aneditoria-697207757-0.webp" src="" alt="Tom Avatar" />
      </div>
    </div>
    <div class="myava-wrap-outline"></div>
  </div>

  
  <div class="myava-container" style="--myava-size: 140px; --bgcircle: linear-gradient(215deg, #e0f303, #e204ab)">
    <div class="myava-circle"></div>
    <div class="myava-wrap">
      <div class="myava-image">
        <img src="https://i.ibb.co/kVRf0F2D/avatar-chef-342-Aneditoria-2048138653-09-47-29-upscayl-4x-upscayl-standard-4x.webp" src="" alt="Tom Avatar" />
      </div>
    </div>
    <div class="myava-wrap-outline"></div>
  </div>

  <div class="myava-container" style="--myava-size: 120px;
    --bgcircle: linear-gradient(200deg, #ff1780, #e2db1a);">
    <div class="myava-circle"></div>
    <div class="myava-wrap">
      <div class="myava-image">
        <img src="https://i.ibb.co/DHYY5dfw/ava-60ce85fc-45be-46f9-b34b-75114e6e869c.webp" src="" alt="Tom Avatar" />
      </div>
    </div>
    <div class="myava-wrap-outline"></div>
  </div>

</main>

script.js

const imgs = [
  'https://i.ibb.co/Dgz2TqxX/avatar-TA-2026-02-10-11-13-29-Aneditoria-697207757-0.webp',
  'https://i.ibb.co/93W7TThn/avatar-2-Qr8-GP-np-ASNk-Onn-UN4-F-upscayl-4x-upscayl-standard-4x.webp',
  'https://i.ibb.co/5W15Xv7Y/avatar-L3-CHc8-ZP0-Wil-Xeo-Xmuy-So-upscayl-4x-upscayl-standard-4x.webp',
  'https://i.ibb.co/5W15Xv7Y/avatar-L3-CHc8-ZP0-Wil-Xeo-Xmuy-So-upscayl-4x-upscayl-standard-4x.webp'
]

style.scss

:root {
  --myava-size: 200px;
  --bgcircle: linear-gradient(-25deg, #e11213, #5748aa);
  --borderwidth: calc(var(--myava-size) / 24);
  --bordercircle: oklch(0.92 0.22 100);
  // --bordercircle: linear-gradient(#d19e1d, #ffd86e, #e3a812);
  // --bgcircle: oklch(0.5303 0.2126 28.53);

  --shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4,
    2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd,
    3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4,
    5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd,
    6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4,
    8px 7px 0px #5dabcd;
  --shadow2: 0 1px 0px #333,
 1px 0 0px #666,
  1px 2px 1px #333,
  2px 1px 1px #666,
  2px 3px 1px #333,
  3px 2px 1px #666,
  3px 4px 1px #333,
  4px 3px 1px #555,
  4px 5px 1px #222,
  5px 4px 2px #444,
  5px 6px 2px #111;
  --deep: 0 1px 0 #aeaeae, 0 2px 0 #acacac, 0 3px 0 #aaaaaa, 0 4px 0 #a8a8a8,
    0 5px 0 #a6a6a6, 0 6px 0 #a4a4a4, 0 7px 0 #aaa, 0 8px 0 #a0a0a0,
    0 9px 0 #818181, 0 10px 0 #8c8c8c, 0 11px 0 #8a8a8a;
  --dropoff: rgba(119, 119, 119, 0.99) 0.0348995px 0.999391px 1.5px,
    rgba(119, 119, 119, 0.98) 0.069799px 1.99878px 1.5px,
    rgba(119, 119, 119, 0.965) 0.104698px 2.99817px 1.5px,
    rgba(119, 119, 119, 0.937) 0.139598px 3.99756px 1.5px,
    rgba(119, 119, 119, 0.89) 0.174497px 4.99695px 1.5px,
    rgba(119, 119, 119, 0.81) 0.209397px 5.99635px 1.5px,
    rgba(119, 119, 119, 0.694) 0.244296px 6.99574px 1.5px,
    rgba(119, 119, 119, 0.55) 0.279196px 7.99513px 1.5px,
    rgba(119, 119, 119, 0.396) 0.314095px 8.99452px 1.5px,
    rgba(119, 119, 119, 0.26) 0.348995px 9.99391px 1.5px,
    rgba(119, 119, 119, 0.157) 0.383894px 10.9933px 1.5px,
    rgba(119, 119, 119, 0.09) 0.418794px 11.9927px 1.5px,
    rgba(119, 119, 119, 0.05) 0.453693px 12.9921px 1.5px,
    rgba(119, 119, 119, 0.027) 0.488593px 13.9915px 1.5px,
    rgba(119, 119, 119, 0.016) 0.523492px 14.9909px 1.5px,
    rgba(119, 119, 119, 0.008) 0.558392px 15.9903px 1.5px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
img {
  width: calc(var(--myava-size) * 1.4);
}
.myava-container {
  display: inline-block;
  position: relative;
  text-align: center;
}

.myava-wrap {
  width: var(--myava-size);
  height: calc(var(--myava-size) + 50%);
  border-radius: 0 0 100% 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

.myava-wrap-outline {
  width: var(--myava-size);
  height: calc(var(--myava-size) / 2);
  border: var(--borderwidth, 5px) solid var(--bordercircle, #333);
  // box-shadow: 0px 8px 2px oklch(from var(--bgcircle) calc(l - .25) calc(c - .1) h);
  box-shadow: var(--dropoff);
  position: absolute;
  bottom: 0;
  border-bottom-left-radius: 100vw;
  border-bottom-right-radius: 100vw;
  border-top: none;
}

.myava-circle {
  background: var(--bgcircle, #0bacba);
  width: var(--myava-size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--borderwidth, 5px) solid var(--bordercircle, #333);
  position: relative;
}

.myava-image {
  position: absolute;
  inset: 5% 50%;
  translate: -50% 0;
}

.myava-image {
  width: calc(var(--myava-size) + 50%);
  height: auto;
  pointer-events: none;
}

// HOVERS
.myava-container {
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.55, 0.76, 0.57, 1.68);
  &:hover {
    // outline: 4px solid white;
    transform: scale(1.09);
    animation: grow;
  }
}

// pen agnostic
body {
  --sans1: "Bricolage Grotesque", "whirly birdie";
  --fontwdth: 100;
  --fontwght: 550;
  --fontital: 0;
  --outline: 0px;
  background: #5fffff;
  background: radial-gradient(#5fffff, #343a7b);
  display: grid;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  font-family: var(--sans1), "Suez One", sans-serif;

  place-content: center;
  min-height: 100dvh;
  // gap: 25vh;
  // zoom: 2;
  > * {
    margin: 0 auto;
  }
}
main {
  display: flex;
  flex-wrap: wrap;
  gap: calc(75px - 5vw); // smaller gap on mobile - simple.
  min-height: 260px;
  justify-content: flex-start;
  align-items: center;
}

header {
  
  color: #fafafa;
  text-align: center;

  p {
    font-size: clamp(1.066rem, 1.066rem + 0.13vw, 1.333rem);
    background: var(--yellow-1, #ffdd00);
    box-shadow: var(--shadow2);
    color: var(--yellow-11, #000);
    display: inline-block;
    padding: var(--size-2) var(--size-4);
    border: 3px solid;
    padding: 1rem;
    max-width: 30ch;
    transform: translateY(-4vh);
    @media only screen and (min-width: 500px) {
      transform: translate(20vw) translateY(-7vh) rotate(-5deg);
    }
    
  }
  h1 {
    font-size: clamp(3rem, 3rem + 0.6vw, 4.566rem);
    text-shadow: rgb(10, 95, 113) 0px 0px 1.4px,
      rgb(10, 95, 113) 0.766044px 0.642788px 1.4px,
      rgb(10, 95, 113) 1.53209px 1.28558px 1.4px,
      rgba(10, 95, 113, 0.996) 2.29813px 1.92836px 1.4px,
      rgba(10, 95, 113, 0.996) 3.06418px 2.57115px 1.4px,
      rgba(10, 95, 113, 0.992) 3.83022px 3.21394px 1.4px,
      rgba(10, 95, 113, 0.984) 4.59627px 3.85673px 1.4px,
      rgba(10, 95, 113, 0.973) 5.36231px 4.49951px 1.4px,
      rgba(10, 95, 113, 0.953) 6.12836px 5.1423px 1.4px,
      rgba(10, 95, 113, 0.918) 6.8944px 5.78509px 1.4px,
      rgba(10, 95, 113, 0.86) 7.66044px 6.42788px 1.4px,
      rgba(10, 95, 113, 0.773) 8.42649px 7.07066px 1.4px,
      rgba(10, 95, 113, 0.655) 9.19253px 7.71345px 1.4px,
      rgba(10, 95, 113, 0.514) 9.95858px 8.35624px 1.4px,
      rgba(10, 95, 113, 0.37) 10.7246px 8.99903px 1.4px,
      rgba(10, 95, 113, 0.247) 11.4907px 9.64181px 1.4px,
      rgba(10, 95, 113, 0.153) 12.2567px 10.2846px 1.4px,
      rgba(10, 95, 113, 0.09) 13.0228px 10.9274px 1.4px;
    font-family: var(--sans1), "Suez One", sans-serif;
    font-variation-settings: "wdth" var(--fontwdth), "wght" var(--fontwght),
      "ital" var(--fontital);
    -webkit-text-stroke-width: var(--outline);
    -webkit-text-stroke-color: #236b1a;
    paint-order: stroke fill;
    position: relative;
  }
}