CodePen Embed - snow globe christmas tree

<!--
  Live coding of this CodePen:
  https://youtube.com/live/O1kvnXBAkW0

  Adding the star:
  https://www.youtube.com/watch?v=33Q3CnBm0UU
 -->

<div class="scene">
  
  <div class="floor"></div>
  
  <div class="snowglobe">
    
    <div class="text">
      <i>click to restart...</i>
    </div>
    
    <div class="base">
      <i></i><i></i><i></i><i></i><i></i><i></i>
    </div>
    
    <div class="glass"></div>
    
    <div class="tree">
      <div class="trunk"></div>
      <div class="leafs">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
      <div class="lights">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
      <div class="star">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    
    <div class="flakes">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </div>
  
</div>

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  background-color: #001;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1000px;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
}

$srDuration: 120s;
$flDuration: 12s;

.scene {
  position: relative;
  animation: sceneRotate $srDuration infinite linear;
  
  @keyframes sceneRotate {
    to { rotate: y 1turn; }
  }
  
  * { position: absolute; }
}

.floor {
  inset: -100em;
  background-color: green;
  transform: rotateX(-90deg) translateZ(15em);
  background-image:
    radial-gradient(closest-side, transparent, #001),
    radial-gradient(closest-side, #000, transparent 15em),
    repeating-linear-gradient(#fff2 0, transparent, #fff2 2em),
    repeating-linear-gradient(90deg, #fff2 0, transparent, #fff2 2em)
    ;
}

.snowglobe {
  cursor: pointer;
  animation: var(--animation, snowglobe) $flDuration;
  
  @keyframes snowglobe {
    0%, 100% { pointer-events: none; }
  }

  &:active {
    --animation: none;
  }
}

.text {
  top: -20em;
  animation: sceneRotate $srDuration infinite linear reverse;
  
  i {
    font-size: 3em;  
    width: max-content; 
    translate: -50%;
    animation: var(--animation, text) $flDuration ease-in-out;
    
    @keyframes text {
      0%, 95% { opacity: 0; } 
      100% { opacity: 1; } 
    }  
  }
}

.base {
  transform: translateY(11em);
  
  i {
    inset: -10em -2.7em;
    background-color: maroon;
    background-image: radial-gradient(circle, transparent, 90%, #0007);
    transform: rotateX(-90deg) rotate(var(--angle, 0));
    
    @for $i from 0 to 6 {
      &:nth-child(#{$i + 1}) {
        --angle: #{$i * 30deg};
      }      
    }
    
    &::before, &::after {
      content: '';
      position: absolute;
      width: 100%; height: 4em;
      box-shadow: 0 0 1em #0007 inset;
      background-color: inherit;
      transform-origin: top;
      transform: rotateX(90deg);
    }
    
    &::after { top: 100%; }
  }
}

.glass {
  inset: -15em;
  background-image: radial-gradient(farthest-side at 50% 60%, transparent, 95%, #fff5);
  border-radius: 50%;
  animation: sceneRotate $srDuration infinite linear reverse;
  
  &::after {
    content: '';
    position: absolute;
    inset: 2em;
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 60%, transparent 65%, #ff7a 85%);
    filter: blur(1em);
    animation: lightblur $srDuration infinite ease-in-out;
    
    @keyframes lightblur {
      0%, 100% { rotate: -45deg; }
      50% { rotate: 45deg; }
    }
  }
}

.tree {
  .trunk {
    inset: -7em -1em;
    transform: translateY(4em);
    background-color: brown;
    border-radius: 50% / 90% 90% 3% 3%;
    animation: sceneRotate $srDuration infinite linear reverse;
  }

  .leafs i {
    top: var(--top, 0);
    width: 8em;
    aspect-ratio: 1;
    background-image: radial-gradient(circle at top left, #000, green);
    border-radius: 0 0 100% 0;
    transform-origin: top left;
    transform: rotateY(var(--ry)) rotateX(45deg) rotateZ(45deg) scale(var(--scale, 1));
    
    $angle: 0;
    @for $i from 0 to 48 {
      &:nth-child(#{$i + 1}) {
        $angle: $angle + 60 + random(60);
        --top: #{-5 + $i * 0.2}em;
        --ry: #{$angle}deg;
        --scale: #{0.25 + $i / 75};
      }      
    }
  }

  .lights i {
    inset: -0.4em;
    background-color: hsl(var(--hue) 100% 50%);
    background-image: radial-gradient(circle at top, transparent, #0007);
    box-shadow: 0 0 0.5em #fff7;
    transform: translatey(var(--ty)) rotateY(var(--ry, 0)) translateZ(var(--tz, 5em));
    border-radius: 50%;
    animation: lightRotate $srDuration infinite linear reverse;
    
    @keyframes lightRotate {
      from { transform: translatey(var(--ty)) rotateY(var(--ry, 0)) translateZ(var(--tz, 5em)) rotateY(calc(0deg - var(--ry))); }
      to { transform: translatey(var(--ty)) rotateY(var(--ry, 0)) translateZ(var(--tz, 5em)) rotateY(calc(360deg - var(--ry))); }
    }

    $angle: 0;
    @for $i from 0 to 48 {
      &:nth-child(#{$i + 1}) {
        $angle: $angle + 60 + random(60);
        --ty: #{-4 + $i * 0.25}em;
        --tz: #{1 + $i * 0.09}em;
        --ry: #{$angle}deg;
        --hue: #{random(360)};
      }      
    }
  }
}

.flakes {
  transform: translateY(11em) rotateX(-90deg);
  animation: var(--animation, flakes) $flDuration ease-in-out;
  
  @keyframes flakes {
    0%, 100% { transform: translateY(11em) rotateX(-90deg); }
    25%, 50% { transform: translateY(0em) rotateX(-90deg); }
  }
  
  i {
    inset: -0.35em;
    background-color: hsl(55 100% var(--light, 100%));
    rotate: var(--rotate1);
    transform: translateX(var(--tx1));
    animation:
      var(--animation, flakeRotate) $flDuration ease-in-out,
      var(--animation, flakeTransform) $flDuration ease-in-out;
    
    @keyframes flakeTransform {
      0% { transform: rotateY(0deg) translateX(var(--tx1)) rotate3d(1, 1, 1, 0deg); } 
      25% { transform: rotateY(var(--ry)) translateX(var(--tx2)) rotate3d(1, 1, 1, calc(var(--r3d) * 0.25)); animation-timing-function: linear; } 
      50% { transform: rotateY(var(--ry)) translateX(var(--tx2)) rotate3d(1, 1, 1, calc(var(--r3d) * 0.5)); } 
      100% { transform: rotateY(0deg) translateX(var(--tx1)) rotate3d(1, 1, 1, var(--r3d)); } 
    }
    
    @keyframes flakeRotate {
      from { rotate: var(--rotate1); }
      to { rotate: var(--rotate2); }
    }

    @for $i from 0 to 256 {
      &:nth-child(#{$i + 1}) {
        $r: random(360);
        --rotate1: #{$r}deg;
        --rotate2: #{$r + 5 * 360}deg;
        --tx1: #{(random(100) / 100) * 5 + 3}em;
        --tx2: #{(random(100) / 100) * 6 + 7}em;
        --light: #{70 + random(30)}%;
        --ry: #{random(120) - 45}deg;
        --r3d: #{random(8) + 8}turn;
      }      
    }
  }
}

.star {
  position: absolute;
  top: -5.5em;

  i {
    position: absolute;
    left: -1.25em;
    width: 2.5em; height: 0.5em;
    background-color: gold;
    background-image: linear-gradient(90deg, transparent, #000a);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    transform: 
      rotate(var(--angle))
      translateY(-0.41em)
      rotateX(var(--rx, 35deg));

    &:nth-child(5n + 1) { --angle: 0deg; }
    &:nth-child(5n + 2) { --angle: 72deg; }
    &:nth-child(5n + 3) { --angle: 144deg; }
    &:nth-child(5n + 4) { --angle: 216deg; }
    &:nth-child(5n + 5) { --angle: 288deg; }

    &:nth-child(n + 6) { --rx: -35deg; }
  }
}

View Compiled

This Pen is owned by Amit Sheen on CodePen.

See more by @amit_sheen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript