---
description: Merry Christmas and Happy New Year
lintConfig:
MD013: false
MD033: false
---
# Merry Christmas & Happy New Year
{%hackmd BkVfcTxlQ %}
<ul class="lightrope">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<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>
<!-- Something here :) -->
<div class="something">
</div>
<!-- end of something -->
</div>
<div class="bowl">
<div class="reflection"></div>
</div>
<div class="base"></div>
</div>
---
<div class="box">
<svg viewBox="0 0 800 596.74">
<g id="merry">
<path fill="#f2adab" d="M0 0h800v596.74H0z" />
<path style="mix-blend-mode: multiply" id="shadow" fill="#eaeaea" d="M575.92 325.27L418 234.08l2.67-41.29-43.79 17.55-37.22-21.49a22.2 22.2 0 00-22.24 0L206.34 253c-13.39 2.93-29.72 7.25-32 8.17-3 1.24-40.93 33.92-58.91 37.29-12.35 2.31-28.09 18.51-36.75 28.45a21.87 21.87 0 00-6.43 7.78 22.5 22.5 0 00-2.19 11.89 22 22 0 0011 17.25L317.4 500.22a22 22 0 0014.6 2.69l.35.29 69.07-13.71 1.68-25.93 172.82-99.76a22.25 22.25 0 000-38.53z" />
<g id="box1">
<path fill="#eaeaea" style="mix-blend-mode: multiply" d="M178.66 204.15l-.8.17c-4-.57-10.11-.87-12.69 1.9a8.76 8.76 0 00-.8 1l-18.18 3.93-4.64 14.11-.64.32c-3.33 1.8-3 5.4-2.15 8.16l-.34 1L133 251.4l9.33 6.19 3.67-.8 1.28.85 30 19.87 19.21-4.15 9.66-2.09 22.85-4.94 5.45-16.64 2.29-7 4.51-13.78-30-19.87-1.24-.82.95-2.87-9.33-6.18z" />
<path fill="#d36666" d="M280.62 236.01l-51.31-22.16V154.6l51.31 29.63v51.78z" />
<path fill="#af5555" d="M177.99 236.03l51.31-22.16v-59.25l-51.31 29.62v51.79z" />
<path fill="#db6a6a" d="M229.31 213.86v51.8l-22.69-13.1-9.59-5.53-19.04-11v-51.8l19.04 11 9.59 5.53 22.68 13.09.01.01z" />
<path fill="#e87979" d="M280.62 184.23v51.79l-51.31 29.63v-51.79l51.31-29.63z" />
<path fill="#e6e6e6" d="M280.62 181.38v9.69l-51.31 29.62v-9.68l51.31-29.63zM229.3 211v9.69l-51.31-29.62v-9.69L229.3 211z" style="mix-blend-mode: multiply" />
<path fill="#ed8d8d" d="M229.3 218.76l-54.95-31.7v-14.03l22.81-13.13 9.59-5.52 22.86-13.18 22.61 13.05 9.58 5.53 22.76 13.17v13.99l-55.26 31.82z" />
<path fill="#ed8e8e" d="M284.56 172.95l-22.87 13.15-9.57 5.53-22.82 13.15-28.54-16.49-6.19-3.57-20.22-11.69 22.81-13.13 9.59-5.52 22.86-13.18 22.61 13.05 9.58 5.53 22.76 13.17z" />
<path fill="#e87979" d="M229.31 218.76l55.25-31.82v-13.99l-55.25 31.82v13.99z" />
<path fill="#db6a6a" d="M174.35 173.06l54.95 31.71v13.99l-54.95-31.7v-14z" />
<path fill="#ffcb8e" d="M261.8 159.81l-55.18 31.86-9.59-5.53 55.19-31.86 9.58 5.53z" />
<path fill="#ffcb8e" d="M261.72 186.14l-9.57 5.53-.03-.01-54.96-31.73 9.59-5.52 54.94 31.72.03.01z" />
<path fill="#ffcb8e" d="M261.72 246.95V186.13l-9.57 5.53V252.47l9.57-5.52zM206.62 191.66v60.9l-9.59-5.53v-60.9l9.59 5.53z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M191.65 183.07a14.58 14.58 0 00-3.68 7.08c6.36-2.5 9.82 5 9.82 5-.17-3 3-6.86 3-6.86 11.92-11.78 20.38-11 20.38-11-7.31-5.7-26.27 3.47-29.52 5.78z" />
<path fill="#ffcb8e" d="M222.65 171.51s-25.62-4.69-38.37 12.72c0 0 8.13-.49 10.22 6.22 0 0 12.9-14.8 27.14-13.07z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M257.94 184.56s6.07 4.86 6.51 8.82c-6.45-1.71-11.56 5.36-11.56 5.36a24.63 24.63 0 00-1.52-6.68c-3.84-10.68-18-16-18-16 7.7-5.06 21.54 5.94 24.57 8.5z" />
<path fill="#ffcb8e" d="M232.32 170.17s24.33-.66 35.56 17.76a13.4 13.4 0 00-12.56 5.45s-6.67-16.25-22.49-17.28z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M233.75 173.68s20.83 4.22 24.41 1c2.22-2 1-17.37-9-14s-15.41 13-15.41 13z" />
<path fill="#ffcb8e" d="M263.09 163.18s-5.84-13.35-13.71-12c-9.63 1.64-20.07 16.23-20.07 16.23l4.44 6.28z" />
<path fill="#eab783" d="M233.75 173.68s25.57-19.82 29.34-10.5c4.68 11.59-29.34 10.5-29.34 10.5z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M225 174.7s-29.38 3.34-30.44.75c-2.69-6.53 2.09-10.24 2.09-10.24s24.78-1.81 28.35 9.49z" />
<path fill="#ffcb8e" d="M195.68 164.2s5.83-13.35 13.7-12c9.63 1.65 20.07 16.23 20.07 16.23L225 174.7z" />
<path fill="#eab783" d="M225 174.7s-25.57-19.81-29.33-10.5C191 175.79 225 174.7 225 174.7z" />
</g>
<g id="box2">
<path fill="#eaeaea" style="mix-blend-mode: multiply" d="M501.48 170.24l-.79.17c-4-.57-10.12-.87-12.69 1.9a7.8 7.8 0 00-.8 1l-18.2 3.95-4.64 14.11-.65.32c-3.32 1.79-3 5.4-2.14 8.16l-.34 1-5.47 16.61 9.33 6.18 3.67-.79 1.27.85 30 19.87 19.21-4.15 9.67-2.09 22.89-5 5.45-16.64 2.28-7 4.53-13.69-30-19.87-1.24-.82.94-2.87-9.33-6.19z" />
<path fill="#d36666" d="M603.45 202.1l-51.32-22.16v-59.25l51.32 29.62v51.79z" />
<path fill="#af5555" d="M500.81 202.12l51.32-22.16V120.7l-51.32 29.63v51.79z" />
<path fill="#db6a6a" d="M552.14 179.95v51.8l-22.7-13.11-9.58-5.53-19.05-10.99v-51.8l19.05 11 9.58 5.53 22.68 13.09.02.01z" />
<path fill="#e87979" d="M603.45 150.32v51.79l-51.31 29.63v-51.79l51.31-29.63z" />
<path fill="#e6e6e6" d="M603.45 147.47v9.69l-51.31 29.61v-9.67l51.31-29.63zM552.12 177.09v9.68l-51.31-29.61v-9.69l51.31 29.62z" style="mix-blend-mode: multiply" />
<path fill="#ed8d8d" d="M552.13 184.85l-54.96-31.71v-14.02l22.82-13.14 9.58-5.51 22.87-13.18 22.6 13.04 9.58 5.54 22.77 13.17v13.99l-55.26 31.82z" />
<path fill="#ed8e8e" d="M607.39 139.04l-22.87 13.15-9.57 5.53-22.83 13.15-28.53-16.49-6.2-3.57-20.22-11.69 22.82-13.14 9.58-5.51 22.87-13.18 22.6 13.04 9.58 5.54 22.77 13.17z" />
<path fill="#e87979" d="M552.13 184.85l55.26-31.82v-13.99l-55.26 31.81v14z" />
<path fill="#db6a6a" d="M497.17 139.15l54.96 31.7v14l-54.96-31.71v-13.99z" />
<path fill="#ffcb8e" d="M584.62 125.9l-55.18 31.86-9.58-5.53 55.18-31.87 9.58 5.54z" />
<path fill="#ffcb8e" d="M584.54 152.23l-9.56 5.53-.03-.01-54.96-31.74 9.58-5.51 54.95 31.72.02.01z" />
<path fill="#ffcb8e" d="M584.54 213.03v-60.81l-9.56 5.53v60.8l9.56-5.52zM529.44 157.75v60.89l-9.58-5.53v-60.89l9.58 5.53z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M514.48 149.16a14.56 14.56 0 00-3.69 7.08c6.37-2.5 9.83 5 9.83 5-.17-3 3-6.86 3-6.86 11.91-11.78 20.38-11 20.38-11-7.31-5.71-26.27 3.47-29.52 5.78z" />
<path fill="#ffcb8e" d="M545.47 137.6s-25.61-4.69-38.36 12.72c0 0 8.12-.49 10.22 6.21 0 0 12.9-14.79 27.14-13.06z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M580.77 150.65s6.06 4.86 6.5 8.82c-6.45-1.71-11.56 5.36-11.56 5.36a24.45 24.45 0 00-1.51-6.68c-3.85-10.68-18-16-18-16 7.7-5.08 21.53 5.92 24.57 8.5z" />
<path fill="#ffcb8e" d="M555.15 136.26s24.33-.67 35.56 17.76a13.42 13.42 0 00-12.57 5.45s-6.66-16.26-22.49-17.29z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M556.58 139.77s20.83 4.22 24.41 1c2.22-2 1-17.37-9-14s-15.41 13-15.41 13z" />
<path fill="#ffcb8e" d="M585.91 129.27s-5.83-13.36-13.7-12c-9.63 1.64-20.07 16.22-20.07 16.22l4.44 6.29z" />
<path fill="#eab783" d="M556.58 139.77s25.57-19.82 29.33-10.5c4.69 11.59-29.33 10.5-29.33 10.5z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M547.84 140.79s-29.39 3.34-30.45.75c-2.68-6.53 2.09-10.24 2.09-10.24s24.78-1.81 28.36 9.49z" />
<path fill="#ffcb8e" d="M518.5 130.29s5.84-13.35 13.71-12c9.63 1.64 20.07 16.23 20.07 16.23l-4.44 6.28z" />
<path fill="#eab783" d="M547.84 140.79s-25.57-19.79-29.34-10.5c-4.68 11.59 29.34 10.5 29.34 10.5z" />
</g>
<g id="box3">
<path fill="#eaeaea" style="mix-blend-mode: multiply" d="M563.73 216.32l-.73.16c-3.73-.53-9.35-.81-11.73 1.76a7.46 7.46 0 00-.74.94l-16.8 3.63-4.29 13.05c-.21.09-.41.19-.6.29-3.07 1.66-2.79 5-2 7.54l-.32.95-5 15.35 8.62 5.71 3.39-.73 1.18.78 27.71 18.37 17.76-3.84 8.93-1.93 21.16-4.57 5-15.38 2.12-6.44 4.17-12.73-27.7-18.37-1.15-.76.88-2.65-8.59-5.71z" />
<path fill="#d36666" d="M657.98 245.78l-47.43-20.49v-54.77l47.43 27.39v47.87z" />
<path fill="#af5555" d="M563.12 245.79l47.43-20.48v-54.77l-47.43 27.38v47.87z" />
<path fill="#db6a6a" d="M610.55 225.3v47.88l-20.97-12.11-8.86-5.12-17.61-10.16v-47.88l17.61 10.17 8.86 5.11 20.96 12.1.01.01z" />
<path fill="#e87979" d="M657.98 197.91v47.87l-47.43 27.39V225.3l47.43-27.39z" />
<path fill="#e6e6e6" d="M657.98 195.28v8.95l-47.43 27.38v-8.94l47.43-27.39zM610.54 222.66v8.95l-47.43-27.38v-8.95l47.43 27.38z" style="mix-blend-mode: multiply" />
<path fill="#ed8d8d" d="M610.55 229.83l-50.8-29.31V187.56l21.09-12.14 8.86-5.1 21.13-12.18 20.89 12.06 8.86 5.11 21.04 12.18v12.93l-51.07 29.41z" />
<path fill="#ed8e8e" d="M661.62 187.49l-21.14 12.15-8.84 5.11-21.1 12.16-26.38-15.25-5.72-3.29-18.69-10.81 21.09-12.14 8.86-5.1 21.13-12.18 20.89 12.06 8.86 5.11 21.04 12.18z" />
<path fill="#e87979" d="M610.55 229.83l51.07-29.41v-12.93l-51.07 29.4v12.94z" />
<path fill="#db6a6a" d="M559.75 187.59l50.8 29.3v12.94l-50.8-29.31v-12.93z" />
<path fill="#ffcb8e" d="M640.58 175.34l-51 29.45-8.86-5.11 51-29.45 8.86 5.11z" />
<path fill="#ffcb8e" d="M640.51 199.68l-8.85 5.11-.02-.01-50.8-29.33 8.86-5.1 50.78 29.31.03.02z" />
<path fill="#ffcb8e" d="M640.51 255.88v-56.22l-8.85 5.12V260.98l8.85-5.1zM589.58 204.78v56.29l-8.86-5.12v-56.29l8.86 5.12z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M575.75 196.84a13.45 13.45 0 00-3.41 6.55c5.88-2.32 9.08 4.64 9.08 4.64-.16-2.75 2.74-6.34 2.74-6.34 11-10.89 18.84-10.2 18.84-10.2-6.73-5.27-24.25 3.22-27.25 5.35z" />
<path fill="#ffcb8e" d="M604.39 186.16s-23.67-4.34-35.46 11.75c0 0 7.51-.45 9.45 5.75 0 0 11.92-13.68 25.08-12.08z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M637 198.22s5.6 4.49 6 8.15c-6-1.58-10.68 4.95-10.68 4.95a22.83 22.83 0 00-1.4-6.17c-3.56-9.87-16.68-14.8-16.68-14.8 7.18-4.68 19.97 5.48 22.76 7.87z" />
<path fill="#ffcb8e" d="M613.34 184.91s22.49-.61 32.86 16.42a12.4 12.4 0 00-11.61 5s-6.16-15-20.79-16z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M614.66 188.16s19.25 3.9 22.56 1c2-1.81.93-16-8.36-13s-14.2 12-14.2 12z" />
<path fill="#ffcb8e" d="M641.77 178.45s-5.39-12.34-12.67-11.1c-8.9 1.52-18.55 15-18.55 15l4.11 5.81z" />
<path fill="#eab783" d="M614.66 188.16s23.63-18.32 27.11-9.71c4.33 10.72-27.11 9.71-27.11 9.71z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M606.58 189.1s-27.16 3.09-28.14.69a8 8 0 011.93-9.46s22.9-1.67 26.21 8.77z" />
<path fill="#ffcb8e" d="M579.47 179.4s5.39-12.34 12.67-11.1c8.89 1.52 18.55 15 18.55 15l-4.11 5.8z" />
<path fill="#eab783" d="M606.58 189.1s-23.63-18.31-27.11-9.7c-4.33 10.71 27.11 9.7 27.11 9.7z" />
</g>
<g>
<path fill="#f3fbff" id="ground" d="M658.44 298.43a22 22 0 01-11 17.25L411.13 452.09a22.21 22.21 0 01-22.24 0l-236.3-136.41a22.26 22.26 0 010-38.53l236.3-136.43a22.21 22.21 0 0122.24 0l236.28 136.43a22.06 22.06 0 0111.03 21.28z" />
<path fill="#e1f4fc" d="M658.44 332.84a21.94 21.94 0 01-11 17.25L411.13 486.5a22.21 22.21 0 01-22.24 0l-236.3-136.41a22 22 0 01-11-17.25 21.39 21.39 0 010-3.92l-.1-30.49h.1a22 22 0 0011 17.25l236.3 136.41a22.21 22.21 0 0022.24 0l236.28-136.41a22 22 0 0011-17.25v30.38a22.6 22.6 0 01.03 4.03z" />
<path fill="#f3fbff" d="M144.62 284.94s20.63-41.22 70.88-37c0 0 22.21-12 25.67-20.42s17.92-20 25.43-22.74c10.23-3.77 15.1-12.21 23.94-15.68 11.61-4.55 21.22-2 31.76-5.89 8.26-3 46.43-45.43 73.72-38.75s27.52-2.81 39.29 0 24.85 20.79 36 23.61 45.13 11.64 49.52 19.42 23.71 32.29 39 33.2 32.39 10 40 14.85c23.57 15.14 52.1 45 52.1 45z" />
<path fill="#e1f4fc" d="M379.25 365.8l-25.27-14.59 19.07-11.01 6.32 3.65-12.72 7.34 6.32 3.65 6.36-3.67 6.31 3.64-6.35 3.68 6.32 3.64 12.71-7.34 6.32 3.65-19.08 11.01-6.31-3.65zM341.26 358.55l6.32 3.65-.04 7.32-12.67.02-6.32-3.65-6.36 3.67 31.59 18.24 6.36-3.67-18.96-10.94 12.68-.02.04-7.32 18.95 10.94 6.36-3.67-31.59-18.24-6.36 3.67zM525.33 303.35l6.31 3.65-.04 7.31-12.67.03-6.32-3.65-6.36 3.67 31.59 18.24 6.36-3.67-18.95-10.94 12.67-.03.04-7.32 18.95 10.95 6.36-3.67-31.59-18.24-6.35 3.67zM398.48 325.52l-19.07 11L411 354.77l6.36-3.67-12.63-7.3h25.35l-6.32-3.65h-12.68l6.36-3.67zm6.28 11l-6.36 3.67-6.32-3.65 6.36-3.67zM436.14 354.61l-19.07 11 31.59 18.24 6.36-3.67-12.64-7.3 25.35-.05-6.32-3.64h-12.67l6.36-3.67zm6.28 11l-6.36 3.67-6.31-3.64 6.35-3.67zM423.91 310.84l-19.07 11 31.58 18.24 6.36-3.67-12.63-7.3h25.34l-6.31-3.65H436.5l6.36-3.67zm6.28 11l-6.36 3.68-6.32-3.65 6.36-3.67zM430.26 307.17l12.64 7.29 6.36-3.67 18.95 10.95 6.36-3.67-18.96-10.95 6.36-3.67-12.63-7.29-6.36 3.67 6.32 3.65-6.36 3.67-6.32-3.65-6.36 3.67zM385.49 384.09l-19.08 11.01L398 413.33l19.07-11.01-6.32-3.64-12.71 7.34-18.95-10.95 12.71-7.34-6.31-3.64zM391.84 380.42l31.59 18.23 6.36-3.67-12.64-7.29 6.36-3.67 12.63 7.29 6.36-3.67-31.58-18.24-6.36 3.67 12.63 7.3-6.36 3.67-12.63-7.29-6.36 3.67zM474.47 332.71l-19.07 11.01 18.95 10.95 12.71-7.35 6.32 3.65-12.71 7.34 6.31 3.65 19.07-11.01-18.95-10.94-12.71 7.34-6.32-3.65 12.72-7.34-6.32-3.65zM582.54 270.32l-19.07 11.01 18.95 10.94 12.71-7.34 6.32 3.65-12.71 7.34 6.32 3.64 19.07-11.01-18.96-10.94-12.71 7.34-6.32-3.65 12.72-7.34-6.32-3.64zM480.82 329.04l6.32 3.65 6.36-3.67 25.27 14.59 6.36-3.67-25.27-14.59 6.35-3.67-6.31-3.65-19.08 11.01zM538 296l31.59 18.24 6.35-3.67-12.63-7.3 6.36-3.67 12.63 7.29 6.36-3.67L557.11 285zm25.35-.05l-6.35 3.68-6.29-3.63 6.36-3.67z" />
<path fill="#eaeaea" d="M328.55 365.89l6.32 3.65-.04 7.32-6.32-3.65.04-7.32zM347.54 369.52l-.02 3.66 6.34-.01.04-7.32 18.95 10.94 6.36-3.67-31.59-18.24-.04 7.32-.04 7.32zM341.18 373.19l18.96 10.94-6.36 3.67-12.64-7.29.04-7.32zM512.61 310.69l6.32 3.65-.04 7.31-6.32-3.64.04-7.32zM531.6 314.31l-.02 3.66 6.34-.01.04-7.32 18.95 10.95 6.36-3.67-31.59-18.24-.04 7.32-.04 7.31zM525.25 317.99l18.95 10.94-6.36 3.67-12.63-7.3.04-7.31zM366.65 351.19l6.32 3.65-.04 7.32-6.32-3.65.04-7.32zM379.29 358.49l6.32 3.64-.05 7.32-6.31-3.65.04-7.31zM398.32 354.79l6.32 3.65-6.36 3.67.04-7.32zM379.33 351.17l6.31 3.64-6.35 3.68.04-7.32zM373.05 340.2l6.32 3.65-6.36 3.67.04-7.32zM404.72 343.8l12.63 7.3-6.36 3.67-6.31-3.65.04-7.32zM430.15 329.12l12.63 7.3-6.36 3.67-6.31-3.65.04-7.32zM442.38 372.89l12.64 7.3-6.36 3.67-6.32-3.65.04-7.32zM430.07 343.76l-6.32-3.65-12.68.02 6.36-3.67-18.95-10.94-.04 7.32 6.32 3.65-.04 7.31 6.33-.01 19.02-.03zM455.5 329.08l-6.32-3.65-12.68.02 6.36-3.67-18.95-10.94-.04 7.32 6.32 3.65-.04 7.31 6.33-.01v-.01l19.02-.02zM467.73 372.85l-6.32-3.65-12.67.02 6.36-3.67-18.96-10.94-.03 7.32 6.31 3.64-.04 7.32 6.34-.01 19.01-.03zM398.4 340.16l-.04 7.31-6.32-3.64.04-7.32 6.32 3.65zM423.83 325.48l-.04 7.31-6.32-3.64.04-7.32 6.32 3.65zM436.06 369.24l-.04 7.32-6.31-3.65.04-7.31 6.31 3.64zM436.62 303.5l-.04 7.32 6.32 3.64.04-7.31-6.32-3.65zM455.61 307.12l6.36-3.67-12.63-7.29-.08 14.63 18.95 10.95 6.36-3.67-18.96-10.95zM582.54 270.32l-.04 7.31 6.36-3.67-6.32-3.64zM595.17 277.61l-.04 7.32 6.32 3.65-.04 7.31 12.72-7.34-18.96-10.94zM582.46 284.95l-.04 7.32-6.32-3.65.04-7.32 6.32 3.65zM557.11 285l-.04 7.32 6.32 3.64-.04 7.32 6.36-3.67 12.63 7.29 6.36-3.66L557.11 285zM557.03 299.63l-.04 7.32-6.32-3.65.04-7.31 6.32 3.64zM563.35 303.28l12.63 7.29-6.35 3.68-6.32-3.65.04-7.32zM499.9 318.03l-.04 7.32 6.35-3.67-6.31-3.65zM525.13 339.94l-6.36 3.67-19.1-10.94.19-7.32 25.27 14.59zM474.47 332.71l-.04 7.32 6.36-3.67-6.32-3.65zM474.39 347.35l-.04 7.32-6.32-3.65.04-7.32 6.32 3.65zM487.1 340.01l-.04 7.31 6.32 3.65-.04 7.32 12.71-7.34-18.95-10.94zM410.92 369.4l-.04 7.32 6.31 3.65-.04 7.32 6.36-3.67 12.63 7.29 6.36-3.67-31.58-18.24zM429.79 394.98l-6.36 3.67-6.32-3.65.04-7.31 12.64 7.29zM410.83 384.04l-.03 7.32-18.96-10.94 6.36-3.67 12.63 7.29zM385.49 384.09l-.04 7.31 6.35-3.67-6.31-3.64zM379.09 395.07l-.04 7.32L398 413.33l.04-7.31-18.95-10.95zM410.75 398.68l-.03 7.31 6.35-3.67-6.32-3.64z" style="mix-blend-mode: multiply" />
<path fill="#e1f4fc" d="M442.96 351l31.59 18.23 6.31-3.65-31.58-18.23-6.32 3.65z" />
<path fill="#eaeaea" d="M449.28 347.35v7.36l25.27 14.52 6.31-3.65-31.58-18.23z" style="mix-blend-mode: multiply" />
<path fill="#e1f4fc" d="M398.45 455v34.41a22.28 22.28 0 01-9.56-2.93l-236.3-136.39a22 22 0 01-11-17.25 21.39 21.39 0 010-3.92l-.1-30.49h.1a22 22 0 0011 17.25l236.3 136.41a22.28 22.28 0 009.56 2.91z" />
<path fill="#eaeaea" style="mix-blend-mode: multiply" d="M398.45 455v34.41a22.28 22.28 0 01-9.56-2.93l-236.3-136.39a22 22 0 01-11-17.25 21.39 21.39 0 010-3.92l-.1-30.49h.1a22 22 0 0011 17.25l236.3 136.41a22.28 22.28 0 009.56 2.91z" />
</g>
<g id="snowman-container">
<g id="snowman">
<g id="board">
<path fill="#e97171" d="M440.19 238.92l-119.76 69.13-3.87 2.23s-11.23 7.88-18.22-4.1c-1.73-3 .56-5.79 2.33-7.37a13.76 13.76 0 011.66-1.29 23.51 23.51 0 002.4 5.55c.07.09.12.19.2.28 1 1.49 2.31 2.62 3.85 2.44L368 271.6l36.23-20.92 28.16-16.26z" />
<path fill="#f2f2f2" style="mix-blend-mode: multiply" d="M404.24 250.68A48.14 48.14 0 01368 271.6zM320.41 308.07l-3.87 2.23s-11.23 7.88-18.22-4.1c-1.55-3 .63-5.79 2.33-7.37a13.76 13.76 0 011.66-1.29 23.51 23.51 0 002.4 5.55c.07.09.12.19.2.28 2.92 4.5 8.96 8.01 15.5 4.7z" />
<path fill="#e97171" d="M408.62 222l-71.52 41.29-48.25 27.85-3.85 2.26s-11.24 7.88-18.23-4.11c-1.73-3 .57-5.79 2.34-7.36a13.76 13.76 0 011.66-1.29 23.22 23.22 0 002.4 5.55c.06.09.12.19.19.28 1 1.48 2.31 2.62 3.86 2.44l59.25-34.22 36.23-20.92 28.17-16.26h.07z" />
<path fill="#f2f2f2" style="mix-blend-mode: multiply" d="M288.84 291.15L285 293.4s-11.24 7.88-18.23-4.11c-1.55-3 .63-5.79 2.34-7.36a13.76 13.76 0 011.66-1.29 23.22 23.22 0 002.4 5.55c.06.09.12.19.19.28 2.89 4.53 8.94 8 15.48 4.68zM408.62 222l-71.52 41.29a47 47 0 01-6.38-5.21l70.18-40.54z" />
</g>
<g id="snowman-body">
<g id="right-arm" class="arms">
<g id="stick-back">
<ellipse cx="305.78" cy="216.1" fill="#afc9e9" rx="1.11" ry="1.92" transform="matrix(.87 -.5 .5 .87 -67.09 181.84)" />
<ellipse cx="316.37" cy="209.99" fill="#afc9e9" rx="1.11" ry="1.92" transform="rotate(-30 316.3729 209.9919)" />
<path fill="#afc9e9" d="M304.68 214.56l10.69-6.21 1.98 3.29-10.48 6.02-2.19-3.1z" />
<path stroke="#afc9e9" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2898" d="M372.7 177.47l-57.4 33.14M366.55 179l3.5 2.02" />
</g>
<path id="right-arm-1" fill="none" stroke="#ffcb8e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5796" d="M333.78 198.65l-21.15 13.33" />
</g>
<circle cx="369.17" cy="216.92" r="48.26" fill="#fff" />
<path fill="#f2f2f2" d="M409.23 243.83a48.26 48.26 0 11-67-67 48.26 48.26 0 0067 67z" />
<circle cx="341.65" cy="210.86" r="3.09" fill="#666" />
<circle cx="340.46" cy="224.44" r="3.09" fill="#666" />
<circle cx="345.68" cy="239.33" r="3.09" fill="#666" />
<g id="left-arm" class="arms">
<path id="left-arm-1" fill="none" stroke="#ffcb8e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5796" d="M392.3 210.83l-15.86 17.5" />
<g id="stick-front">
<ellipse cx="371.21" cy="231.43" fill="#afc9e9" rx="1.11" ry="1.92" transform="rotate(-30 371.2098 231.4254)" />
<ellipse cx="381.8" cy="225.31" fill="#afc9e9" rx="1.11" ry="1.92" transform="rotate(-30 381.8096 225.3056)" />
<path fill="#afc9e9" d="M370.11 229.88l10.69-6.2 1.97 3.28-10.48 6.03-2.18-3.11z" />
<path stroke="#afc9e9" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2898" d="M438.13 192.79l-57.4 33.14M431.98 194.32l3.5 2.02" />
</g>
</g>
</g>
<g id="snoman-head" class="head">
<g id="snoman-head-base">
<circle cx="353.86" cy="169.88" r="30.62" fill="#fff" />
<path fill="#f2f2f2" d="M379.28 187a30.62 30.62 0 11-42.5-42.5 30.63 30.63 0 0042.5 42.5z" />
</g>
<g id="snaman-face">
<circle cx="349.85" cy="176.86" r="3.09" fill="#666" />
<circle cx="332.39" cy="174.38" r="3.09" fill="#666" />
<path fill="#931a25" d="M338.31 182.84l-5.92 3.42" />
<path fill="#ffcb8e" d="M339.28 184.51l-6.45 2.49a.91.91 0 01-.89-1.56l5.4-4.32a2 2 0 012.45 3.06 2.38 2.38 0 01-.51.33z" />
</g>
</g>
<g id="hat" class="head">
<ellipse id="hat-btm" cx="354.16" cy="149.88" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="6.7717" rx="22.3" ry="11.68" />
<path id="hat-1" fill="#e97171" d="M332.84 146.29s.5-29.83 83.76-19.16c0 0-42.88 25.53-45.39 26.57 0 0-33.76 16.5-38.37-7.41z" />
<circle id="hat-ball" cx="417.43" cy="127.17" r="5.99" fill="#fff" />
</g>
</g>
</g>
<g id="box4">
<path fill="#eaeaea" style="mix-blend-mode: multiply" d="M217 456.54l-.79.17c-4-.57-10.12-.87-12.7 1.9a7.73 7.73 0 00-.79 1l-18.18 3.93-4.65 14.12-.64.31c-3.32 1.8-3 5.41-2.15 8.16l-.33 1-5.47 16.61 9.33 6.19 3.67-.8 1.28.85 30 19.87 19.21-4.15 9.66-2.09 22.9-4.95 5.45-16.64 2.29-7 4.51-13.77-30-19.88-1.23-.82.94-2.87-9.31-6.09z" />
<path fill="#d36666" d="M318.99 488.41l-51.32-22.16v-59.26l51.32 29.63v51.79z" />
<path fill="#af5555" d="M216.35 488.42l51.32-22.16v-59.25l-51.32 29.63v51.78z" />
<path fill="#db6a6a" d="M267.68 466.25v51.8l-22.7-13.1-9.58-5.53-19.05-11v-51.8l19.05 11 9.58 5.53 22.68 13.09.02.01z" />
<path fill="#e87979" d="M318.99 436.62v51.8l-51.31 29.62v-51.79l51.31-29.63z" />
<path fill="#e6e6e6" d="M318.99 433.78v9.68l-51.31 29.62v-9.68l51.31-29.62zM267.66 463.39v9.69l-51.31-29.62v-9.68l51.31 29.61z" style="mix-blend-mode: multiply" />
<path fill="#ed8d8d" d="M267.67 471.15l-54.96-31.7v-14.02l22.82-13.14 9.58-5.52 22.86-13.18 22.61 13.05 9.58 5.53 22.77 13.17v14l-55.26 31.81z" />
<path fill="#ed8e8e" d="M322.93 425.34l-22.87 13.15-9.57 5.53-22.83 13.15-28.54-16.49-6.19-3.57-20.22-11.68 22.82-13.14 9.58-5.52 22.86-13.18 22.61 13.05 9.58 5.53 22.77 13.17z" />
<path fill="#e87979" d="M267.67 471.15l55.26-31.81v-14l-55.26 31.82v13.99z" />
<path fill="#db6a6a" d="M212.71 425.46l54.96 31.7v13.99l-54.96-31.7v-13.99z" />
<path fill="#ffcb8e" d="M300.16 412.2l-55.18 31.86-9.58-5.53 55.18-31.86 9.58 5.53z" />
<path fill="#ffcb8e" d="M300.08 438.53l-9.57 5.53-.02-.01-54.96-31.73 9.58-5.52 54.95 31.72.02.01z" />
<path fill="#ffcb8e" d="M300.08 499.34V438.52l-9.57 5.53V504.86l9.57-5.52zM244.98 444.05v60.9l-9.58-5.53v-60.9l9.58 5.53z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M230 435.47a14.5 14.5 0 00-3.69 7.08c6.37-2.51 9.82 5 9.82 5-.16-3 3-6.86 3-6.86 11.92-11.78 20.39-11 20.39-11-7.3-5.69-26.26 3.47-29.52 5.78z" />
<path fill="#ffcb8e" d="M261 423.91s-25.61-4.69-38.36 12.71c0 0 8.12-.48 10.22 6.22 0 0 12.9-14.8 27.14-13.07z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M296.31 437s6.06 4.86 6.5 8.82c-6.45-1.71-11.56 5.36-11.56 5.36a24.45 24.45 0 00-1.51-6.68c-3.85-10.67-18-16-18-16 7.7-5.12 21.53 5.88 24.57 8.5z" />
<path fill="#ffcb8e" d="M270.69 422.56s24.33-.66 35.56 17.77a13.4 13.4 0 00-12.57 5.44s-6.66-16.25-22.49-17.28z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M272.11 426.07s20.84 4.22 24.42 1.05c2.22-2 1-17.37-9-14s-15.42 12.95-15.42 12.95z" />
<path fill="#ffcb8e" d="M301.45 415.57s-5.83-13.35-13.71-12c-9.62 1.65-20.07 16.23-20.07 16.23l4.44 6.28z" />
<path fill="#eab783" d="M272.11 426.07s25.57-19.81 29.34-10.5c4.69 11.59-29.34 10.5-29.34 10.5z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M263.38 427.1s-29.39 3.33-30.45.74c-2.68-6.53 2.09-10.24 2.09-10.24s24.78-1.81 28.36 9.5z" />
<path fill="#ffcb8e" d="M234 416.6s5.83-13.36 13.71-12c9.63 1.64 20.07 16.22 20.07 16.22l-4.44 6.29z" />
<path fill="#eab783" d="M263.38 427.1s-25.57-19.82-29.38-10.5c-4.64 11.59 29.38 10.5 29.38 10.5z" />
</g>
<circle class="snow-clone" id="snow" cx="115.05" cy="117.16" r="6.97" fill="#ffffff" />
<path fill="white" id="hover" opacity="0" d="M658.44 298.43a22 22 0 01-11 17.25L411.13 452.09a22.21 22.21 0 01-22.24 0l-236.3-136.41a22.26 22.26 0 010-38.53l236.3-136.43a22.21 22.21 0 0122.24 0l236.28 136.43a22.06 22.06 0 0111.03 21.28z" />
</g>
</svg>
</div>
---
Source:
> [CSS Christmas Lights @Zane Wesley](https://codepen.io/zanewesley/pen/rNMwEVV)
> [Cascading Style Snow-globe @Alvaro Montoro](https://codepen.io/alvaromontoro/pen/jOGLeJV)
> [Merry Christmas @Shunya Koide](https://codepen.io/shunyadezain/pen/jOMGoqB)
---
<style>
.lightrope {
text-align: center;
white-space: nowrap;
overflow: hidden;
z-index: 1;
margin: -15px 0 0 0;
padding: 0;
pointer-events: none;
width: 100%;
}
.lightrope li {
position: relative;
animation-fill-mode: both;
animation-iteration-count: infinite;
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 12px;
height: 28px;
border-radius: 50%;
margin: 20px;
display: inline-block;
background: rgba(0, 247, 165, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
animation-name: flash-1;
animation-duration: 2s;
}
.lightrope li:nth-child(2n+1) {
background: rgba(0, 255, 255, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
animation-name: flash-2;
animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
background: rgba(247, 0, 148, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
animation-name: flash-3;
animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
animation-duration: 1.4s;
}
.lightrope li:before {
content: "";
position: absolute;
background: #222;
width: 10px;
height: 9.3333333333px;
border-radius: 3px;
top: -4.6666666667px;
left: 1px;
}
.lightrope li:after {
content: "";
top: -14px;
left: 9px;
position: absolute;
width: 52px;
height: 18.6666666667px;
border-bottom: solid #222 2px;
border-radius: 50%;
}
.lightrope li:last-child:after {
content: none;
}
.lightrope li:first-child {
margin-left: -40px;
}
@keyframes flash-1 {
0%, 100% {
background: rgba(0, 247, 165, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
}
50% {
background: rgba(0, 247, 165, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
}
}
@keyframes flash-2 {
0%, 100% {
background: rgba(0, 255, 255, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1);
}
50% {
background: rgba(0, 255, 255, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
}
}
@keyframes flash-3 {
0%, 100% {
background: rgba(247, 0, 148, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
}
50% {
background: rgba(247, 0, 148, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
}
}
.canvas {
--size: 50vmin;
width: var(--size);
aspect-ratio: 1;
position: relative;
margin: 0 auto;
cursor: pointer;
}
@keyframes shake {
0%, 50%, 100% {
transform: rotate(0deg) translate(0, 0);
}
25% {
transform: rotate(4deg) translate(0, -10%);
}
75% {
transform: rotate(-6deg) translate(0, -12%);
}
}
.canvas:active {
animation: shake 1.5s 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 7s 1 forwards;
}
.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);
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>
Sign in with Wallet
Connect another wallet