Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="mama-llamas"></div>

<!-- for fun -->
<div class="audio">
  <button type="button" onclick="document.getElementById('audio').play();document.body.classList.add('animate');this.style.display = 'none';">
    <span>
      No Drama Llama!
    </span>
  </button>
  
  <audio id="audio" src="https://pablotheflamingo.com/assets/audio/music.mp3"></audio>
</div>
              
            
!

CSS

              
                @property --mouth-position {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --glass-position {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --body-position {
  syntax: "<percentage>";
  initial-value: 100%;
  inherits: false;
}

:root {
  --body-position: 100%;
  --mouth-position: 0%;
  --glass-position: 0%;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column-reverse;
  background-color: #888888;
  transition: background-color 1s;
}
body.animate {
  background-color: #F18789;
}

.audio {
  width: 500px;
  justify-content: center;
  display: flex;
  margin-bottom: 10vh;
}

button {
  background: #fe8c4c;
  border-radius: 12px;
  border: none;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
}

button span {
  display: block;
  padding: 12px 42px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: #fec43b;
  transform: translateY(-6px);
}

button:hover span {
  transform: translateY(-2px);
}

.mama-llamas {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 410px;
  background-repeat: no-repeat;
  background-image: 
  radial-gradient(ellipse at 50% 100%, #644243 50%, #644243 50%, transparent 50%),
  radial-gradient(ellipse at 50% 100%, white 50%, white 50%, transparent 50%),
  radial-gradient(ellipse at 50% 100%, #855A3A 50%, #855A3A 50%, transparent 50%);
  background-position: -11px var(--body-position),
  123px var(--body-position),
  315px var(--body-position);
  background-size: 195px 55px,
  255px 75px,
  202.5px 60px;
}

body.animate .mama-llamas {
  animation: body-move 1s linear infinite;
}

body.animate .mama-llamas:before {
  animation: neck-move 7s linear infinite;
}
body.animate .mama-llamas:after {
  animation: neck-move 7s linear infinite;
}

@keyframes neck-move {
  0% {
    transform: translate(0px, 0px) rotate(0);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  5% {
    transform: translate(0px, 8px) rotate(0);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }
  10% {
    transform: translate(0px, 0px) rotate(0);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  15% {
    transform: translate(0px, 8px) rotate(0);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }
  20% {
    transform: translate(0px, 0px) rotate(0);
    --mouth-position: 0%;
    --glass-position: 0%;
  }



  25% {
    transform: translate(-2px, 0px) rotate(2deg);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  25% {
    transform: translate(-2px, 8px) rotate(2deg);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }
  30% {
    transform: translate(-2px, 0px) rotate(2deg);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  35% {
    transform: translate(-2px, 8px) rotate(2deg);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }
  40% {
    transform: translate(-2px, 0px) rotate(2deg);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  45% {
    transform: translate(-2px, 8px) rotate(2deg);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }


  50% {
    transform: translate(0px, 0px) rotate(0);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  55% {
    transform: translate(0px, 8px) rotate(0);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }
  60% {
    transform: translate(0px, 0px) rotate(0);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  65% {
    transform: translate(0px, 8px) rotate(0);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }


  70% {
    transform: translate(0px, 0px) rotate(-2deg);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  75% {
    transform: translate(0px, 8px) rotate(-2deg);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }
  80% {
    transform: translate(0px, 0px) rotate(-2deg);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  85% {
    transform: translate(0px, 8px) rotate(-2deg);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }
  90% {
    transform: translate(0px, 0px) rotate(-2deg);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
  95% {
    transform: translate(0px, 8px) rotate(-2deg);
    --mouth-position: 2%;
    --glass-position: 1.5%;
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
    --mouth-position: 0%;
    --glass-position: 0%;
  }
}

@keyframes body-move {
  0% {
    --body-position: 100%;
  }
  50% {
    --body-position: 100.5%;
  }
  100% {
    --body-position: 100%;
  }
}

.mama-llamas:before {
  content: "";
  display: block;
  width: 100%;
  height: 238px;
  background-repeat: no-repeat;
  bottom: 0;
  position: absolute;
  background-image:
  linear-gradient(124deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(90deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(66deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%), 
  linear-gradient(98deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%), 
  linear-gradient(98deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%), 
  linear-gradient(98deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%), 
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, #f39c9d 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, #f39c9d 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, #f39c9d 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, #f39c9d 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, #f39c9d 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, #f39c9d 50%, transparent 50%),
  radial-gradient(ellipse at 50% 0%, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%),
  radial-gradient(ellipse at 50% 0%, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%),
  radial-gradient(ellipse at 50% 0%, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%), /* necklace right */
  linear-gradient(98deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(114deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(82deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(123deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(99deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(63deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(123deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(99deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(63deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(133deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(103deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(66deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(110deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(110deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(98deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(134deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(96deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(67deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(112deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(98deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(98deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(75deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  linear-gradient(53deg, transparent 50%, #e2c340 50%, #e2c340 65%, transparent 65%),
  radial-gradient(ellipse at 39% 23%, transparent 50%, #efb71e 50%, #efb71e 55%, transparent 55%),
  radial-gradient(ellipse at 39% 23%, transparent 50%, #efb71e 50%, #efb71e 55%, transparent 55%),
  radial-gradient(ellipse at 39% 23%, transparent 50%, #efb71e 50%, #efb71e 55%, transparent 55%), /* necklace white */
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(ellipse at 50% 0%, transparent 50%, #d7d6d9 50%, #d7d6d9 55%, transparent 55%),  /* necklace 3 */
  radial-gradient(ellipse at 50% 0%, transparent 50%, #6688a3 50%, #6688a3 60%, transparent 60%),
  radial-gradient(ellipse at 68% 28%, transparent 50%, white 50%, white 60%, transparent 60%),
  radial-gradient(ellipse at 50% 0%, transparent 50%, white 50%, white 60%, transparent 60%),
  radial-gradient(ellipse at 50% 0%, transparent 50%, white 50%, white 60%, transparent 60%),
  radial-gradient(ellipse at 34% 30%, transparent 50%, white 50%, white 60%, transparent 60%), /* necklace 2 */
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 50%, transparent 50%),
  linear-gradient(-67deg, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%),
  linear-gradient(-67deg, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%),
  linear-gradient(-67deg, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%),
  linear-gradient(90deg, transparent 50%, #d7d6d9 50%, #d7d6d9 63%, transparent 63%),
  linear-gradient(67deg, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%),
  linear-gradient(67deg, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%),
  linear-gradient(67deg, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%), 
  radial-gradient(ellipse at 50% 0%, transparent 50%, #d7d6d9 50%, #d7d6d9 60%, transparent 60%), /* necklace 1 */
  linear-gradient(95deg, transparent 50%, #644243 0 100%),
  linear-gradient(-95deg, transparent 50%, #644243 0 100%),
  linear-gradient(95deg, transparent 50%, white 0 100%),
  linear-gradient(-95deg, transparent 50%, white 0 100%),
  linear-gradient(95deg, transparent 50%, #855A3A 0 100%),
  linear-gradient(-95deg, transparent 50%, #855A3A 0 100%);
  background-position:
  360px 170px,
  366px 174px,
  370px 172px, 
  384px 176px,
  390px 176px,
  396px 175px, 
  413px 176px,
  418px 176px,
  422px 175px, 
  437px 172px,
  442px 169px,
  447px 169px, 
  362px 120px,
  377px 128px,
  395px 132px,
  418px 132px,
  437px 129px,
  452px 121px,
  461px 205px,
  441px 215px,
  421px 218px,
  398px 218px,
  374px 215px,
  352px 203px,
  352px 203px,
  357px 161px,
  363px 118px, /* necklace right */
  290px 195px,
  296px 193px,
  301px 191px,
  258px 203px,
  265px 203px,
  272px 203px,
  220px 203px,
  227px 203px,
  232px 203px,
  183px 194px,
  190px 196px,
  198px 197px,
  195px 144px,
  204px 144px,
  210px 144px,
  230px 146px,
  235px 146px,
  240px 146px,
  260px 144px,
  265px 144px,
  270px 144px,
  291px 139px,
  296px 138px,
  301px 136px,
  200px 99px,
  207px 100px,
  212px 100px,
  232px 101px,
  237px 100px,
  242px 100px,
  258px 100px,
  264px 99px,
  270px 99px,
  288px 94px,
  292px 95px,
  296px 93px,
  191px 163px,
  195px 123px,
  199px 78px, /* necklace white */
  125px 213px,
  105px 220px,
  83px 223px,
  62px 223px,
  41px 218px,
  24px 209px,
  22px 210px, /* necklace 3 */
  23px 162px,
  28px 167px,
  53px 176px,
  82px 177px,
  110px 170px, /* necklace 2 */
  131px 126px,
  31px 126px,
  42px 134px,
  59px 138px,
  82px 141px,
  102px 137px,
  120px 132px,
  30px 119px,
  59px 130px,
  41px 125px,
  75px 132px,
  93px 130px,
  111px 125px,
  121px 118px, /* necklace 1 */
  31px 115px,
  4px 100%,
  86px 100%,
  145px 100%,
  250px 100%,
  334px 100%,
  414px 100%;
  background-size:
  20px 15px,
  20px 15px,
  20px 15px, 
  20px 15px,
  20px 15px,
  20px 15px, 
  20px 15px,
  20px 15px,
  20px 15px, 
  20px 15px,
  20px 15px,
  20px 15px, 
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  126px 21px,
  118px 21px,
  105px 21px, /* necklace right */
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  20px 15px,
  150px 52px,
  140px 30px,
  130px 30px, /* necklace white */
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  15px 15px,
  125px 21px, /* necklace 3 */
  125px 20px,
  29px 15px,
  29px 15px,
  29px 15px,
  29px 15px, /* necklace 2 */
  10px 10px,
  10px 10px,
  10px 10px,
  10px 10px,
  10px 10px,
  10px 10px,
  10px 10px,
  20px 12px,
  20px 12px,
  20px 12px, 
  20px 12px,
  20px 12px,
  20px 12px,
  20px 12px, /* necklace 1 */
  109px 20px,
  82px 74%,
  82px 74%,
  112px 100%,
  112px 100%,
  82px 74%,
  82px 74%;
}

.mama-llamas:after {
  top: 7px;
  content: "";
  display: block;
  width: 100%;
  height: 250px;
  background-repeat: no-repeat;
  position: absolute;
  background-image: 
  radial-gradient(circle at center, #efb71e 10%, #f5df9f 10%, #f5df9f 20%, #efb71e 20%, #efb71e 30%, #efb71e 40%, #f5df9f 40%, #f5df9f 50%, transparent 50%),
  radial-gradient(circle at center, #f39c9d 10%, #ffb9c0 10%, #ffb9c0 20%, #f39c9d 20%, #f39c9d 30%, #f39c9d 40%, #ffb9c0 40%, #ffb9c0 50%, transparent 50%),
  radial-gradient(circle at center, #6688a3 10%, #819db3 10%, #819db3 20%, #6688a3 20%, #6688a3 30%, #6688a3 40%, #819db3 40%, #819db3 50%, transparent 50%),/* hair --rught-- */
  radial-gradient(ellipse at 50% 100%, transparent 50%, white 50%, white 70%, transparent 70%),
  radial-gradient(ellipse at 50% 50%, transparent 50%, white 50%, white 57%, transparent 57%),
  radial-gradient(ellipse at 50% 50%, transparent 50%, white 50%, white 57%, transparent 57%), /* sunglasses --rught-- */
  radial-gradient(ellipse at 50% 100%, transparent 50%, #3C2A2A 50%, #3C2A2A 70%, transparent 70%),
  radial-gradient(ellipse at 50% 100%, transparent 50%, #3C2A2A 50%, #3C2A2A 70%, transparent 70%),
  linear-gradient(-45deg, #3C2A2A 20%, transparent 21%),
  linear-gradient(45deg, #3C2A2A 20%, transparent 21%), /* eyes --rught-- */
  radial-gradient(ellipse at 50% 0, transparent 50%,#3C2A2A 50%, #3C2A2A 70%, transparent 70%),
  radial-gradient(ellipse at 50% 0, transparent 50%,#3C2A2A 50%, #3C2A2A 70%, transparent 70%),
  linear-gradient(to right, #3C2A2A 0 100%),
  linear-gradient(to bottom left, #3C2A2A 50%,transparent 50%),
  linear-gradient(to bottom right, #3C2A2A 50%,transparent 50%),
  radial-gradient(#3C2A2A 50%,transparent 50%),
  radial-gradient(#3C2A2A 50%,transparent 50%),
  radial-gradient(ellipse at 50% 50%, #9c734d 0%, #9c734d 50%, transparent 50%), /* mouth --rught-- */
  radial-gradient(#855A3A 50%, transparent 50%),
  radial-gradient(#855A3A 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, #855A3A 0%, #855A3A 50%, transparent 50%), /* head --rught-- */
  radial-gradient(ellipse at 50% 50%, #9c734d 0%, #9c734d 50%, transparent 50%), 
  radial-gradient(ellipse at 50% 50%, #9c734d 0%, #9c734d 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, #855A3A 0%, #855A3A 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, #855A3A 0%, #855A3A 50%, transparent 50%), /* ears --rught-- */
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%),
  radial-gradient(circle at center, #d7d6d9 50%, transparent 50%), /* hair --white-- */
  radial-gradient(ellipse at 50% 100%, transparent 50%, #efb71e 50%, #efb71e 70%, transparent 70%),
  radial-gradient(ellipse at 50% 50%, transparent 50%, #efb71e 50%, #efb71e 57%, transparent 57%),
  radial-gradient(ellipse at 50% 50%, transparent 50%, #efb71e 50%, #efb71e 57%, transparent 57%), /* sunglasses --white-- */
  radial-gradient(ellipse at 50% 100%, transparent 50%, #3d3a3d 50%, #3d3a3d 65%, transparent 65%),
  radial-gradient(ellipse at 50% 100%, transparent 50%, #3d3a3d 50%, #3d3a3d 65%, transparent 65%),
  linear-gradient(-45deg, #3d3a3d 20%, transparent 21%),
  linear-gradient(45deg, #3d3a3d 20%, transparent 21%), /* eyes --white-- */
  radial-gradient(ellipse at 50% 0, transparent 50%,#3d3a3d 50%, #3d3a3d 70%, transparent 70%),
  radial-gradient(ellipse at 50% 0, transparent 50%,#3d3a3d 50%, #3d3a3d 70%, transparent 70%),
  linear-gradient(to right, #3d3a3d 0 100%),
  linear-gradient(to bottom left, #3d3a3d 50%,transparent 50%),
  linear-gradient(to bottom right, #3d3a3d 50%,transparent 50%),
  radial-gradient(#3d3a3d 50%,transparent 50%),
  radial-gradient(#3d3a3d 50%,transparent 50%),
  radial-gradient(ellipse at 50% 50%, #d7d6d9 0%, #d7d6d9 50%, transparent 50%), /* mouth --white-- */
  radial-gradient(white 50%, transparent 50%),
  radial-gradient(white 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, white 0%, white 50%, transparent 50%), /* head --white-- */
  radial-gradient(ellipse at 50% 50%, #c4c4ce 0%, #c4c4ce 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, #c4c4ce 0%, #c4c4ce 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, white 0%, white 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, white 0%, white 50%, transparent 50%), /* ears --white-- */
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  radial-gradient(circle at center, white 50%, transparent 50%),
  linear-gradient(340deg, #FFC43F 20%, transparent 21%),
  linear-gradient(210deg, #FFC43F 20%, transparent 21%),
  linear-gradient(-340deg, #FFC43F 20%, transparent 21%),
  linear-gradient(-210deg, #FFC43F 20%, transparent 21%), /* bow */
  radial-gradient(ellipse at 50% 100%, transparent 50%, #6688a3 50%, #6688a3 70%, transparent 70%),/* sunglasses */
  radial-gradient(ellipse at 50% 50%, transparent 50%, #6688a3 50%, #6688a3 57%, transparent 57%),
  radial-gradient(ellipse at 50% 50%, transparent 50%, #6688a3 50%, #6688a3 57%, transparent 57%),
  radial-gradient(ellipse at 50% 100%, transparent 50%, #3C2A2A 50%, #3C2A2A 70%, transparent 70%),/* eyes */
  radial-gradient(ellipse at 50% 100%, transparent 50%, #3C2A2A 50%, #3C2A2A 70%, transparent 70%),
  linear-gradient(-45deg, #3C2A2A 20%, transparent 21%),
  linear-gradient(45deg, #3C2A2A 20%, transparent 21%),
  radial-gradient(ellipse at 50% 0, transparent 50%,#3C2A2A 50%, #3C2A2A 70%, transparent 70%),/* mouth */
  radial-gradient(ellipse at 50% 0, transparent 50%,#3C2A2A 50%, #3C2A2A 70%, transparent 70%),
  linear-gradient(to right, #3C2A2A 0 100%),
  linear-gradient(to bottom left, #3C2A2A 50%,transparent 50%),
  linear-gradient(to bottom right, #3C2A2A 50%,transparent 50%),
  radial-gradient(#3C2A2A 50%,transparent 50%),
  radial-gradient(#3C2A2A 50%,transparent 50%),
  radial-gradient(ellipse at 50% 50%, #9a7069 0%, #9a7069 50%, transparent 50%), 
  radial-gradient(#644243 50%, transparent 50%), /* head */
  radial-gradient(#644243 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, #644243 0%, #644243 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, #9a7069 0%, #9a7069 50%, transparent 50%), /* ears */
  radial-gradient(ellipse at 50% 50%, #9a7069 0%, #9a7069 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, #644243 0%, #644243 50%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, #644243 0%, #644243 50%, transparent 50%); 
  background-position: 
  84% 44%,
  80% 47%, 
  81% 40%,/* hair --right-- */
  85.5% calc(63% + var(--glass-position)),
  82% calc(73% + var(--glass-position)),
  98% calc(73% + var(--glass-position)), /* sunglasses --right-- */
  91% 68%,
  81% 68%,
  76.5% 66%,
  92.5% 66%, /* eyes --right-- */
  84% calc(91% + var(--mouth-position)),
  86% calc(91% + var(--mouth-position)),
  84.3% calc(88% + var(--mouth-position)),
  84% calc(84% + var(--mouth-position)),
  85.6% calc(84% + var(--mouth-position)),
  84.3% calc(82% + var(--mouth-position)),
  85.8% calc(82% + var(--mouth-position)),
  89% 103%, /* mouth --right-- */
  101% 70%,
  101% 196%,
  100.5% 116%, /* head --right-- */
  94.5% 63%,
  75% 63%,
  76% 57%, 
  96% 57%, /* ears --right-- */
  50% 20%,
  55% 19%,
  57% 20%,
  55% 20%,
  52% 22%,
  47% 19%,
  49% 17%,
  51% 17%,
  53% 17%,
  47% 25%,
  44% 23%,
  45% 18%,
  53% 27%,
  51% 27%,
  49% 25%,
  54% 26%,
  56% 26%,
  57% 24%, /* hair --white-- */
  51% calc(42% + var(--glass-position)),
  42.5% calc(47% + var(--glass-position)),
  59.5% calc(47% + var(--glass-position)), /* sunglasses --white-- */
  58% 47%,
  44% 47%,
  41% 48.3%,
  61% 48.3%, /* eyes --white-- */
  52.5% calc(71% + var(--mouth-position)),
  50% calc(71% + var(--mouth-position)),
  51.3% calc(68% + var(--mouth-position)),
  50% calc(61.9% + var(--mouth-position)),
  52.1% calc(61.9% + var(--mouth-position)),
  50% calc(59.5% + var(--mouth-position)),
  52% calc(59.5% + var(--mouth-position)),
  51% 72%, /* mouth --white-- */
  51% 82%,
  51% 36%,
  51% 60%, /* head --white-- */
  61% -6%,
  40.5% -6%,
  40% -26%,
  61% -26%, /* ears --white-- */
  20% 45%,
  17.5% 47.5%,
  18% 45%,
  20% 51%,
  19% 48%,
  13.3% 51%,
  13% 44.5%,
  16% 47%,
  14% 49%,
  14.5% 46%,
  13% 47%,
  14% 37%,/* bow */
  14% 56%,
  14% 37%,
  14% 56%,
  16% calc(64% + var(--glass-position)), /* sunglasses */
  4.5% calc(73% + var(--glass-position)),
  19% calc(73% + var(--glass-position)),
  21% 68%, /* eyes */
  9% 68%,
  7.5% 66%,
  25.5% 66%,
  17.8% calc(91% + var(--mouth-position)), /* mouth */
  15.8% calc(91% + var(--mouth-position)),
  17.5% calc(88% + var(--mouth-position)),
  16.2% calc(84% + var(--mouth-position)),
  17.8% calc(84% + var(--mouth-position)),
  16% calc(82% + var(--mouth-position)),
  17.6% calc(82% + var(--mouth-position)),
  12% 103%, 
  0% 70%,/* head */
  0% 196%,
  0.5% 116%,
  26% 69%,/* ears */
  6.5% 69%,
  5% 63%, 
  25% 63%;
  background-size: 
  40px 40px,
  40px 40px, 
  40px 30px,/* sunglasses --right-- */
  18px 6px,
  75px 62px,
  75px 62px, /* sunglasses --right-- */
  30px 10px,
  30px 10px,
  9px 24px,
  9px 24px, /* eyes --right-- */
  12px 8px,
  12px 8px,
  2px 20px,
  8px 8px,
  8px 8px,
  12px 12px,
  12px 12px,
  70px 90px, /* mouth --right-- */
  169px 37%,
  169px 83%,
  168px 57%, /* head --right-- */
  14px 150px,
  14px 150px,
  30px 170px,
  30px 170px, /* ears --right-- */
  25px 25px,
  25px 25px,
  25px 25px,
  25px 25px,
  20px 20px,
  25px 25px,
  25px 25px,
  25px 25px,
  25px 25px,
  25px 25px,
  25px 25px,
  25px 25px,
  25px 25px,
  20px 20px,
  25px 25px,
  20px 20px,
  20px 20px,
  20px 20px, /* hair --white-- */
  18px 6px, 
  80px 80px,
  80px 80px,
  30px 30px,/* sunglasses --white-- */
  30px 30px,
  9px 24px,
  9px 24px, /* eyes --white-- */
  14px 8px,
  14px 8px,
  2px 20px,
  10px 10px,
  10px 10px,
  16px 14px,
  16px 14px,
  70px 90px, /* mouth --white-- */
  169px 57%,
  169px 83%,
  168px 57%, /* head --white-- */
  14px 150px,
  14px 150px,
  30px 170px,
  30px 170px, /* ears --white-- */
  6px 6px,
  5px 5px,
  4px 4px,
  4px 4px,
  6px 6px,
  4px 4px,
  6px 6px,
  5px 5px,
  6px 6px,
  5px 5px,
  4px 4px,
  40px 40px,/* bow */
  40px 40px,
  40px 40px,
  40px 40px,
  18px 6px,/* sunglasses */
  72px 50px,
  72px 50px,
  30px 10px, /* eyes */
  30px 10px,
  9px 24px,
  9px 24px,
  12px 8px, /* mouth */
  12px 8px,
  2px 20px,
  8px 8px,
  8px 8px,
  12px 12px,
  12px 12px,
  70px 90px,
  169px 37%, /* head */
  169px 83%,
  168px 57%,
  14px 150px,/* ears */
  14px 150px,
  30px 170px,
  30px 170px;
}

@media only screen and (max-width: 600px) {
  .mama-llamas:before {
    display: none;
  }
}
              
            
!

JS

              
                /*

Your browser 
should support CSS Houdini for the better animation. ¯\_(ツ)_/¯

*/
              
            
!
999px

Console