<svg xmlns="http://www.w3.org/2000/svg" filter="url(#pink-glow)" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="-190 -60 3200 3100" style="display:none" id="reindeer">
<!-- Display is none above so that the reindeer does not load until the JavaScript is all loaded, otherwise it will pop up as a different size to begin with -->
<g id="reindeer">
<g id="body">
<path id="tail" fill="#935f3b" d="M2066.96,1438.45c17.314,-4.312 44.992,-12.063 44.992,-12.063c0,0 22.3,-6.117 38.993,-5.999c11.902,0.084 23.204,2.329 26.996,5.999c-0,0 15.666,6.35 14.997,23.996c-0.387,10.199 -17.854,20.726 -22.276,23.996c-9.998,7.394 -19.638,9.173 -34.714,11.998c-7.81,1.463 -38.28,3.13 -50.991,5.999c-15.417,3.48 -22.185,10.571 -30.406,11.998c-10.444,1.813 -28.77,-6.851 -36.7,-13.81c-3.774,-3.313 -25.38,-25.96 -10.881,-32.384c24.651,-10.921 46.198,-16.296 59.99,-19.73Z" />
<path id="right-ear" fill="#854727" d="M1163.79,752.687c0,0 12.415,-49.58 29.167,-66.666c16.273,-16.599 58.333,-33.334 58.333,-33.334c0,0 77.667,-18.082 83.334,-6.854c1.124,2.229 28.257,10.561 8.333,75c-6.896,22.303 -52.083,42.965 -70.833,52.688c-13.786,7.148 -75,16.666 -75,16.666l-33.334,-37.5Z" />
<path id="right-ear-inner" fill="#581e0d" d="M1235.31,750.244c4.925,-5.987 12.707,-15.478 20.305,-24.278c5.08,-5.884 9.968,-11.425 13.823,-15.285c4.006,-4.011 8.056,-8.134 12.597,-11.586c2.816,-2.14 5.707,-4.112 8.923,-5.53c3.313,-1.459 7.419,-2.62 11.681,-3.477c7.323,-1.471 14.885,-2.267 19.604,-2.747c2.212,-0.065 3.956,-1.913 3.891,-4.126c-0.066,-2.212 -1.914,-3.955 -4.126,-3.89c-4.968,-0.211 -12.93,-0.511 -20.747,-0.086c-5.271,0.286 -10.4,1.019 -14.635,2.196c-4.418,1.227 -8.544,3.174 -12.58,5.41c-5.605,3.105 -10.8,6.994 -15.899,10.807c-4.65,3.477 -10.655,8.555 -16.904,13.977c-8.927,7.744 -18.14,16.156 -23.968,21.46c-4.734,4.977 -4.537,12.861 0.44,17.595c4.976,4.734 12.861,4.537 17.595,-0.44Z" />
<path id="left-ear" fill="#854727" d="M988.789,725c-9.028,-10.417 -25.07,-28.915 -41.666,-37.5c-20.139,-10.417 -56.25,-21.528 -79.167,-25c-19.274,-2.92 -46.33,-0.06 -58.333,4.167c-19.915,7.013 -5.518,33.604 4.166,45.105c11.111,13.194 44.136,24.223 62.5,34.061c19.445,10.417 87.5,33.334 87.5,33.334l45.834,-16.667c-0,0 -14.732,-30.459 -20.834,-37.5Z" />
<path id="left-ear-inner" fill="#581e0d" d="M986.697,747.343c-4.042,-5.4 -10.511,-14.177 -18.229,-21.846c-5.081,-5.049 -10.515,-9.73 -16.185,-12.835c-6.134,-3.36 -13.748,-6.162 -21.86,-8.291c-11.052,-2.901 -22.806,-4.834 -31.826,-6.396c-4.846,-0.84 -10.305,-1.384 -15.753,-1.67c-8.906,-0.468 -17.634,-0.378 -23.023,-0.31c-2.21,-0.109 -4.094,1.596 -4.203,3.806c-0.11,2.211 1.595,4.094 3.806,4.204c5.208,0.585 13.642,1.548 22.178,3.075c4.89,0.874 9.763,1.973 14.046,3.279c8.401,2.562 19.366,5.782 29.542,9.86c6.304,2.527 12.18,5.469 16.772,8.786c3.803,2.747 7.188,6.711 10.392,10.806c5.922,7.568 10.577,16.002 13.527,21.179c3.766,5.744 11.487,7.351 17.231,3.585c5.745,-3.766 7.351,-11.487 3.585,-17.232Z" />
<g id="legs">
<g id="right-leg">
<path id="right-leg-pos3" fill="none" stroke="#643d23" stroke-opacity="0" stroke-width="208.33" d="M2000,1745.83c-0,0 35.276,257.816 283.077,282.465c219.258,21.811 330.161,-71.325 351.023,-84.475" />
<path id="right-leg-pos2" fill="none" stroke="#643d23" stroke-opacity="0" stroke-width="208.33" d="M2045.26,1721.5c0,-0 1.829,213.483 0,462.5c-0.503,68.585 -0.458,373.534 0,416.667" />
<path id="right-leg-pos1" fill="none" stroke="#643d23" stroke-width="208.33" d="M2045.26,1721.5c0,-0 -64.502,337.877 -358.333,337.5c-247.476,-0.318 -314.003,-281.554 -318.713,-312.624" />
</g>
<g id="right-arm">
<path id="right-arm-pos1" fill="none" stroke="#643d23" stroke-width="208.33" d="M1485.62,1871.78c0,0 13.19,243.704 260.991,268.354c219.258,21.81 330.161,-71.326 351.023,-84.476" />
<path id="right-arm-pos2" fill="none" stroke="#581e0d" stroke-opacity="0" stroke-width="208.33" d="M1468.82,1854.17c-0,-0 -1.671,142.649 -3.5,391.666c-0.503,68.586 -0.458,373.534 0,416.667" />
<path id="right-arm-pos3" fill="none" stroke="#581e0d" stroke-opacity="0" stroke-width="208.33" d="M1435.54,1833.33c-0,0 -61.004,317.044 -354.834,316.667c-247.476,-0.317 -314.004,-281.554 -318.713,-312.624" />
</g>
<g id="left-leg">
<path id="left-leg-pos1" fill="none" stroke="#8b5532" stroke-width="208.33" d="M1977.31,1616.67c-0,-0 33.486,332.148 281.287,356.797c219.258,21.81 330.16,-71.325 351.023,-84.475" />
<path id="left-leg-pos2" fill="none" stroke="#8b5532" stroke-opacity="0" stroke-width="208.33" d="M1994.49,1695.83c0,0 1.829,213.483 0,462.5c-0.503,68.586 -0.458,373.534 0,416.667" />
<path id="left-leg-pos3" fill="none" stroke="#8b5532" stroke-opacity="0" stroke-width="208.33" d="M1968.2,1725c0,0 -64.502,337.877 -358.333,337.5c-247.476,-0.317 -314.003,-281.554 -318.713,-312.624" />
</g>
<g id="left-arm">
<path id="left-arm-pos3" fill="none" stroke="#8b5532" stroke-opacity="0" stroke-width="208.33" d="M1367.69,1775c0,-0 33.486,332.148 281.287,356.797c219.258,21.811 330.161,-71.325 351.023,-84.475" />
<path id="left-arm-pos2" fill="none" stroke="#8b5532" stroke-opacity="0" stroke-width="208.33" d="M1393.98,1745.83c-0,0 1.828,213.483 -0,462.5c-0.504,68.586 -0.459,373.534 -0,416.667" />
<path id="left-arm-pos1" fill="none" stroke="#8b5532" stroke-width="208.33" d="M1393.98,1745.83c-0,0 -64.503,337.877 -358.334,337.5c-247.476,-0.317 -314.003,-281.554 -318.713,-312.624" />
</g>
</g>
<path id="right-antler" fill="#f4c7ac" stroke="#f4c7ac" stroke-linecap="butt" stroke-width="20.83" d="M1106.12,763.022c-6.018,-1.476 -3.189,-14.189 -2.78,-21.355c0.695,-12.153 3.475,-35.59 6.947,-51.562c3.286,-15.113 6.118,-30.898 13.886,-44.272c24.918,-42.895 53.034,-50.856 67.379,-62.694c5.262,-4.342 14.695,-4.131 18.693,-8.333c6.369,-6.695 11.909,-26.422 12.5,-37.5c0.539,-10.094 -5.976,-19.313 -8.953,-28.973c-4.27,-13.856 -21.099,-52.938 -16.666,-54.166c2.844,-0.788 12.743,7.498 25,25c9.314,13.299 27.704,30.193 29.786,49.805c1.223,11.522 -2.083,27.084 4.167,29.167c6.25,2.083 23.395,-9.213 33.333,-16.667c13.889,-10.416 39.583,-29.166 50,-45.833c9.821,-15.714 12.744,-38.194 12.5,-54.167c-0.224,-14.646 -5.611,-29.633 -13.963,-41.666c-9.64,-13.889 -33.706,-32.639 -43.879,-41.667c-5.292,-4.697 -11.002,-9.011 -17.158,-12.5c-8.519,-4.829 -25.517,-8.866 -33.953,-16.472c-8.317,-7.498 -13.126,-18.544 -16.667,-29.167c-4.861,-14.583 -17.857,-52.625 -12.5,-58.333c4.213,-4.489 26.98,41.699 37.5,54.166c7.072,8.382 17.183,15.811 25.62,20.639c7.624,4.364 16.667,6.945 25,8.334c8.22,1.37 19.444,3.472 25,-0c5.556,-3.473 8.333,-13.354 8.333,-20.834c0,-15.277 -3.369,-52.81 -8.333,-70.833c-3.809,-13.83 -14.405,-24.838 -21.453,-37.306c-7.037,-12.448 -12.36,-25.172 -20.833,-37.5c-6.344,-9.228 -39.484,-64.595 -37.5,-75c0.398,-2.089 12.055,-5.032 21.334,0.195c10.531,5.932 19.199,20.613 26.582,26.889c13.889,11.805 25.347,28.125 35.417,43.75c10.069,15.625 17.573,32.91 25,50c8.436,19.412 20.655,46.365 25.62,66.472c4.341,17.581 1.389,38.194 4.166,54.167c2.485,14.286 7.556,35.731 12.5,41.666c3.884,4.662 13.391,-1.306 17.168,-6.055c4.945,-6.218 11.564,-22.115 12.5,-31.25c0.395,-3.857 6.374,-21.851 12.5,-31.25c8.147,-12.5 28.844,-30.936 36.379,-43.75c5.795,-9.855 9.435,-21.723 8.835,-33.139c-0.695,-13.195 -6.495,-35.891 -13.001,-46.028c-11.898,-18.536 -27.99,-35.16 -25,-37.5c0.465,-0.364 2.597,-0.579 3.554,-0.432c1.593,0.245 4.886,2.174 7.363,3.539c9.143,5.039 22.333,13.923 25,15.837c6.432,4.618 20.69,21.745 26.583,35.223c6.513,14.898 16.296,36.029 12.5,54.166c-4.064,19.412 -26.567,41.505 -36.881,62.306c-9.967,20.103 -19.107,44.822 -25,62.5c-4.128,12.385 -4.38,27.081 -8.333,45.833c-0.76,3.605 24.116,-21.932 59.769,-29.9c13.868,-3.1 22.623,-1.711 29.924,-2.511c2.249,-0.247 4.572,3.564 4.561,4.107c-0.044,2.061 -1.105,4.747 -5.29,5.293c-5.627,0.733 -16.769,3.724 -20.518,6.108c-5.244,3.335 -29.674,15.056 -39.899,25.431c-13.932,14.136 -21.659,24.283 -28.046,29.167c-14.517,11.098 -26.193,24.557 -38.621,37.5c-13.972,14.551 -32.122,35.949 -45.213,49.805c-10.791,11.422 -20.834,24.306 -33.334,33.334c-12.5,9.027 -27.426,14.641 -41.666,20.833c-15.973,6.944 -40.973,15.278 -54.167,20.833c-8.587,3.616 -17.387,7.129 -25,12.5c-10.873,7.672 -30.261,19.201 -40.239,33.528c-10.178,14.616 -17.968,40.796 -20.833,54.167c-2.671,12.465 -6.016,26.129 -13.886,33.855c-7.87,7.726 -27.315,13.976 -33.334,12.5Z" />
<path id="left-antler" fill="#f4c7ac" stroke="#f4c7ac" stroke-linecap="butt" stroke-width="20.83" d="M1059.44,758.855c7.097,-0.074 16.237,-5.951 16.845,-13.022c0.724,-8.42 -7.387,-25.356 -12.5,-37.5c-5.555,-13.194 -11.805,-29.166 -20.833,-41.666c-9.028,-12.5 -24.804,-26.632 -33.333,-33.334c-9.723,-7.639 -33.54,-25.954 -43.986,-32.811c-5.703,-3.744 -14.695,-4.131 -18.693,-8.333c-6.369,-6.695 -10.417,-26.389 -12.5,-37.5c-1.792,-9.556 -1.907,-19.634 -0,-29.167c2.778,-13.889 21.099,-52.939 16.666,-54.167c-2.844,-0.788 -12.743,7.499 -25,25c-9.314,13.3 -18.751,30.388 -20.833,50c-1.223,11.522 2.083,27.084 -4.167,29.167c-6.25,2.083 -23.395,-9.213 -33.333,-16.667c-13.889,-10.416 -39.583,-29.166 -50,-45.833c-9.821,-15.714 -12.744,-38.195 -12.5,-54.167c0.224,-14.646 5.611,-29.633 13.963,-41.666c9.64,-13.889 33.706,-32.639 43.879,-41.667c5.292,-4.697 11.253,-8.601 17.158,-12.5c8.415,-5.556 24.306,-13.889 33.333,-20.833c7.785,-5.988 15.386,-12.662 20.834,-20.834c8.333,-12.5 34.523,-48.458 29.166,-54.166c-4.212,-4.49 -40.277,34.722 -54.166,45.833c-9.33,7.464 -20.139,15.972 -29.167,20.833c-7.734,4.165 -16.667,6.945 -25,8.334c-8.22,1.37 -19.444,3.472 -25,-0c-5.555,-3.473 -8.333,-13.354 -8.333,-20.834c-0,-15.278 4.166,-52.083 8.333,-70.833c3.245,-14.603 10.417,-28.472 16.667,-41.667c6.121,-12.923 12.359,-25.173 20.833,-37.5c6.344,-9.228 39.484,-64.595 37.5,-75c-0.398,-2.089 -12.056,-5.032 -21.334,0.195c-10.531,5.932 -19.199,20.613 -26.583,26.889c-13.888,11.805 -25.347,28.125 -35.416,43.75c-10.07,15.625 -18.392,32.577 -25,50c-7.639,20.138 -16.667,50 -20.834,70.833c-3.551,17.757 -1.388,38.194 -4.166,54.167c-2.485,14.286 -7.556,35.731 -12.5,41.666c-3.884,4.662 -13.391,-1.306 -17.168,-6.055c-4.945,-6.218 -11.564,-22.115 -12.5,-31.25c-0.395,-3.857 -7.113,-21.409 -12.5,-31.25c-6.861,-12.533 -22.416,-31.098 -28.666,-43.945c-5.001,-10.28 -9.435,-21.722 -8.834,-33.139c0.694,-13.194 6.494,-35.891 13.001,-46.027c11.898,-18.536 27.989,-35.16 25,-37.5c-0.465,-0.365 -2.597,-0.579 -3.554,-0.432c-1.593,0.245 -4.887,2.174 -7.364,3.539c-9.142,5.039 -22.332,13.922 -25,15.837c-6.432,4.617 -20.689,21.745 -26.582,35.222c-6.514,14.898 -15.12,35.823 -12.5,54.167c2.778,19.444 20.139,41.667 29.167,62.5c8.921,20.588 19.107,44.822 25,62.5c4.128,12.385 4.38,27.081 8.333,45.833c0.76,3.605 -8.57,-19.56 -44.223,-27.528c-13.868,-3.099 -22.624,-1.71 -29.925,-2.511c-2.248,-0.246 -4.571,3.564 -4.56,4.108c0.044,2.06 1.105,4.747 5.29,5.292c5.627,0.734 16.769,3.725 20.518,6.109c5.244,3.334 5.135,4.089 10.732,8.764c7.082,5.915 10.309,14.63 18.75,22.627c14.409,13.65 16.53,15.95 22.917,20.834c14.517,11.098 26.193,24.557 38.621,37.5c13.972,14.551 32.122,35.949 45.213,49.805c10.792,11.422 20.834,24.306 33.334,33.334c12.5,9.027 27.426,14.641 41.666,20.833c15.973,6.944 40.973,15.278 54.167,20.833c8.587,3.616 17.163,7.462 25,12.5c9.722,6.25 23.67,15.025 33.333,25c10.764,11.111 22.917,29.167 31.25,41.667c7.072,10.607 10.07,25.694 18.75,33.333c8.681,7.639 24.971,12.587 33.334,12.5Z" />
<path id="torso" fill="#8b5532" d="M372.123,854.167c145.833,-48.611 520.849,-102.766 662.5,-127.982c61.176,-10.891 115.904,-36.157 191.666,2.982c37.688,19.469 73.481,46.414 83.334,104.166c10.761,63.081 -20.32,127.408 -20.834,187.5c-0.855,99.974 54.792,458.334 145.07,500c90.278,41.667 347.986,-73.373 438.264,-83.333c69.466,-7.664 131.515,-5.098 208.333,41.667c32.942,20.054 79.423,93.247 95.483,166.666c15.73,71.908 1.524,144.034 -12.15,166.667c-40.585,67.179 -144.758,93.213 -208.333,125c-125,62.5 -426.287,105.503 -541.667,83.333c-47.145,-9.058 -124.614,-59.888 -158.333,-166.666c-41.667,-131.945 -37.751,-396.324 -91.667,-625c-8.316,-35.272 -20.353,-106.796 -20.353,-106.796c0,0 -24.524,-26.227 -62.98,-18.204c-113.505,23.679 -368.056,85.777 -500,103.29c-69.155,9.179 -246.594,16.754 -291.667,1.788c-33.373,-11.082 -97.901,-3.854 -106.004,-188.412c-5.961,-135.767 104.969,-138.543 189.338,-166.666Z" />
</g>
<g id="saddle">
<path id="saddle-outline" fill="#063f07" d="M1497.12,1529.17c4.183,34.162 37.7,131.944 53.672,170.833c9.548,23.246 22.634,50 42.161,62.5c19.527,12.5 49.681,13.651 75,12.5c30.555,-1.389 75,-10.417 108.333,-20.833c32.036,-10.012 70.834,-26.389 91.667,-41.667c16.153,-11.846 27.83,-30.74 33.333,-50c5.556,-19.444 3.057,-44.656 0,-66.667c-3.472,-25 -10.069,-57.986 -20.833,-83.333c-10.618,-25.002 -26.338,-47.968 -43.75,-68.75c-1.613,-1.925 -13.226,2.56 -27.083,6.25c-27.793,7.401 -68.03,21.752 -95.834,29.167c-41.666,11.111 -86.805,25 -125,33.333c-21.051,4.593 -45.073,10.035 -54.166,11.515c-22.24,3.621 -37.808,2.639 -37.5,5.152Z" />
<path fill="#094c0a" d="M1537.75,1549.24c3.374,24.531 32.611,96.883 45.619,126.765c8.109,18.628 16.943,42.272 32.43,52.522c15.487,10.25 40.156,10.83 60.492,8.976c24.907,-2.271 63.257,-14.27 88.952,-22.603c22.585,-7.325 48.79,-17.97 65.215,-27.397c13.094,-7.515 27.884,-16.173 33.333,-29.167c5.936,-14.155 4.265,-37.247 2.282,-55.763c-2.084,-19.445 -8.02,-41.025 -14.782,-60.903c-6.804,-20 -15.901,-40.269 -26.041,-59.096c-0.9,-1.671 -22.987,6.336 -34.164,8.986c-22.416,5.314 -54.87,15.619 -77.295,20.943c-33.606,7.978 -70.014,17.952 -100.82,23.935c-16.978,3.298 -75.47,10.998 -75.221,12.802Z" />
</g>
<path id="nosey" fill="#a91e1e" d="M93.045,937.5c13.889,-31.25 48.907,-83.767 80.516,-98.135c38.195,-17.361 89.065,-26.813 132.314,-16.396c40.427,9.736 90.553,41.614 107.914,72.864c16.962,30.532 21,91.989 9.592,125c-12,34.723 -33.07,87.279 -72.841,107.165c-41.667,20.833 -120.779,31.724 -165.917,17.835c-45.139,-13.889 -76.788,-48.611 -90.677,-83.333c-13.151,-32.877 -14.79,-93.75 -0.901,-125Z" />
<clipPath id="_clip1">
<path d="M93.045,937.5c13.889,-31.25 48.907,-83.767 80.516,-98.135c38.195,-17.361 89.065,-26.813 132.314,-16.396c40.427,9.736 90.553,41.614 107.914,72.864c16.962,30.532 21,91.989 9.592,125c-12,34.723 -33.07,87.279 -72.841,107.165c-41.667,20.833 -120.779,31.724 -165.917,17.835c-45.139,-13.889 -76.788,-48.611 -90.677,-83.333c-13.151,-32.877 -14.79,-93.75 -0.901,-125Z" />
</clipPath>
<g clip-path="url(#_clip1)">
<path id="nose-shine" fill="#ffebeb" d="M132.325,950c-4.705,-1.604 17.534,-55.958 31.464,-71.489c12.565,-14.009 45.174,-22.905 52.118,-21.699c6.944,1.205 -3.159,21.723 -10.451,28.932c-8.686,8.587 -29.799,12.161 -41.667,22.589c-12.188,10.71 -27.958,42.862 -31.464,41.667Z" />
</g>
<g id="features">
<g id="eyes">
<path id="right-wink-eye" fill="none" stroke="#000" stroke-opacity="0" stroke-width="24.32" d="M1091.95,837.323c-0,-0 22.474,-17.041 39.484,-1.859c9.253,8.258 13.08,19.699 14.401,25.703" />
<path id="right-eye" d="M1109.62,820.833c4.99,-2.749 15.625,-3.125 20.833,0c5.208,3.125 9.189,12.867 10.417,18.75c1.146,5.492 -0.111,12.404 -3.05,16.552c-2.939,4.147 -9.06,8.69 -14.583,8.333c-5.524,-0.356 -14.77,-5.948 -18.557,-10.471c-3.677,-4.391 -4.99,-11.14 -4.167,-16.667c0.823,-5.527 4.117,-13.747 9.107,-16.497Z" />
<path id="left-eye" d="M1001.29,820.833c4.861,-2.777 15.972,-2.777 20.834,0c4.861,2.778 7.306,11.111 8.333,16.667c1.019,5.509 0.275,12.5 -2.17,16.667c-2.444,4.166 -7.492,8.333 -12.5,8.333c-5.194,0 -14.858,-4.167 -18.663,-8.333c-3.806,-4.167 -4.862,-11.111 -4.167,-16.667c0.694,-5.556 3.472,-13.889 8.333,-16.667Z" />
</g>
<g id="eyebrows">
<path id="right-brow" fill="#581e0d" d="M1114.43,787.922c2.639,2.018 4.387,4.073 7.334,5.608c1.688,0.879 3.586,1.289 5.439,1.725c10.924,2.57 21.971,3.434 33.06,5.167c7.132,1.945 14.501,-2.266 16.446,-9.398c1.945,-7.132 -2.266,-14.501 -9.398,-16.446c-10.433,-4.136 -20.389,-9.001 -31.106,-12.333c-1.818,-0.565 -3.66,-1.175 -5.561,-1.275c-3.318,-0.174 -5.867,0.709 -9.166,1.108c-7.132,-1.945 -14.501,2.266 -16.446,9.398c-1.945,7.132 2.266,14.501 9.398,16.446Z" />
<path id="left-brow" fill="#581e0d" d="M1010.45,764.158c-3.306,-0.399 -5.867,-1.282 -9.193,-1.108c-1.908,0.099 -3.757,0.709 -5.582,1.274c-10.757,3.332 -20.756,8.197 -31.23,12.334c-7.134,1.938 -11.352,9.304 -9.413,16.437c1.938,7.134 9.303,11.352 16.437,9.414c11.127,-1.733 22.213,-2.596 33.177,-5.167c1.86,-0.436 3.764,-0.846 5.46,-1.725c2.957,-1.533 4.718,-3.591 7.368,-5.608c7.134,-1.939 11.352,-9.304 9.414,-16.438c-1.939,-7.133 -9.304,-11.351 -16.438,-9.413Z" />
</g>
<g id="mouth">
<path id="mouth1" d="M1127.71,1015.56c-3.808,4.955 -10.169,12.491 -17.06,19.941c-3.708,4.008 -7.494,7.931 -11.501,10.781c-1.532,1.306 -3.296,2.522 -5.119,3.802c-2.758,1.936 -5.64,3.938 -8.655,5.846c-8.974,5.679 -18.162,10.84 -24.097,13.929c-2.263,0.813 -3.441,3.311 -2.628,5.574c0.813,2.264 3.311,3.442 5.575,2.629c6.886,-1.465 17.82,-3.616 28.345,-7.376c3.951,-1.412 7.739,-3.11 11.204,-5.032c2.664,-1.477 5.031,-3.224 7.195,-4.925c4.555,-4.27 9.121,-9.537 12.684,-15.485c5.549,-9.264 9.195,-19.2 11.64,-25.384c1.186,-2.092 0.451,-4.754 -1.641,-5.941c-2.093,-1.186 -4.755,-0.451 -5.942,1.641Z" />
</g>
</g>
</g>
<!-- </svg> -->
//GLOWING CODE (two versions - one is unnecessary)
<!-- <svg id="glowy" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> -->
<defs>
<!-- We set the filter effect area to be really big to guarantee we see it all... -->
<!-- <filter id="yellow-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="#FBBC23" flood-opacity="1"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter> -->
<!-- The only difference in this filter is its "flood-color" -->
<filter id="pink-glow" x="-100%" y="-100%" width="200%" height="200%">
<feFlood result="flood" flood-color="#F7CDCD" flood-opacity="1"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
</svg>
<!-- when recopying in the reindeer code each time, add filter="url(#pink-glow)" to the svg as the star has, comment out the closing svg tag as it is closed off below and change the viewBox to -500 -200 (so from 0 0 to ("viewBox", "-500 -200 AND THEN KEEP THESE DIMENSIONS THE SAME");) -->body {
padding: 0;
margin: 0;
background-color: #1a1a26;
/* background-color: transparent; */
display: flex;
align-items: center;
justify-content: center;
/* min-height: 100vh; */
}
/* svg { */
#reindeer {
width: 98vw;
max-height: 100vh;
/* width: 600px; */
}
#reindeer {
/* opacity: 0; */
/* animation: MoveUpDown 6s linear infinite;
/* animation: RightToLeft 10s linear infinite; */
position: absolute;
left: 0;
top: 22px;
z-index: 2;
}
#nosey {
animation: FlashNose 2s linear infinite;
}
@keyframes FlashNose {
50% {
fill: purple;
/* opacity: 0; */
}
100% {
/* opacity: 1; */
}
}
#nosey:hover {
cursor: pointer;
animation-play-state: paused;
fill: orange !important;
}
#left-arm-midpoint,
#left-arm-after,
#right-arm-midpoint,
#right-arm-before {
opacity: 0;
}
#left-brow,
#right-brow {
animation: BrowsMove 10s linear infinite;
}
@keyframes BrowsMove {
0% {
transform: rotateZ(0.2deg);
}
45% {
transform: rotateZ(0.2deg);
}
47% {
transform: rotateZ(-0.4deg);
}
49% {
transform: rotateZ(0.2deg);
}
100% {
transform: rotateZ(0.2deg);
}
}
/* #right-antler, */
#left-ear,
#left-ear-inner {
transform-origin: 80% 80%;
animation: LeftEarMoves 5s linear infinite;
}
@keyframes LeftEarMoves {
0% {
transform: rotate(0.2deg);
}
50% {
transform: rotate(-0.65deg);
}
100% {
transform: rotate(0.2deg);
}
}
/* #left-antler, */
#right-ear,
#right-ear-inner {
transform-origin: 20% 80%;
animation: RightEarMoves 5s linear infinite;
}
@keyframes RightEarMoves {
0% {
}
50% {
transform: rotate(0.85deg);
}
100% {
}
}
#left-antler,
#right-antler {
animation: AntlersMove 5s linear infinite;
}
@keyframes AntlersMove {
0% {
}
50% {
transform: rotateZ(0.7deg);
}
100% {
}
}
/*
#tail {
transform-origin: 20% 40%;
animation: TailMoves 2s linear infinite;
} */
/* @keyframes TailMoves {
0% {
}
50% {
transform: skewY(3deg);
}
100% {
}
}
*/
/*
@keyframes MoveUpDown {
0% {
}
50% {
top: 150px;
}
100% {
}
} */
/*
@keyframes RightToLeft {
0% {
left: 1000px;
bottom: 25px;
}
50% {
bottom: -50px;
}
65% {
bottom: 10px;
}
85% {
bottom: -60px;
}
100% {
left: -1000px;
bottom: -60px;
}
}
*/
/*
#star-A {
width: 100vw;
max-height: 100vh; */
/* position: absolute; */
/*
left: 50px;
bottom: 50px; */
/* transform: scale(0.05);
animation: StarTwinkle 2s linear infinite;
z-index: -2;
} */
/* @keyframes StarTwinkle {
50% {
opacity: 30%;
}
}
*/
gsap.registerPlugin(MorphSVGPlugin);
gsap.timeline().from("#reindeer", { duration: 4, opacity: 0 });
var tl = gsap.timeline({ repeat: -1 });
tl.addLabel("positionOne")
//LEFT ARM
.to("#left-arm-pos1", {
duration: 0.6,
ease: "none",
morphSVG: {
shape: "#left-arm-pos2",
type: "rotational",
origin: "70% 5%"
}
})
.addLabel("positionTwo")
.to("#left-arm-pos1", {
duration: 0.75,
opacity: 100,
fill: "none",
ease: "none",
morphSVG: {
shape: "#left-arm-pos3",
type: "rotational",
origin: "25% 5%",
map: "position",
shapeIndex: 4
}
})
.addLabel("positionThree")
.to("#left-arm-pos1", {
duration: 0.6,
opacity: 100,
fill: "none",
ease: "none",
morphSVG: {
shape: "#left-arm-pos2",
type: "rotational",
origin: "25% 5%",
map: "position",
shapeIndex: 4
}
})
.addLabel("positionFour")
.to("#left-arm-pos1", {
duration: 0.75,
ease: "none",
opacity: 100,
morphSVG: {
shape: "#left-arm-pos1",
type: "rotational",
origin: "70% 5%"
}
})
//RIGHT ARM
.to(
"#right-arm-pos1",
{
duration: 0.6,
ease: "none",
morphSVG: {
shape: "#right-arm-pos2",
type: "rotational",
origin: "70% 5%"
}
},
"positionOne"
)
.to(
"#right-arm-pos1",
{
duration: 0.75,
opacity: 100,
fill: "none",
ease: "none",
morphSVG: {
shape: "#right-arm-pos3",
type: "rotational",
origin: "25% 5%",
map: "position",
shapeIndex: 4
}
},
"positionTwo"
)
.to(
"#right-arm-pos1",
{
duration: 0.6,
ease: "none",
morphSVG: {
shape: "#right-arm-pos2",
type: "rotational",
origin: "70% 5%"
}
},
"positionThree"
)
.to(
"#right-arm-pos1",
{
duration: 0.75,
opacity: 100,
fill: "none",
ease: "none",
morphSVG: {
shape: "#right-arm-pos1",
type: "rotational",
origin: "25% 5%",
map: "position",
shapeIndex: 4
}
},
"positionFour"
)
//LEFT LEG
.to(
"#left-leg-pos1",
{
duration: 0.6,
ease: "none",
morphSVG: {
shape: "#left-leg-pos2",
type: "rotational",
origin: "25% 5%"
}
},
"positionOne"
)
.to(
"#left-leg-pos1",
{
duration: 0.75,
opacity: 100,
fill: "none",
ease: "none",
morphSVG: {
shape: "#left-leg-pos3",
type: "rotational",
origin: "70% 5%",
map: "position",
shapeIndex: 4
}
},
"positionTwo"
)
.to(
"#left-leg-pos1",
{
duration: 0.6,
ease: "none",
morphSVG: {
shape: "#left-leg-pos2",
type: "rotational",
origin: "70% 5%"
}
},
"positionThree"
)
.to(
"#left-leg-pos1",
{
duration: 0.75,
opacity: 100,
fill: "none",
ease: "none",
morphSVG: {
shape: "#left-leg-pos1",
type: "rotational",
origin: "25% 5%",
map: "position",
shapeIndex: 4
}
},
"positionFour"
)
//RIGHT LEG
.to(
"#right-leg-pos1",
{
duration: 0.6,
ease: "none",
morphSVG: {
shape: "#right-leg-pos2",
type: "rotational",
origin: "70% -10%"
}
},
"positionOne"
)
.to(
"#right-leg-pos1",
{
duration: 0.75,
opacity: 100,
fill: "none",
ease: "none",
morphSVG: {
shape: "#right-leg-pos3",
type: "rotational",
origin: "25% -10%",
map: "position",
shapeIndex: 4
}
},
"positionTwo"
)
.to(
"#right-leg-pos1",
{
duration: 0.6,
ease: "none",
morphSVG: {
shape: "#right-leg-pos2",
type: "rotational",
origin: "25% -10%"
}
},
"positionThree"
)
.to(
"#right-leg-pos1",
{
duration: 0.75,
opacity: 100,
fill: "none",
ease: "none",
morphSVG: {
shape: "#right-leg-pos1",
type: "rotational",
origin: "70% -10%",
map: "position",
shapeIndex: 4
}
},
"positionFour"
);
//NOISE
var clickNose;
function createAudio(audioURL) {
//creates an html tag called audio which could be any string but in this case it needs to be called audio so the browser knows it is playing a sound
var soundTag = document.createElement("audio");
soundTag.preload = "auto";
soundTag.type = "audio/wav";
soundTag.loop = false;
soundTag.src = audioURL;
return soundTag;
}
//creates an html tag called audio which could be any string but in this case it needs to be called audio so the browser knows it is playing a sound
var honk = createAudio(
"https://www.dropbox.com/s/v3nih2rytlxln8w/horn_stickinthemud.wav?dl=1"
);
var chime = createAudio(
"https://www.dropbox.com/s/5etgvfbff5cadqs/wink_MLaudio_short.mp3?dl=1"
);
nosey.onclick = function () {
honk.play();
};
nosey.onmouseover = function () {
chime.play();
};
//WINKING ON NOSE HOVER
$(function () {
$("#nosey").hover(
function () {
chime.play();
$("#right-eye").css({ opacity: 0 });
$("#right-wink-eye").css("stroke-opacity", "1");
},
function () {
// on mouseout wait the tiniest moment then unwink
setTimeout(function () {
$("#right-eye").css({ opacity: 1 });
$("#right-wink-eye").css("stroke-opacity", "0");
}, 28);
}
);
});
//places the svg in the right place and adds the class of reindeer so it doesn't change every time I reimport the svg code???
var shape = document.getElementsByTagName("svg")[0];
//shape.setAttribute("viewBox", "-400 -200 4000 3200");
//shape.setAttribute("id", "reindeer");
shape.style.display = "block";
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
- https://unpkg.co/gsap@3/dist/gsap.min.js
- https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
- https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js
- https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js
- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js