Người tuyết

function nguoiTuyet() {
  const template = HtmlService.createHtmlOutput(`
  <style>
  html {
  background: #cde;
}

.canvas {
  --size: 80vmin;
  width: var(--size);
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes shake {
  0%, 50%, 100% {
    transform: translate(-50%, -50%) rotate(0deg) translate(0, 0);
  }
  25% {
    transform: translate(-50%, -50%) rotate(4deg) translate(0, -10%);
  }
  75% {
    transform: translate(-50%, -50%) rotate(-6deg) translate(0, -12%);
  }
}

.canvas:active {
  animation: shake 1s infinite;
}

.canvas div,
.canvas div::before,
.canvas div::after {
  position: absolute;
  box-sizing: border-box;
  display: block;
}

.base {
  width: 60%;
  height: 26%;
  bottom: 0;
  left: 20%;
  border-radius: 100% / 40%;
  background:
    radial-gradient(100% 50% at 50% 14%, #000, #0000 80%),
    linear-gradient(to right, #0004, #0000, #0004);
  background-color: #222;
}

.base ~ .base {
  -webkit-mask: radial-gradient(100% 50% at 50% 14%, #0000 50%, #000 51%);
  mask: radial-gradient(100% 50% at 50% 14%, #0000 50%, #000 51%);
  background:
    radial-gradient(150% 112% at 50% 0%, #000 38%, #0000 0),
    radial-gradient(100% 50% at 50% 14%, #000, #0000 80%),
    linear-gradient(to right, #0004, #0000, #0004),
    repeating-linear-gradient(to right, #444 0 1.2%, #666 1.4%, #333 0 2.4%);
  z-index: 3;
}

.bowl {
  top: 0;
  left: 5%;
  width: 90%;
  height: 90%;
  background-color: #beeeef33;
  border-radius: 50%;
  overflow: hidden;
}

.bowl + .bowl {
  z-index: 2;
  background: #beeeef33;
  box-shadow: 
    inset 0 0 2vmin #fff8,
    inset 3vmin 0 5vmin #0003,
    inset -3vmin 0 5vmin #0003,
    inset 0 -20vmin 3vmin -14vmin #0007
    ;
}

.ground {
  width: 80%;
  height: 15%;
  border-radius: 50%;
  background: white;
  top: 69%;
  left: 50%;
  transform: translateX(-50%);  
}

.snow {
  width: 97.5%;
  height: 95%;
  border-radius: 50%;
  background: linear-gradient(#0000 79%, #eee 0);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 
    inset -2vmin 2vmin 4vmin -2vmin #fffa,
    inset 2vmin 0 4vmin -2vmin #0001;
}

.reflection {
  width: 45%;
  height: 18%;
  background: #f003;
  background: linear-gradient(#fff4, #fff0);
  border-radius: 50%;
  top: 13%;
  left: 60%;
  transform: rotate(17deg) translateX(-50%);
}

.canvas:active .shadow {
  opacity: 0;
}

.shadow {
  width: 100%;
  height: 15%;
  background: radial-gradient(farthest-side, #0008, #0000);
  border-radius: 50%;
  bottom: -4%;
  left: -5%;
  filter: blur(1vmin);
}

@keyframes snowfall {
  to {
    transform: translate(0, calc(var(--size) * 0.77));
  }
}

.snowflake {
  left: 50%;
  top: -5%;
  width: 2%;
  height: 2%;
  background: white;
  border-radius: 50%;
  abox-shadow: inset 0.25vmin -0.25vmin 0.25vmin #0002;
  animation: snowfall 4s 1 forwards;
}

/* this is super ugly, it would be better (or at least cleaner) in SASS */
.snowflake:nth-child(3n) {
  z-index: 1; 
}
.snowflake:nth-child(1)  { left: 25%; animation-delay: 1s; }
.snowflake:nth-child(2)  { left: 20%; animation-delay: 2s; }
.snowflake:nth-child(3)  { left: 30%; animation-delay: 3s; }
.snowflake:nth-child(4)  { left: 40%; animation-delay: 4s; }
.snowflake:nth-child(5)  { left: 50%; animation-delay: 5s; }
.snowflake:nth-child(6)  { left: 60%; animation-delay: 1.5s; }
.snowflake:nth-child(7)  { left: 70%; animation-delay: 2.5s; }
.snowflake:nth-child(8)  { left: 80%; animation-delay: 3.5s; }
.snowflake:nth-child(9)  { left: 75%; animation-delay: 4.5s; }
.snowflake:nth-child(11) { left: 28%; animation-delay: 5.5s; }
.snowflake:nth-child(12) { left: 19%; animation-delay: 0.5s; }
.snowflake:nth-child(13) { left: 38%; animation-delay: 1.2s; }
.snowflake:nth-child(14) { left: 48%; animation-delay: 2.2s; }
.snowflake:nth-child(15) { left: 58%; animation-delay: 3.2s; }
.snowflake:nth-child(16) { left: 68%; animation-delay: 4.2s; }
.snowflake:nth-child(17) { left: 78%; animation-delay: 1.7s; }
.snowflake:nth-child(18) { left: 82%; animation-delay: 2.7s; }
.snowflake:nth-child(19) { left: 65%; animation-delay: 3.7s; }
.snowflake:nth-child(20) { left: 54%; animation-delay: 4.7s; }
.snowflake:nth-child(21) { left: 24%; animation-delay: 0.25s; }
.snowflake:nth-child(22) { left: 24%; animation-delay: 0.5s; }
.snowflake:nth-child(23) { left: 34%; animation-delay: 0.75s; }
.snowflake:nth-child(24) { left: 44%; animation-delay: 0.6s; }
.snowflake:nth-child(25) { left: 54%; animation-delay: 2.75s; }
.snowflake:nth-child(26) { left: 64%; animation-delay: 1.75s; }
.snowflake:nth-child(27) { left: 74%; animation-delay: 3.75s; }
.snowflake:nth-child(28) { left: 84%; animation-delay: 1.4s; }
.snowflake:nth-child(29) { left: 74%; animation-delay: 2.4s; }
.snowflake:nth-child(30) { left: 17%; animation-delay: 3.4s; }

.canvas:active .snowflake {
  animation: none;
}

.something {
  width: 50%;
  height: 50%;
  left: 50%;
  bottom: 23%;
  transform: translate(-50%, 0);
  /* From Clippy by Bennett Feely */
/*   clip-path: polygon(18% 100%, 24% 91%, 25% 85%, 25% 76%, 17% 84%, 11% 86%, 3% 86%, 1% 78%, 3% 70%, 14% 63%, 19% 55%, 24% 49%, 31% 45%, 37% 44%, 37% 38%, 43% 41%, 48% 42%, 47% 35%, 43% 26%, 47% 12%, 46% 7%, 49% 4%, 51% 8%, 59% 5%, 66% 7%, 70% 16%, 71% 23%, 70% 31%, 68% 46%, 76% 51%, 79% 47%, 80% 41%, 86% 48%, 88% 50%, 88% 53%, 87% 56%, 90% 63%, 98% 75%, 99% 82%, 98% 91%, 95% 96%, 88% 93%, 77% 85%, 78% 100%);
  background: url(https://alvaromontoro.com/images/me6.webp);
  background-size: cover; */ 
  background:
    radial-gradient(circle at 45% 22%, #222 3%, #0000 0),
    radial-gradient(circle at 58% 22%, #222 3%, #0000 0),
    radial-gradient(circle at 58% 60%, #222 3%, #0000 0),
    radial-gradient(circle at 60% 70%, #222 2.75%, #0000 0),
    radial-gradient(circle at 58% 80%, #222 2.5%, #0000 0),
    conic-gradient(at 100% 50%, #0000 260deg, orange 0 280deg, #0000 0) 60% 25% / 15% 15%,
    linear-gradient(30deg, #0000 40%, brown 0 50%, #0000 0) 100% 70% / 20% 20%,
    linear-gradient(0deg, #0000 40%, brown 0 60%, #0000 0) 100% 70% / 10% 10%,
    linear-gradient(60deg, #0000 40%, brown 0 55%, #0000 0) 100% 74% / 10% 10%,
    linear-gradient(-30deg, #0000 40%, brown 0 50%, #0000 0) 5% 67% / 20% 20%,
    linear-gradient(20deg, #0000 40%, brown 0 60%, #0000 0) 5% 65% / 10% 10%,
    linear-gradient(130deg, #0000 40%, brown 0 60%, #0000 0) 6% 72% / 10% 10%,
    radial-gradient(circle at 50% 25%, #fff, #eee 22%, #0000 0),
    radial-gradient(circle at 50% 30%, #000, #0000 20%),
    radial-gradient(circle at 50% 70%, #fff, #eee 40%, #0000 0)
    ;
  background-repeat: no-repeat;
}
  </style>
  <div class="canvas">
  <div class="shadow"></div>
  <div class="base"></div>
  <div class="bowl">
    
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    
    <div class="snow"></div>
    <div class="ground"></div>
    
    <div class="something">
    </div>
    <!-- end of something -->
  </div>
  <div class="bowl">
    <div class="reflection"></div>
  </div>
  <div class="base"></div>
</div>

  `);
  const ui = SpreadsheetApp.getUi();
  ui.showDialog(template);
}