Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="lil-monster">
  <div class='eye'></div>
  <div class='eye right'></div>

  <svg width="348px" height="605px" viewBox="0 0 348 605" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <circle id="path-1" cx="16" cy="18" r="16"></circle>
        <circle id="path-3" cx="16" cy="18" r="16"></circle>
      </defs>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="body" transform="translate(0.000000, 218.000000)">
          <g id="poz" transform="translate(7.000000, 0.000000)" fill="#FFFFFF">
            <path d="M10.7228807,100.31065 C6.8929746,91.514778 4.46053446,85.1640152 3.42556031,81.2583617 C0.448079045,70.0223227 0.432489364,60.7620789 0.946480927,54.9369242 C1.46090271,49.1068936 2.63531133,39.9056574 7.53200507,29.4662615 C9.22994493,25.8463769 12.8800137,20.1485635 18.4822114,12.3728214 C18.4822114,23.0942137 18.5774081,30.4250267 18.7678014,34.3652605 C18.9356419,37.8387597 20.0872822,45.7723024 24.3014746,54.9369242 C26.1479036,58.9523607 30.3285329,65.4812292 36.8433626,74.5235294 L10.7228807,100.31065 Z"
              id="Path-6"></path>
            <path d="M155.071165,92.0233558 C148.996891,81.3466923 145.442267,74.0555338 144.407292,70.1498804 C141.429811,58.9138414 141.414221,49.6535976 141.928213,43.8284428 C142.442635,37.9984123 143.617043,28.7971761 148.513737,18.3577802 C150.211677,14.7378956 153.861746,9.0400822 159.463943,1.26434004 C159.463943,11.9857324 159.55914,19.3165454 159.749533,23.2567791 C159.917374,26.7302784 161.069014,34.6638211 165.283207,43.8284428 C167.129636,47.8438794 172.999067,55.9366937 182.8915,68.1068857 L155.071165,92.0233558 Z"
              id="Path-6" transform="translate(162.282736, 46.643848) scale(-1, 1) rotate(-1.000000) translate(-162.282736, -46.643848) "></path>
          </g>
          <path d="M45.5496835,193.55236 C33.9324331,186.929832 25.9651126,181.464318 21.6477218,177.155818 C17.330331,172.847319 13.6110602,166.650308 10.4899093,158.564787 L8.63073666,164.05483 C6.86632458,157.505185 6.05128775,152.668189 6.18562617,149.543842 C6.31996458,146.419496 7.75472561,136.843392 10.4899093,120.81553 L0.184622456,128.72708 C8.13526842,112.665992 14.5782711,101.438062 19.5136305,95.0432876 C24.4489899,88.6485134 30.5333023,82.9272881 37.7665677,77.8796116 C53.1976088,69.1613274 64.6988383,63.9346318 72.2702563,62.1995249 C77.5195863,60.9965602 87.9271967,58.7260029 100.064817,58.4353599 C103.644274,58.3496475 109.116036,58.818259 116.480103,59.8411943 L104.433665,63.9101303 C118.448006,61.4492133 128.884273,60.5867368 135.742464,61.3227008 C142.600656,62.0586647 153.021649,65.1593684 167.005444,70.6248119 C161.480566,70.3323348 157.6884,70.3323348 155.628946,70.6248119 C153.569493,70.9172891 152.75839,71.571031 153.195638,72.5860377 C161.670187,74.1710951 167.590428,75.9356198 170.95636,77.8796116 C174.322291,79.8236035 178.647864,83.9765424 183.933079,90.3384284 C180.802321,88.0846194 178.455792,86.6644374 176.893493,86.0778824 C175.331195,85.4913275 173.895045,85.4913275 172.585045,86.0778824 C179.302366,91.1683587 183.678387,95.1630111 185.713108,98.0618396 C187.74783,100.960668 190.058952,106.49306 192.646475,114.659016 C190.068808,109.964293 187.757686,106.774033 185.713108,105.088235 C183.668531,103.402436 182.310599,102.582771 181.639313,102.629239 C185.169012,108.845907 187.447043,113.556088 188.473403,116.759784 C189.499764,119.96348 190.890788,126.705931 192.646475,136.987138 L185.713108,126.473579 C187.470532,131.752849 188.39063,135.73084 188.473403,138.407551 C188.556176,141.084262 187.883921,145.121032 186.456638,150.51786 L183.050007,144.293311 C182.284816,154.198329 181.045136,161.296693 179.330967,165.588405 C177.616799,169.880116 174.000507,174.9395 168.482091,180.766556 C165.642573,186.07412 163.744985,190.336054 162.78933,193.55236 C161.355846,198.376819 161.813835,198.243949 161.880571,202.984294 C161.99165,210.87446 164.070924,218.879293 164.378443,226.778648 C164.649277,233.735655 166.24725,238.091108 163.549522,247.550285 C160.015064,259.943329 157.107169,264.101804 151.914072,270.483089 C148.452008,274.737279 142.622945,279.021661 134.426881,283.336234 C133.628506,287.714415 133.229318,290.901436 133.229318,292.897296 C133.229318,294.893157 133.628506,296.912699 134.426881,298.955922 L126.291786,299.759157 C124.850965,297.289051 124.009548,295.373414 123.767532,294.012244 C123.525517,292.651075 123.525517,289.834315 123.767532,285.561965 C115.318027,285.838264 108.873404,285.838264 104.433665,285.561965 C99.9939249,285.285666 94.5170718,284.543756 88.0031053,283.336234 C88.321194,287.775562 88.321194,290.962583 88.0031053,292.897296 C87.6850165,294.83201 86.6700388,297.818395 84.9581721,301.856453 L77.63256,301.856453 C77.7355472,297.432918 77.7355472,294.000831 77.63256,291.560192 C77.5295728,289.119552 77.2264216,285.36742 76.7231066,280.303797 C67.7961599,274.647085 61.9228962,269.960739 59.1033155,266.244759 C54.8739445,260.670789 54.4072324,258.1769 53.3925038,249.555943 C52.3777752,240.934985 53.862539,237.552448 55.0288256,231.628603 C56.1951122,225.704759 59.8453916,222.429721 60.5508043,213.197247 C60.9808198,207.569183 59.8838023,205.291593 57.2996821,201.907529 C55.5769353,199.651486 51.6602691,196.86643 45.5496835,193.55236 Z"
            fill="#898BA1"></path>
          <ellipse id="Oval" fill="#FFFFFF" transform="translate(116.000000, 240.000000) rotate(-13.000000) translate(-116.000000, -240.000000) "
            cx="116" cy="240" rx="34" ry="30"></ellipse>
          <path d="M68.1678982,228.668878 C72.6876828,234.488291 78.1811802,238.712079 81.0391822,239.944344 C83.8971843,241.176609 92.8599121,243.365552 104.33613,244.263283 C115.812348,245.161015 120.474036,243.651354 128.428015,243.651354 C133.730668,243.651354 137.13986,243.85533 138.655592,244.263283 C138.305349,242.585683 137.890582,241.386782 137.411288,240.66658 C136.931994,239.946377 135.918419,238.999005 134.370563,237.824461 C135.721996,236.967775 136.735571,236.539432 137.411288,236.539432 C138.087004,236.539432 139.200742,236.967775 140.7525,237.824461 C140.151579,236.026996 139.598837,234.793464 139.094273,234.123867 C138.58971,233.45427 137.364297,232.328044 135.418036,230.74519 C136.737807,229.012998 137.604536,227.635028 138.018221,226.611277 C138.431907,225.587527 138.644364,224.294834 138.655592,222.733196 C136.782109,223.450563 135.353766,223.869683 134.370563,223.990556 C133.38736,224.111429 131.406511,224.111429 128.428015,223.990556 C129.055658,222.073264 129.439797,220.573561 129.580432,219.491445 C129.721068,218.40933 129.721068,216.953289 129.580432,215.123322 C124.184363,219.301679 119.935539,221.95962 116.83396,223.097148 C113.732382,224.234675 108.744545,224.964348 101.870449,225.286167 C94.4838406,225.796495 88.9840493,225.646984 85.371075,224.837632 C79.9516136,223.623605 76.9154554,219.087895 71.1308352,218.400109 C69.2117367,218.914935 68.151504,221.070452 67.671738,222.733196 C67.191972,224.39594 66.0039607,225.882717 68.1678982,228.668878 Z"
            id="right-hand" stroke="#787A87" fill="#898BA1">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" additive="sum"
              to="15 45 180" dur="0.3s" begin="balloonAnimation.begin" fill="freeze"
            />
          </path>
          <path d="M149.79123,229.469127 C154.606841,231.641428 158.217095,232.672111 160.621993,232.561176 C164.22934,232.394773 167.099468,231.731593 170.258242,228.525009 C173.417016,225.318424 173.363352,222.508145 173.363352,219.626965 C173.363352,216.745786 172.110952,212.050032 170.258242,209.514059 C168.405532,206.978085 165.987626,207.187599 163.736564,206.449905 C162.235856,205.958109 160.21122,205.603597 157.662654,205.386368 C156.238774,203.973796 155.396449,202.847023 155.135679,202.006049 C154.874909,201.165075 154.874909,199.575374 155.135679,197.236947 C152.750884,198.560247 151.26083,199.675776 150.665516,200.583534 C150.070202,201.491292 149.778773,203.092236 149.79123,205.386368 C145.018255,205.216657 141.639238,205.571169 139.654182,206.449905 C137.669125,207.328641 135.663809,209.357641 133.638233,212.536904 C135.782499,212.194764 137.387576,211.987407 138.453465,211.914834 C139.519354,211.842261 140.959743,211.842261 142.774633,211.914834 C140.143975,213.71774 138.407733,215.126203 137.565909,216.140225 C136.724084,217.154246 136.123443,218.560676 135.763988,220.359515 C137.500147,219.871149 138.796879,219.626965 139.654182,219.626965 C140.511485,219.626965 141.823679,219.871149 143.590765,220.359515 C141.105921,222.299096 139.557643,223.815263 138.945932,224.908015 C138.33422,226.000767 137.874212,228.072171 137.565909,231.122227 C140.466244,229.58721 142.642869,228.721471 144.095782,228.525009 C145.548695,228.328547 147.447178,228.643253 149.79123,229.469127 Z"
            id="left-hand" stroke="#787A87" fill="#898BA1">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" additive="sum"
              to="-5 180 360" dur="0.3s" begin="balloonAnimation.begin" fill="freeze"
            />
          </path>
        </g>
        <g id="mouth" transform="translate(31.000000, 331.000000)">
          <path d="M18.5186268,5.41671195 C22.4156694,4.28039271 31.614476,5.23619593 46.1150467,8.2841216 C52.848676,9.25534707 57.8864849,9.7409598 61.2284735,9.7409598 C66.2414564,9.7409598 69.0489967,8.88786988 76.9523956,8.2841216 C96.8002751,2.38410347 107.790724,-3.72267406 117.83527,5.41671195 C127.879816,14.556098 130.162637,20.3191531 130.810271,28.2307304 C131.457905,36.1423077 126.895231,45.9412893 123.274434,51.3088078 C119.653636,56.6763263 113.951342,58.7127265 109.05813,60.4763938 C97.723379,64.5617942 86.9383552,64.0541844 80.1989668,64.8897898 C70.5501847,66.0861259 54.9319614,65.2758937 33.344297,62.4590931 C23.4389221,59.9330614 16.6031048,57.2623794 12.836845,54.4470472 C10.1517959,52.4399352 3.26637134,45.8859996 1.24533302,35.3095422 C0.859432082,33.2900531 1.18983055,22.7755582 4.97939777,16.2668276 C9.18166396,9.04927032 16.9773869,5.86611442 18.5186268,5.41671195 Z"
            id="Path-2" fill="#000000">
            <animate dur="0.3s" id="mouthSadAnimation" attributeName="d" values="M18.5186268,5.41671195 C22.4156694,4.28039271 31.614476,5.23619593 46.1150467,8.2841216 C52.848676,9.25534707 57.8864849,9.7409598 61.2284735,9.7409598 C66.2414564,9.7409598 69.0489967,8.88786988 76.9523956,8.2841216 C96.8002751,2.38410347 107.790724,-3.72267406 117.83527,5.41671195 C127.879816,14.556098 130.162637,20.3191531 130.810271,28.2307304 C131.457905,36.1423077 126.895231,45.9412893 123.274434,51.3088078 C119.653636,56.6763263 113.951342,58.7127265 109.05813,60.4763938 C97.723379,64.5617942 86.9383552,64.0541844 80.1989668,64.8897898 C70.5501847,66.0861259 54.9319614,65.2758937 33.344297,62.4590931 C23.4389221,59.9330614 16.6031048,57.2623794 12.836845,54.4470472 C10.1517959,52.4399352 3.26637134,45.8859996 1.24533302,35.3095422 C0.859432082,33.2900531 1.18983055,22.7755582 4.97939777,16.2668276 C9.18166396,9.04927032 16.9773869,5.86611442 18.5186268,5.41671195 Z;M28.1795468,9.44458808 C32.0765893,8.30826884 37.8933862,7.58234867 45.6299373,7.26682757 C50.5278808,6.98626132 57.3168747,6.17668686 65.996919,4.83810421 C79.0169855,2.83023023 91.4176011,0.765368199 99.321,0.161619925 C105.99786,0.161619925 110.037174,3.39777432 114.979482,8.85649249 C118.274354,12.4956379 119.679578,18.10585 119.195155,25.6871286 C115.616075,18.2178721 112.56822,13.5522778 110.051588,11.6903455 C107.534955,9.82841328 103.958093,8.3539073 99.321,7.26682757 C81.5978716,9.65876932 70.4898446,11.1332753 65.996919,11.6903455 C56.3481369,12.8866817 44.8109765,14.124335 31.3854379,15.4033056 C28.2588047,15.6827302 25.0591912,18.2199651 21.7865973,23.0150102 C18.5140035,27.8100553 16.5425379,32.8495498 15.8722006,38.1334936 C14.3192597,29.8153561 14.8059783,23.4867105 17.3323565,19.1475568 C21.5346227,11.9299995 26.6383069,9.89399054 28.1795468,9.44458808 Z"
              fill="freeze" begin="balloonAnimation.begin" />
          </path>
          <path d="M2.25139162,23.4753728 C4.33390821,22.1756115 5.82867569,21.4060638 6.73569405,21.1667296 C18.2195184,18.1365024 26.9842074,17.6089627 32.8543327,17.5058929 C39.4199117,17.3906122 50.420233,18.9667232 65.8552968,22.2342262 C75.3324942,24.5375996 82.2555879,27.8857472 86.6245779,32.278669 C89.3049637,34.9737371 94.8505382,39.8845507 99.0391245,46.815741 C100.79829,49.726774 103.004979,54.6513618 105.659192,61.5895043 C102.900546,62.3300128 100.862405,62.8317783 99.5447691,63.0948009 C88.3832673,65.3228271 79.5477928,66.2877256 73.112849,66.4373742 C65.5384198,66.6135222 53.5996355,65.7781675 37.2964962,63.93131 C27.4173743,62.1324373 20.5249558,60.0993648 16.6192405,57.8320926 C12.7135253,55.5648203 8.47797414,51.1380934 3.91258696,44.5519119 C1.86787266,39.9548365 0.776429579,36.519611 0.638257718,34.2462352 C0.500085857,31.9728593 1.03779716,28.3825719 2.25139162,23.4753728 Z"
            id="Path-3" fill="#FF804B">
            <animate dur="0.01s" id="startAnimation" attributeName="display" to="none" fill="freeze"
              begin="mouthSadAnimation.begin" />
          </path>
        </g>
        <g id="right-foot" transform="translate(73.000000, 516.000000)">
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="10;0;10"
            repeatCount="indefinite" dur="0.35s" additive="sum" end="balloonAnimation.begin"
          />
          <path d="M2.3343443,4.30967145 C1.67212428,6.33038345 1.2946413,7.85102318 1.20189536,8.87159063 C1.06277645,10.4024418 0.779541044,11.9984885 1.5217413,13.2514772 C2.01654147,14.086803 6.02588531,15.2400066 13.5497728,16.7110879 C16.099605,17.0043257 18.004007,17.1624971 19.2629787,17.1856021 C20.5219505,17.2087071 22.4388449,17.1206652 25.013662,16.9214764 C23.2689486,13.2878026 21.7018423,10.7250031 20.3123431,9.23307801 C18.9228439,7.74115291 16.5746301,6.10001739 13.2677016,4.30967145 L2.3343443,4.30967145 Z"
            id="Path-5" fill="#FD8048"></path>
          <path d="M3.57329548,0.885153066 C2.07450036,0.885153066 1.17716082,1.19286192 0.785866459,1.77757916 C0.394572095,2.36229641 -0.242818562,3.13582984 1.23770224,4.3752663 C2.71822305,5.61470276 4.57843233,6.23286316 6.40350661,6.48045668 C8.22858088,6.72805021 10.6776284,6.6867001 12.9520427,5.96445908 C15.226457,5.24221806 15.4876228,4.35236645 15.4876228,3.59579254 C15.4876228,2.83921864 14.8136102,2.03196849 12.9520427,1.59736169 C11.0904753,1.16275488 9.40417521,1.90702201 7.69960204,1.77757916 C5.99502887,1.64813632 5.0720906,0.885153066 3.57329548,0.885153066 Z"
            id="Path-4" fill="#000000"></path>
        </g>
        <g id="left-foot" transform="translate(125.126043, 523.721663) scale(-1, 1) rotate(8.000000) translate(-125.126043, -523.721663) translate(112.126043, 514.721663)">
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0;8;0"
            repeatCount="indefinite" dur="0.35s" additive="sum" end="balloonAnimation.begin"
          />
          <path d="M2.3343443,4.30967145 C1.67212428,6.33038345 1.2946413,7.85102318 1.20189536,8.87159063 C1.06277645,10.4024418 0.779541044,11.9984885 1.5217413,13.2514772 C2.01654147,14.086803 6.02588531,15.2400066 13.5497728,16.7110879 C16.099605,17.0043257 18.004007,17.1624971 19.2629787,17.1856021 C20.5219505,17.2087071 22.4388449,17.1206652 25.013662,16.9214764 C23.2689486,13.2878026 21.7018423,10.7250031 20.3123431,9.23307801 C18.9228439,7.74115291 16.5746301,6.10001739 13.2677016,4.30967145 L2.3343443,4.30967145 Z"
            id="Path-5" fill="#FD8048"></path>
          <path d="M3.57329548,0.885153066 C2.07450036,0.885153066 1.17716082,1.19286192 0.785866459,1.77757916 C0.394572095,2.36229641 -0.242818562,3.13582984 1.23770224,4.3752663 C2.71822305,5.61470276 4.57843233,6.23286316 6.40350661,6.48045668 C8.22858088,6.72805021 10.6776284,6.6867001 12.9520427,5.96445908 C15.226457,5.24221806 15.4876228,4.35236645 15.4876228,3.59579254 C15.4876228,2.83921864 14.8136102,2.03196849 12.9520427,1.59736169 C11.0904753,1.16275488 9.40417521,1.90702201 7.69960204,1.77757916 C5.99502887,1.64813632 5.0720906,0.885153066 3.57329548,0.885153066 Z"
            id="Path-4" fill="#000000"></path>
        </g>
        <g id="eye-lashes" transform="translate(6.000000, 264.000000)" fill="#000000">
          <path d="M1.60580153,43.8299905 C-0.479036641,43.1097084 3.22605719,37.5104657 5.52140268,33.7290066 C7.81674816,29.9475476 9.06856193,28.4862835 13.9316464,24.2212734 C18.7947308,19.9562633 21.1428727,18.5826861 24.8066302,16.8155247 C27.2491352,15.6374171 30.4767894,14.8007223 34.4895928,14.3054401 C25.7179825,19.116773 19.5592063,23.1667758 16.0132643,26.4554485 C10.6943513,31.3884576 3.61214388,44.9073734 1.60580153,43.8299905 Z"
            id="Path-7">
            <animate dur="0.3s" attributeName="d" to="M28.6142678,48.5245504 C26.5294296,47.8042683 30.2345235,42.2050256 32.529869,38.4235665 C34.8252144,34.6421075 36.0770282,33.1808434 40.9401126,28.9158333 C45.8031971,24.6508232 48.151339,23.277246 51.8150965,21.5100846 C54.2576015,20.331977 57.4852557,19.4952822 61.4980591,19 C52.7264487,23.8113329 46.5676726,27.8613357 43.0217306,31.1500084 C37.7028176,36.0830175 30.6206102,49.6019333 28.6142678,48.5245504 Z"
              fill="freeze" begin="balloonAnimation.begin" />
          </path>
          <path d="M146,0.463050412 C151.479129,1.59569361 156.152637,2.91393281 160.020523,4.41776802 C162.261133,5.28891742 165.55492,6.32565361 168.012331,7.80693974 C171.918135,10.1612935 174.795609,13.099133 176.185483,14.1946859 C182.270925,18.991468 184.894215,20.7413416 185.65012,20.3700375 C186.636997,19.8852784 184.85194,17.0947476 181.246939,13.6896839 C179.181889,11.7391636 177.027742,9.49718921 174.342405,7.80693974 C166.998597,3.18447988 159.51641,0.57230926 155.281937,0.153048367 C152.458954,-0.126458895 149.364976,-0.0231248803 146,0.463050412 Z"
            id="Path-7">
            <animate dur="0.3s" attributeName="d" to="M111.761514,19.6925535 C117.240643,20.8251967 121.914151,22.1434359 125.782038,23.6472711 C128.022647,24.5184205 131.316434,25.5551567 133.773845,27.0364428 C137.679649,29.3907965 140.557123,32.328636 141.946997,33.424189 C148.032439,38.220971 150.655729,39.9708447 151.411634,39.5995406 C152.398511,39.1147815 150.613454,36.3242506 147.008453,32.919187 C144.943403,30.9686667 142.789257,28.7266923 140.103919,27.0364428 C132.760112,22.4139829 125.277924,19.8018123 121.043451,19.3825514 C118.220469,19.1030442 115.12649,19.2063782 111.761514,19.6925535 Z"
              fill="freeze" begin="balloonAnimation.begin" />

          </path>
        </g>
        <path d="M114.5,494.5 C121.058462,489.295949 124.915144,485.193539 126.070046,482.192771 C128.329275,476.322644 124.465618,468.197039 126.070046,465.100181 C130.555263,456.442838 137.728361,450.379517 140.442716,444.297466 C148.374104,426.525624 144.280256,427.877845 153.336372,407.47943 C162.392488,387.081014 171.189743,385.650187 172.387346,372.343904 C174.77483,345.817112 166.083472,318.91563 170.230711,303.713406 C175.567696,284.150018 202.66731,271.172104 206.424624,250.992285 C211.364387,224.461752 199.362824,215.397471 199.851923,197.04075 C200.113119,187.237596 206.57735,175.71002 209.453982,159.16013 C210.150405,155.153458 209.735722,148.14894 208.209931,138.146577"
          id="Line" stroke="#000000" stroke-width="2" stroke-linecap="square">
          <animate dur="0.3s" id="lineDropAnimation" attributeName="d" to="M140,532.024079 C149.011916,535.024848 154.095324,535.024848 155.250227,532.024079 C157.509455,526.153952 159.433438,535.120937 161.037866,532.024079 C165.523083,523.366737 162.705051,538.106131 165.419407,532.024079 C173.350794,514.252238 162.971516,547.056702 172.027632,526.658286 C181.083749,506.259871 174.480226,542.846418 175.677828,529.540134 C178.065313,503.013343 179.436082,541.86051 183.583321,526.658286 C188.920307,507.094898 168.270319,549.719953 172.027632,529.540134 C176.967396,503.009602 178.347273,547.896856 178.836372,529.540134 C179.097568,519.736981 169.151,548.57397 172.027632,532.024079 C172.724055,528.017407 169.0608,528.017407 161.037866,532.024079"
            fill="freeze" begin="balloonAnimation.begin" />
        </path>
        <path d="M211.894498,131.834108 C215.904746,135.5112 217.688551,138.199543 217.245913,139.899137 C216.877709,141.312931 210.502923,139.123936 208.119946,139.000975 C205.736969,138.878015 200.039275,140.385907 199.839543,139.000975 C199.592277,137.286441 201.431047,134.838742 205.355855,131.657875 C205.140246,131.401003 205.043001,131.17509 205.06412,130.980138 C205.098792,130.66007 205.470589,130.25655 206.17951,129.769577 C206.583358,129.85556 206.951225,129.925943 207.283114,129.980726 C192.689684,119.050115 182.991329,110.551931 178.18805,104.486174 C166.221693,89.3746182 161.628308,72.5923554 160.168662,58.1457247 C159.681718,53.3262729 162.218333,29.4248428 174.540596,15.9356024 C186.233538,3.1352823 207.541717,0.599835319 214.298668,0.402418686 C221.136004,0.202653458 240.039625,2.92171325 248.702744,15.9356024 C257.622936,29.335669 256.193536,53.1341955 255.325164,59.514256 C253.598461,72.2006103 247.638423,96.6993298 223.183522,120.842596 C221.003634,122.994705 216.767455,126.02785 210.474986,129.942032 C210.781218,129.894002 211.116234,129.836517 211.480034,129.769577 C212.128812,130.287976 212.4532,130.691496 212.4532,130.980138 C212.4532,131.198843 212.266966,131.483499 211.894498,131.834108 Z"
          id="balloon" fill="#FF804B">

          <animate dur="0.05s" id="balloonAnimation" attributeName="d" to="M211.781528,131.607771 C215.791776,135.284864 217.575581,137.973207 217.132943,139.672801 C216.764739,141.086595 210.389953,138.8976 208.006976,138.774639 C205.623999,138.651678 199.926305,140.159571 199.726573,138.774639 C199.479307,137.060105 201.318077,134.612405 205.242885,131.431539 C205.027276,131.174666 204.930031,130.948754 204.95115,130.753802 C204.985566,130.4361 205.352141,130.036175 206.050875,129.554026 C185.709268,118.719878 172.177049,110.288482 165.454221,104.259837 C148.602606,89.1482821 142.133975,72.3660193 140.078428,57.9193886 C139.392689,53.0999368 142.964876,29.1985067 160.317696,15.7092662 C176.784276,2.90894617 206.791507,0.373499183 216.30698,0.17608255 C225.935655,-0.0236826774 252.556668,2.69537712 264.756501,15.7092662 C277.318356,29.1093328 275.305404,52.9078593 274.08252,59.2879199 C271.650891,71.9742742 263.257671,96.4729936 228.81907,120.61626 C225.789971,122.739817 219.941426,125.72119 211.273436,129.560376 C211.30443,129.554735 211.33564,129.549023 211.367064,129.543241 C212.015842,130.061639 212.34023,130.46516 212.34023,130.753802 C212.34023,130.972506 212.153996,131.257163 211.781528,131.607771 Z"
            fill="freeze" begin="click" />
          <animate dur="0.05s" id="balloonAnimationHide" attributeName="display" to="none"
            fill="freeze" begin="balloonAnimation.end+0.01" />
        </path>
        <g id="boom" transform="translate(134.000000, 0.000000)" display="none">
          <animate dur="0.07s" id="boomAnimation" attributeName="display" values="block;none"
            fill="freeze" begin="balloonAnimationHide.end+0.001" />
          <g id="parts" transform="translate(18.000000, 14.000000)" fill="#FF804B">
            <path d="M0.48144927,91.4872991 C9.94673759,102.760784 17.2196678,110.080035 22.3002399,113.445053 C29.9210981,118.49258 37.5977084,123.101229 50.6075554,124.68735 C63.6174024,126.273471 74.6268352,124.052496 83.1616553,120.865091 C88.8515354,118.740155 97.9421891,112.566716 110.433617,102.344774 C84.9921042,107.459364 65.7586447,109.373548 52.7332382,108.087325 C39.7078317,106.801101 22.2905688,101.26776 0.48144927,91.4872991 Z"
              id="Path-11"></path>
            <path d="M15.8491404,15.761983 C27.2968129,8.51591846 36.43857,4.05213043 43.2744119,2.37061896 C48.3473765,1.12274804 55.7329475,0.525912621 65.4311249,0.580112714 L65.4311249,0.580113303 C72.6104574,0.620236356 79.6893492,2.27033775 86.1464336,5.40888609 C94.4187759,9.42976369 100.389334,12.880796 104.058107,15.761983 C109.039995,19.6743943 114.431153,26.1906576 120.231583,35.310773 C91.2601008,23.062317 71.0725055,15.8702432 59.6687966,13.7345516 C48.2650878,11.59886 33.6585357,12.2746704 15.8491404,15.761983 Z"
              id="Path-12"></path>
            <path d="M35.0828263,34.1165172 C34.2565055,36.2261369 33.843345,37.8045492 33.843345,38.8517542 C33.843345,39.8989592 34.903527,41.3756783 37.0238909,43.2819113 C33.2977605,44.2399714 30.4621973,44.0749697 28.5172012,42.7869062 C26.975417,41.7658678 23.8317633,39.3307491 23.0102698,35.699208 C22.277264,32.4588405 23.7404648,27.993451 24.3577068,27.0303972 C25.2303712,25.6688196 27.3764158,24.0720605 30.7958405,22.2401199 C29.4389332,26.9953734 29.0422291,30.1535416 29.6057284,31.7146246 C30.1692276,33.2757077 31.9949269,34.0763385 35.0828263,34.1165172 Z"
              id="Path-13"></path>
            <path d="M47.7714091,61.4308196 C46.9450883,63.5404393 46.5319279,65.1188516 46.5319279,66.1660566 C46.5319279,67.2132616 47.5921098,68.6899806 49.7124737,70.5962137 C45.9863433,71.5542738 43.1507801,71.3892721 41.205784,70.1012086 C39.6639998,69.0801701 36.5203461,66.6450514 35.6988526,63.0135104 C34.9658468,59.7731429 36.4290477,55.3077534 37.0462896,54.3446996 C37.918954,52.983122 40.0649986,51.3863629 43.4844233,49.5544223 C42.127516,54.3096757 41.730812,57.467844 42.2943112,59.028927 C42.8578104,60.59001 44.6835097,61.3906409 47.7714091,61.4308196 Z"
              id="Path-13" transform="translate(42.605232, 60.381806) rotate(70.000000) translate(-42.605232, -60.381806) "></path>
            <path d="M72.7714091,86.4308196 C71.9450883,88.5404393 71.5319279,90.1188516 71.5319279,91.1660566 C71.5319279,92.2132616 72.5921098,93.6899806 74.7124737,95.5962137 C70.9863433,96.5542738 68.1507801,96.3892721 66.205784,95.1012086 C64.6639998,94.0801701 61.5203461,91.6450514 60.6988526,88.0135104 C59.9658468,84.7731429 61.4290477,80.3077534 62.0462896,79.3446996 C62.918954,77.983122 65.0649986,76.3863629 68.4844233,74.5544223 C67.127516,79.3096757 66.730812,82.467844 67.2943112,84.028927 C67.8578104,85.59001 69.6835097,86.3906409 72.7714091,86.4308196 Z"
              id="Path-13" transform="translate(67.605232, 85.381806) scale(-1, -1) rotate(70.000000) translate(-67.605232, -85.381806) "></path>
            <path d="M91.4540862,78.6236492 C90.2789714,81.3988981 89.691414,83.4753325 89.691414,84.8529526 C89.691414,86.2305727 91.1991037,88.1732275 94.2144832,90.680917 C88.9155357,91.9412651 84.8830679,91.7242019 82.1170798,90.0297274 C79.9245014,88.6865299 75.4538967,85.4830804 74.2856469,80.7057121 C73.2432359,76.4429408 75.3240607,70.5686275 76.2018434,69.3017101 C77.4428635,67.5105262 80.4947636,65.4099562 85.3575435,63 C83.4278792,69.2556355 82.8637246,73.4102719 83.6650795,75.4639093 C84.4664344,77.5175467 87.0627699,78.5707933 91.4540862,78.6236492 Z"
              id="Path-13" transform="translate(84.107242, 77.243650) scale(-1, 1) translate(-84.107242, -77.243650) "></path>
            <path d="M69.6683505,57.9889816 C68.4498317,59.384802 68.0553937,60.890652 68.4850363,62.5065315 C68.914679,64.1224111 70.5277414,66.2396968 73.3242236,68.8583887 C68.0843676,70.9201502 63.7867216,71.2276033 60.4312857,69.7807482 C59.1585455,69.231946 55.0970539,67.3172178 52.9216086,64.2244734 C51.1160437,61.6575732 50.2688249,58.1177868 49.7435357,55.5317411 C49.4989836,54.3277892 49.547904,50.8354993 50.9030252,47.7976861 C51.3238123,46.8543957 53.0623619,43.0572461 57.3313895,40.934275 C58.9982914,40.1053311 62.3608136,39.4142493 67.4189562,38.8610296 C64.1333587,41.3789457 62.1272854,43.3446134 61.400736,44.7580327 C59.9464187,47.5872422 59.380419,50.7391358 59.8345549,52.1402365 C60.6290071,54.5912822 63.906939,56.5408639 69.6683505,57.9889816 Z"
              id="Path-13" transform="translate(61.476795, 54.768371) rotate(32.000000) translate(-61.476795, -54.768371) "></path>
          </g>
          <g id="shines" fill="#FCF275">
            <path d="M30.9805393,39.7124918 C24.0011584,29.8625591 17.0192551,15.9725336 18.8719559,14.6732343 C20.8819246,13.2636431 31.5607543,24.2108665 38.7058783,34.2947108 C39.9660024,36.0731119 37.5461449,38.8263613 36.282591,39.7124918 C35.019037,40.5986223 32.4064066,41.7248045 30.9805393,39.7124918 Z"
              id="Path-14"></path>
            <path d="M70.5142129,29.3511024 C63.5348321,19.5011697 56.5529288,5.61114418 58.4056296,4.31184493 C60.4155983,2.90225371 72.5066558,13.0418924 79.6517798,23.1257368 C80.911904,24.9041378 77.0798186,28.4649719 75.8162646,29.3511024 C74.5527107,30.2372329 71.9400802,31.3634151 70.5142129,29.3511024 Z"
              id="Path-14" transform="translate(69.002912, 17.328212) rotate(28.000000) translate(-69.002912, -17.328212) "></path>
            <path d="M107.908839,47.2526115 C118.19226,29.9636899 123.575138,21.4704611 124.057471,21.7729251 C124.539804,22.0753891 120.150153,31.1914547 110.888516,49.1211218 C109.972112,49.0121202 109.345319,48.8518986 109.008137,48.640457 C108.670955,48.4290155 108.304523,47.9664003 107.908839,47.2526115 Z"
              id="Path-15"></path>
            <path d="M23.4992557,82.4889594 C8.37453231,83.0204243 0.812170597,83.5803018 0.812170597,84.1685919 C0.812170597,84.7568821 8.37453231,85.364116 23.4992557,85.9902939 C24.0712262,85.198188 24.3572115,84.590954 24.3572115,84.1685919 C24.3572115,83.7462298 24.0712262,83.1863523 23.4992557,82.4889594 Z"
              id="Path-16"></path>
            <path d="M25.3500363,104.256055 C18.1382156,117.462512 14.8737559,124.288401 15.5566574,124.733724 C16.2395588,125.179046 20.8182766,119.210189 29.2928108,106.827152 C28.6942587,105.826076 28.1802607,105.185518 27.7508168,104.905476 C27.3213729,104.625434 26.5211127,104.40896 25.3500363,104.256055 Z"
              id="Path-17"></path>
            <path d="M90.0789421,120.94828 C96.1704568,142.584593 99.5956003,153.348443 100.354373,153.239828 C101.113145,153.131213 99.4005732,142.122217 95.2166574,120.212839 C93.9215099,119.791522 92.9565661,119.626294 92.3218258,119.717154 C91.6870855,119.808015 90.9394576,120.21839 90.0789421,120.94828 Z"
              id="Path-18"></path>
            <path d="M128.501156,102.163602 C140.743087,104.797902 147.08023,105.5235 147.512584,104.340394 C147.944937,103.157288 142.369836,100.346419 130.787281,95.9077843 C129.176725,96.995711 128.241135,97.8962628 127.980512,98.6094396 C127.719889,99.3226165 127.893437,100.507337 128.501156,102.163602 Z"
              id="Path-19"></path>
          </g>
        </g>
        <g id="boom-2" transform="translate(69.000000, 0.000000)" display="none">
          <animate dur="0.07s" id="booAnimation" attributeName="display" values="block;none"
            fill="freeze" begin="boomAnimation.end+0.001" />
          <g id="parts" transform="translate(36.000000, 32.000000)" fill="#FF804B">
            <path d="M18.0739265,43.3155995 C17.2476056,45.4252192 16.8344452,47.0036315 16.8344452,48.0508366 C16.8344452,49.0980416 17.8946271,50.5747606 20.014991,52.4809936 C16.2888606,53.4390537 13.4532974,53.274052 11.5083013,51.9859886 C9.96651715,50.9649501 6.82286346,48.5298314 6.00136996,44.8982903 C5.26836411,41.6579228 6.731565,37.1925334 7.34880693,36.2294796 C8.22147135,34.8679019 10.3675159,33.2711428 13.7869406,31.4392022 C12.4300333,36.1944557 12.0333293,39.3526239 12.5968285,40.913707 C13.1603277,42.47479 14.9860271,43.2754208 18.0739265,43.3155995 Z"
              id="Path-13" transform="translate(12.907749, 42.266586) rotate(52.000000) translate(-12.907749, -42.266586) "></path>
            <path d="M93.659889,197.154248 C92.8335682,199.263867 92.4204078,200.84228 92.4204078,201.889485 C92.4204078,202.93669 93.4805897,204.413409 95.6009536,206.319642 C91.8748232,207.277702 89.03926,207.1127 87.0942639,205.824637 C85.5524797,204.803598 82.408826,202.36848 81.5873325,198.736939 C80.8543267,195.496571 82.3175276,191.031182 82.9347695,190.068128 C83.8074339,188.70655 85.9534785,187.109791 89.3729032,185.27785 C88.0159959,190.033104 87.6192919,193.191272 88.1827911,194.752355 C88.7462903,196.313438 90.5719896,197.114069 93.659889,197.154248 Z"
              id="Path-13" transform="translate(88.493712, 196.105234) rotate(252.000000) translate(-88.493712, -196.105234) "></path>
            <path d="M187.234635,167.252085 C186.408314,169.361704 185.995154,170.940117 185.995154,171.987322 C185.995154,173.034527 187.055335,174.511246 189.175699,176.417479 C185.449569,177.375539 182.614006,177.210537 180.66901,175.922474 C179.127225,174.901435 175.983572,172.466317 175.162078,168.834776 C174.429072,165.594408 175.892273,161.129019 176.509515,160.165965 C177.38218,158.804387 179.528224,157.207628 182.947649,155.375687 C181.590742,160.130941 181.194038,163.289109 181.757537,164.850192 C182.321036,166.411275 184.146735,167.211906 187.234635,167.252085 Z"
              id="Path-13" transform="translate(182.068458, 166.203071) scale(-1, -1) rotate(102.000000) translate(-182.068458, -166.203071) "></path>
            <path d="M225.454086,92.6236492 C224.278971,95.3988981 223.691414,97.4753325 223.691414,98.8529526 C223.691414,100.230573 225.199104,102.173228 228.214483,104.680917 C222.915536,105.941265 218.883068,105.724202 216.11708,104.029727 C213.924501,102.68653 209.453897,99.4830804 208.285647,94.7057121 C207.243236,90.4429408 209.324061,84.5686275 210.201843,83.3017101 C211.442864,81.5105262 214.494764,79.4099562 219.357543,77 C217.427879,83.2556355 216.863725,87.4102719 217.665079,89.4639093 C218.466434,91.5175467 221.06277,92.5707933 225.454086,92.6236492 Z"
              id="Path-13" transform="translate(218.107242, 91.243650) scale(-1, 1) translate(-218.107242, -91.243650) "></path>
            <path d="M151.74372,20.9985283 C150.525201,22.3943488 150.130763,23.9001988 150.560405,25.5160783 C150.990048,27.1319578 152.603111,29.2492435 155.399593,31.8679354 C150.159737,33.9296969 145.862091,34.2371501 142.506655,32.7902949 C141.233915,32.2414927 137.172423,30.3267645 134.996978,27.2340201 C133.191413,24.66712 132.344194,21.1273335 131.818905,18.5412879 C131.574353,17.337336 131.623273,13.8450461 132.978394,10.8072328 C133.399181,9.86394248 135.137731,6.06679287 139.406759,3.94382177 C141.073661,3.11487781 144.436183,2.42379602 149.494325,1.87057639 C146.208728,4.38849244 144.202655,6.35416011 143.476105,7.76757942 C142.021788,10.5967889 141.455788,13.7486826 141.909924,15.1497833 C142.704376,17.600829 145.982308,19.5504106 151.74372,20.9985283 Z"
              id="Path-13" transform="translate(143.552165, 17.777918) rotate(117.000000) translate(-143.552165, -17.777918) "></path>
          </g>
          <g id="shines" fill="#FCF275">
            <path d="M64.1065651,41.9598097 C61.2348807,37.6695486 58.3621584,31.6195747 59.1244569,31.0536487 C59.9514638,30.4396836 64.3452961,35.2078834 67.2851759,39.6000276 C67.8036573,40.3746324 66.8080006,41.5738445 66.2881081,41.9598097 C65.7682155,42.3457749 64.6932419,42.8362977 64.1065651,41.9598097 Z"
              id="Path-14"></path>
            <path d="M120.025659,12.7428742 C116.679917,8.45402061 113.332965,2.40603143 114.221104,1.84029108 C115.184633,1.22652746 120.980787,5.64152475 124.405982,10.0322281 C125.010055,10.8065788 123.173048,12.3570357 122.567331,12.7428742 C121.961615,13.1287128 120.709185,13.6190746 120.025659,12.7428742 Z"
              id="Path-14" transform="translate(119.301179, 7.507872) rotate(28.000000) translate(-119.301179, -7.507872) "></path>
            <path d="M199,35.667866 C204.356665,28.4315348 207.160622,24.8766678 207.41187,25.003265 C207.663119,25.1298623 205.376537,28.9454195 200.552123,36.4499367 C200.074765,36.4043137 199.748267,36.3372525 199.572628,36.248753 C199.396989,36.1602534 199.206113,35.9666244 199,35.667866 Z"
              id="Path-15"></path>
            <path d="M14.0702638,129 C4.69008793,129.381149 1.44757499e-16,129.782674 0,130.204577 C0,130.626479 4.69008793,131.061967 14.0702638,131.511041 C14.4249932,130.942969 14.6023579,130.507481 14.6023579,130.204577 C14.6023579,129.901672 14.4249932,129.500147 14.0702638,129 Z"
              id="Path-16"></path>
            <path d="M61.0261688,191 C56.6283031,198.37594 54.6375915,202.188269 55.054034,202.436986 C55.4704766,202.685703 58.2626405,199.352036 63.4305259,192.435984 C63.0655208,191.876873 62.7520778,191.519114 62.4901972,191.362708 C62.2283165,191.206302 61.740307,191.085399 61.0261688,191 Z"
              id="Path-17"></path>
            <path d="M165,233.428439 C168.451453,240.81299 170.392139,244.48673 170.82206,244.449659 C171.25198,244.412588 170.281637,240.655179 167.91103,233.177431 C167.177199,233.033634 166.630462,232.977241 166.270818,233.008252 C165.911174,233.039263 165.487568,233.179325 165,233.428439 Z"
              id="Path-18"></path>
            <path d="M245.273398,164.242837 C250.519536,166.029479 253.235245,166.521596 253.420525,165.719187 C253.605805,164.916778 251.21666,163.010382 246.25309,160 C245.562905,160.737857 245.161969,161.348631 245.050282,161.832324 C244.938595,162.316017 245.012967,163.119521 245.273398,164.242837 Z"
              id="Path-19"></path>
          </g>
        </g>
        <g id="boom-3" transform="translate(80.000000, 8.000000)" fill="#9B9B9B" display="none">
          <animate dur="0.07s" attributeName="display" values="block;none" fill="freeze" begin="booAnimation.end+0.001"
          />
          <g id="parts">
            <path d="M14.1224949,44.9146045 C13.4615975,46.5200491 13.1311488,47.7212389 13.1311488,48.5181738 C13.1311488,49.3151087 13.97909,50.4389087 15.6749724,51.8895738 C12.6947863,52.6186684 10.4268823,52.4931003 8.87126036,51.5128693 C7.63813023,50.7358474 5.12381325,48.8826943 4.4667768,46.1190502 C3.88051342,43.6530936 5.05079208,40.2548814 5.54446665,39.5219865 C6.24242996,38.4858104 7.95885194,37.2706585 10.6937326,35.8765308 C9.60846829,39.4953329 9.29118153,41.8987349 9.74187229,43.0867369 C10.1925631,44.2747388 11.6527706,44.884028 14.1224949,44.9146045 Z"
              id="Path-13" transform="translate(9.990549, 44.116293) rotate(121.000000) translate(-9.990549, -44.116293) "></path>
            <path d="M102.524648,236.945674 C101.698327,239.055294 101.285166,240.633706 101.285166,241.680911 C101.285166,242.728116 102.345348,244.204835 104.465712,246.111068 C100.739582,247.069128 97.9040185,246.904126 95.9590224,245.616063 C94.4172382,244.595024 91.2735845,242.159906 90.452091,238.528365 C89.7190852,235.287997 91.182286,230.822608 91.799528,229.859554 C92.6721924,228.497976 94.818237,226.901217 98.2376617,225.069277 C96.8807544,229.82453 96.4840503,232.982698 97.0475496,234.543781 C97.6110488,236.104864 99.4367481,236.905495 102.524648,236.945674 Z"
              id="Path-13" transform="translate(97.358470, 235.896660) rotate(388.000000) translate(-97.358470, -235.896660) "></path>
            <path d="M209.522673,211.75272 C208.942078,213.528949 208.651781,214.857919 208.651781,215.73963 C208.651781,216.621342 209.396693,217.86469 210.886517,219.469674 C208.268438,220.276328 206.276096,220.137402 204.90949,219.052896 C203.826191,218.193216 201.617376,216.142928 201.040173,213.085292 C200.525143,210.357012 201.553227,206.597304 201.986918,205.786445 C202.600075,204.640042 204.107943,203.295625 206.510522,201.753192 C205.557123,205.756956 205.278388,208.416028 205.674318,209.730407 C206.070248,211.044787 207.353033,211.718891 209.522673,211.75272 Z"
              id="Path-13" transform="translate(205.892779, 210.869485) scale(-1, -1) rotate(133.000000) translate(-205.892779, -210.869485) "></path>
            <path d="M265.727151,123.176292 C264.565604,124.952521 263.98483,126.281491 263.98483,127.163203 C263.98483,128.044914 265.475113,129.288262 268.455678,130.893246 C263.21791,131.6999 259.231998,131.560975 256.497945,130.476468 C254.330681,129.616788 249.911691,127.5665 248.756929,124.508865 C247.726553,121.780584 249.783354,118.020876 250.651002,117.210017 C251.877694,116.063615 254.894359,114.719197 259.700996,113.176765 C257.793611,117.180528 257.235969,119.8396 258.028072,121.153979 C258.820175,122.468359 261.386535,123.142463 265.727151,123.176292 Z"
              id="Path-13" transform="translate(258.465129, 122.293058) scale(-1, 1) rotate(-37.000000) translate(-258.465129, -122.293058) "></path>
            <path d="M178.886592,20.2918569 C177.847053,21.5416935 177.510551,22.8900521 177.877087,24.3369325 C178.243622,25.783813 179.619753,27.6796595 182.005479,30.0244718 C177.535269,31.8706011 173.868875,32.1458988 171.006296,30.850365 C169.920499,30.3589601 166.455572,28.6444864 164.599663,25.875201 C163.059305,23.5767637 162.336528,20.4071908 161.888395,18.0916104 C161.679764,17.0135755 161.721498,13.8865316 162.877575,11.1664324 C163.236556,10.3217974 164.719742,6.92177799 168.361722,5.0208408 C169.783784,4.27859311 172.652409,3.65978907 176.967596,3.1644287 C174.164597,5.41900496 172.453182,7.17909052 171.83335,8.44468538 C170.592647,10.977998 170.109783,13.8002465 170.497214,15.0548111 C171.174975,17.2495107 173.971434,18.9951926 178.886592,20.2918569 Z"
              id="Path-13" transform="translate(171.898238, 17.408078) rotate(220.000000) translate(-171.898238, -17.408078) "></path>
          </g>
        </g>
      </g>
    </svg>
