Иллюстрация кофейной чашки под Новый год на CSS

Красивая анимация в в виде кофейной чашки от которой плавно вверх поднимается пар. На чашке изображена елочка.  Данный сниппет отлично подойдёт для оформления тематического блога под Новый год или Рождество.

Pug

.mug.serve
  ul.xmas
    - for (var i = 1; i <= 4; i++) {
          li(class='xmas__0' + i + ' tree serve')
    - }
  .mug__bottom

CSS

$c-01: #e85a71; // Red
$c-02: #FFEEE4; // Creamy
$c-03: #41D3BD; // Mint Green
$c-04: #2EC4B6; // Green
$c-05: #4eb2b3; // Green Blue
$c-06: #519fa0; // Dark Green Blue
$c-07: #FADAD8; // Pink

$mug: 260px; // Resize mug by editing only this variable
$mug-height: $mug * 0.61538462;
$mug__handle: $mug * 0.13076923;
$mug__bottom: $mug / 3;

@mixin size ($width, $height: null) {
  width: $width;
  height: $height;
  
  @if $height==null {
    height: $width;
  }
}

@mixin tree ($size) {
  border-right-width: $size;
  border-bottom-width: $size;
  border-left-width: $size;
  margin-left: -($size);
}

body {
  background-color: $c-01;
  overflow: hidden;
}

.mug {
  @include size($mug, $mug-height);
  background-color: $c-02;
  border-bottom-left-radius: $mug;
  border-bottom-right-radius: $mug;
  margin-top: -($mug-height / 2);
  margin-left: -(($mug + $mug__handle) / 2);
  position: absolute;
  top: 60%;
  left: 50%;
  
  &:before {
    animation-name: blend;
    animation-duration: 2.3s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    color: $c-01;
    content: '\2248';
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: $mug__handle * 4;
    line-height: 0;
    position: absolute;
    top: 0;
    left: 36%;
    transform: rotate(100deg) translate($mug__handle);
    transform-style: preserve-3d; // Fixes Firefox Bug
    z-index: -1;
  }
  
  &:after {
    @include size($mug__handle);
    content: '';
    border: ($mug__handle * 0.75) solid $c-02;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: -($mug__handle * 1.25);
  }
  
  &__bottom {
    width: $mug__bottom;
    height: $mug * 0.05;
    background-color: $c-02;
    border-radius: 40%;
    margin-left: -($mug__bottom / 2);
    position: absolute;
    bottom: 0;
    left: 50%;
  }
}

.tree {
  @include size(0);
  border-style: solid;
  border-top-width: 0;
  border-color: transparent transparent $c-01 transparent;
  position: absolute;
  left: 50%;
}

.xmas {
  list-style-type: none;
  
  &__01 {
    @include tree($mug__handle / 2);
    border-bottom-color: $c-03;
    top: $mug__handle;
    z-index: 3;
  }
  
  &__02 {
    @include tree($mug__handle * 0.75);
    border-bottom-color: $c-04;
    top: $mug__handle * 1.25;
    z-index: 2;
  }
  
  &__03 {
    @include tree($mug__handle);
    border-bottom-color: $c-05;
    top: $mug__handle * 1.5;
    z-index: 1;
  }
  
  &__04 {
    @include tree($mug__handle * 1.25);
    border-bottom-color: $c-06;
    top: $mug__handle * 1.75;
    z-index: 0;
  }
}

.serve {
  animation-name: serve;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

@keyframes blend {
  40%, 50% {
    color: $c-07;
  }
  80%, 100% {
    color: $c-01;
    font-size: $mug__handle * 2.7;
    transform: rotate(95deg) translate(-$mug__handle * 6);
  }
}

@keyframes serve {
  100% {
    top: 150%;
  }
}