<div id="container">
  
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 355 563.18"><defs><style>.cls-1{opacity:0.25;}.cls-2{fill:#5c4742;}.cls-3{fill:#0d5c63;}.cls-4{fill:#44a1a0;}.cls-5{fill:#ffc857;}.cls-6{fill:#247ba0;}.cls-7{fill:#f25f5c;}.cls-8{fill:#7cb518;}.cls-9{fill:#c81d25;}.cls-10{opacity:0.23;}.cls-11{fill:#ffba08;}.cls-12,.cls-14{fill:none;stroke-miterlimit:10;stroke-width:4px;}.cls-12{stroke:#ffba08;}.cls-13{fill:#f2bb05;}.cls-14{stroke:#c81d25;}.cls-15{fill:#1985a1;}</style></defs><title>xmas</title><g id="tree"><ellipse id="shadow" class="cls-1" cx="177.5" cy="535.18" rx="177.5" ry="28"/><rect id="wood" class="cls-2" x="156" y="430.18" width="48" height="113"/><path class="cls-3" d="M869.09,255.34l-113,390.85A15.12,15.12,0,0,0,770.6,665.5H998.31a15.12,15.12,0,0,0,14.51-19.37L898.11,255.29C893.85,240.78,873.29,240.82,869.09,255.34Z" transform="translate(-703 -191.82)"/><path class="cls-4" d="M1013.32,645.63,898.61,254.79A14.82,14.82,0,0,0,884,243.93V665H998.81A15.12,15.12,0,0,0,1013.32,645.63Z" transform="translate(-703 -191.82)"/></g><g id="star"><path class="cls-5" d="M889.72,195.69l5.81,11.76a6.93,6.93,0,0,0,5.22,3.8l13,1.88A6.94,6.94,0,0,1,917.58,225l-9.39,9.16a6.94,6.94,0,0,0-2,6.14l2.22,12.93a6.94,6.94,0,0,1-10.07,7.31l-11.61-6.1a7,7,0,0,0-6.46,0l-11.61,6.1a6.94,6.94,0,0,1-10.07-7.31l2.22-12.93a6.94,6.94,0,0,0-2-6.14L849.42,225a6.94,6.94,0,0,1,3.85-11.84l13-1.88a6.93,6.93,0,0,0,5.22-3.8l5.81-11.76A6.93,6.93,0,0,1,889.72,195.69Z" transform="translate(-703 -191.82)"/></g><g id="balls"><circle id="ball12" class="cls-6" cx="188.5" cy="270.68" r="13.5"/><circle id="ball11" class="cls-6" cx="110.5" cy="354.68" r="13.5"/><circle id="ball10" class="cls-6" cx="202.5" cy="126.68" r="13.5"/><circle id="ball9" class="cls-7" cx="114.5" cy="266.68" r="13.5"/><circle id="ball8" class="cls-7" cx="232.5" cy="199.68" r="13.5"/><circle id="ball7" class="cls-7" cx="239.5" cy="440.68" r="13.5"/><circle id="ball6" class="cls-8" cx="293.5" cy="421.68" r="13.5"/><circle id="ball5" class="cls-8" cx="157.5" cy="106.68" r="13.5"/><circle id="ball4" class="cls-8" cx="178.5" cy="359.68" r="13.5"/><circle id="ball3" class="cls-5" cx="95.5" cy="431.68" r="13.5"/><circle id="ball2" class="cls-5" cx="242.5" cy="340.68" r="13.5"/><circle id="ball1" class="cls-5" cx="169.5" cy="181.68" r="13.5"/></g><g id="gift1"><rect id="bottom" class="cls-9" x="34" y="477.18" width="95" height="65"/><rect id="cover" class="cls-9" x="28" y="477.18" width="107" height="12"/><rect class="cls-10" x="34" y="489.18" width="95" height="8"/><rect id="ribbon" class="cls-11" x="76" y="477.18" width="12" height="65"/><path class="cls-12" d="M786.52,668.78a59.7,59.7,0,0,1,11.56-14.25,15.76,15.76,0,0,1,6.67-4c2.55-.6,5.6.14,7,2.37,1.53,2.45.54,5.84-1.5,7.88s-4.88,3-7.64,3.89a162.74,162.74,0,0,1-16.88,4.24l17.16,14" transform="translate(-703 -191.82)"/><path class="cls-12" d="M785.68,668.78a59.66,59.66,0,0,0-11.55-14.25,15.76,15.76,0,0,0-6.67-4c-2.56-.6-5.6.14-7,2.37-1.53,2.45-.54,5.84,1.5,7.88s4.88,3,7.64,3.89a163.19,163.19,0,0,0,16.87,4.24l-17.15,14" transform="translate(-703 -191.82)"/></g><g id="gift3"><rect id="bottom3" class="cls-13" x="217.6" y="492.37" width="72.8" height="49.81"/><rect id="cover3" class="cls-13" x="213" y="492.37" width="82" height="9.2"/><rect class="cls-10" x="217.6" y="501.56" width="72.8" height="6.13"/><rect id="ribbon3" class="cls-9" x="249.79" y="492.37" width="9.2" height="49.81"/><path class="cls-14" d="M958.55,684a45.75,45.75,0,0,1,8.86-10.92,12.1,12.1,0,0,1,5.11-3.11,5,5,0,0,1,5.35,1.82c1.18,1.88.42,4.48-1.14,6a14,14,0,0,1-5.86,3,125.37,125.37,0,0,1-12.93,3.25l13.14,10.75" transform="translate(-703 -191.82)"/><path class="cls-14" d="M957.91,684a45.75,45.75,0,0,0-8.86-10.92,12.16,12.16,0,0,0-5.11-3.11,5,5,0,0,0-5.36,1.82c-1.17,1.88-.41,4.48,1.15,6a13.9,13.9,0,0,0,5.86,3,124.73,124.73,0,0,0,12.93,3.25l-13.15,10.75" transform="translate(-703 -191.82)"/></g><g id="gift2"><rect id="bottom2" class="cls-15" x="275.27" y="512.54" width="43.02" height="29.43"/><rect id="cover2" class="cls-15" x="272.55" y="512.54" width="48.45" height="5.43"/><rect class="cls-10" x="275.27" y="517.97" width="43.02" height="3.62"/><rect id="ribbon2" class="cls-11" x="294.29" y="512.54" width="5.43" height="29.43"/><path class="cls-12" d="M1000.69,704.25a27.31,27.31,0,0,1,5.23-6.45,7.12,7.12,0,0,1,3-1.83,3,3,0,0,1,3.17,1.07,3,3,0,0,1-.68,3.57,8.19,8.19,0,0,1-3.46,1.76,71.72,71.72,0,0,1-7.64,1.92l7.77,6.35" transform="translate(-703 -191.82)"/><path class="cls-12" d="M1000.31,704.25a27.31,27.31,0,0,0-5.23-6.45,7.06,7.06,0,0,0-3-1.83,3,3,0,0,0-3.17,1.07,3,3,0,0,0,.68,3.57,8.25,8.25,0,0,0,3.46,1.76,71.72,71.72,0,0,0,7.64,1.92l-7.76,6.35" transform="translate(-703 -191.82)"/></g></svg>
  
</div>
body {
  background-color: #0c63e7;
  height: 100vh;  
}

#container {
  position: relative;
  cursor: pointer;
  display: flex;
  top:100px;
  justify-content: center;
  align-items: center;
}

svg {
  width:10%;
  overflow:visible;
}

#tree {
  animation: drop 1s linear;
  
}

#balls {
  opacity:0;
  animation: drop 1s linear .5s forwards;
}

#star {
  animation: drop 1s linear 1.5s forwards;
  opacity:0;
}

#gift1, #gift2, #gift3 {
  animation: drop 1s linear 1s forwards;
  opacity:0;
}

@keyframes drop {
  0% {transform: translateY(-470px) scaleY(0.9); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px) scaleY(1); opacity: 1;}
  65% {transform: translateY(-15px) scaleY(0.9); opacity: 1;}
  75% {transform: translateY(-18px) scaleY(0.9); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1); opacity: 1;}
}

$(document).ready(function(){
  $('#container').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js