</div>
</div>
              
            
!

CSS

              
                body {
  margin: 0;
  padding: 0;
  background-image: radial-gradient(circle, #36cdf4, #889bf9);
  display: flex;
  align-items: center;
  height: 100vh;
}

#balloon {
  cursor: crosshair;
}

.eye {
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  height: 34px;
  width: 34px;
  background: #fff;
  bottom: 277px;
  left: 57px;
  overflow: hidden;
}

.eye.right {
  bottom: 280px;
  left: 94px;
}

.eye:after {
  /*pupil*/
  position: absolute;
  bottom: 10px;
  right: 7px;
  width: 25px;
  height: 25px;
  background: #000;
  border-radius: 50%;
  content: "";
}

#lil-monster {
  position: relative;
  width: 384px;
  height: 605px;
  margin: 0 auto;
}

              
            
!

JS

              
                function onMouseMove(event, end) {
  const eyes = document.getElementsByClassName("eye");
  for (let i in eyes) {
    const eye = eyes[i];
    if (eye.style) {
      if (end) {
        eye.style.transform = "rotate(190deg)";
      } else {
        const { x, y, width, height } = eye.getBoundingClientRect();
        const left = x + width / 2;
        const top = y + height / 2;
        const rad = Math.atan2(event.pageX - left, event.pageY - top);
        const degree = rad * (180 / Math.PI) * -1 + 180;
        eye.style.transform = "rotate(" + degree + "deg)";
      }
    }
  }
}
document.getElementById("balloon").onclick = e => {
  document.onmousemove = null;
  onMouseMove(e, "end");
};
document.onmousemove = onMouseMove;

              
            
!
999px

Console