.credits
  .with
    .with__text built with
    a(href="https://github.com/legomushroom/mojs", title="mo · js").with__logo#js-with-logo
  .by
    .by__text by
    a(href="https://twitter.com/legomushroom", title="LegoMushroom").by__logo#js-by-logo

.snowball.snowball--with#js-with-snowball
.snowball.snowball--by#js-by-snowball

.motion
  .motion__controls.controls#js-controls
    .controls__repeat#js-repeat(title="restart")
      svg.icon.icon--repeat
        path(d="M5.03868442,0.355114828 C5.18894493,0.105224017 5.48268728,-0.0462129771 5.76249569,0.0127011539 C6.07958679,0.0633119511 6.33566986,0.367372131 6.34885061,0.703064059 C6.3544995,0.854105656 6.31684022,1.00672884 6.2403919,1.13483742 C6.01933195,1.49425316 5.79074015,1.84852874 5.56591427,2.2055721 C6.05774441,2.20636289 6.54957455,2.19805956 7.04102809,2.21506162 C9.1710367,2.28741925 11.2053908,3.45779393 12.5065187,5.21216977 C13.1512455,6.0749257 13.6238694,7.08476926 13.8483187,8.15748092 C14.1955372,9.7932377 13.9338053,11.5464273 13.1945537,13.0252116 C12.5558524,14.3055066 11.5661666,15.3968019 10.3610698,16.1006083 C9.29907824,16.7312663 8.06874971,17.0539101 6.8482126,16.9926236 C5.29175475,16.9309417 3.75789246,16.3097732 2.57426144,15.2441787 C1.61093718,14.3830044 0.892398202,13.2347719 0.482288694,11.9805731 C0.139212695,10.9481919 -0.00690529302,9.84938406 0.000249969294,8.75848414 C0.0119243447,8.50226698 0.16030189,8.2606795 0.377595908,8.14403743 C0.630666239,7.99932218 0.966586975,8.04360663 1.17634914,8.25118998 C1.34242654,8.40341777 1.41812169,8.6378881 1.41096642,8.86524129 C1.41849828,9.8181477 1.55105893,10.7777759 1.87266914,11.6721635 C2.24135345,12.7199652 2.88570365,13.6661499 3.73868623,14.3387199 C4.60974527,15.0318506 5.68190484,15.4351554 6.77138768,15.5063268 C7.76257981,15.5818476 8.76958883,15.339074 9.63801172,14.8345476 C11.0483516,14.0247748 12.0930199,12.5566663 12.4473937,10.9118154 C12.6654409,9.91818311 12.6323007,8.86168272 12.3193521,7.89414662 C11.6670935,5.84322314 9.9144308,4.23633033 7.89852979,3.80851094 C7.1287742,3.6376995 6.33830601,3.69859061 5.55762923,3.68910109 C5.78207851,4.03467794 6.0008789,4.38460415 6.22231544,4.73255338 C6.33679964,4.91048197 6.38123759,5.14099833 6.32437208,5.34937247 C6.25846835,5.62733646 6.0219681,5.8483633 5.75232769,5.88908918 C5.49360847,5.93732759 5.21831916,5.81277759 5.06881184,5.58740138 C4.61313461,4.87805943 4.16724879,4.16160033 3.71307793,3.45107219 C3.52591133,3.19287804 3.48712227,2.8208096 3.65809538,2.54245022 C4.1145258,1.81057064 4.58112422,1.08620361 5.03868442,0.355114828 L5.03868442,0.355114828 Z")
    .controls__pin#js-pin(title="pin controls")
      svg.icon.icon-pin
        path(d="M10.7772521,0.114644447 C11.0728744,-0.0974931962 11.4818173,0.00537894361 11.7190841,0.254797672 C13.5173892,1.88144866 15.3254311,3.49943828 17.123683,5.12507318 C17.415243,5.36043878 17.4760583,5.8208441 17.232408,6.1107499 C16.8238047,6.61715298 16.360762,7.07648376 15.9372918,7.57143937 C15.7124273,7.81145418 15.4865816,8.12997453 15.1220085,8.13481661 C14.8446178,8.15037293 14.6281468,7.94775192 14.40797,7.81053374 C13.7739209,8.52641555 13.092382,9.21116301 12.5040032,9.96235008 C13.0865761,12.0949108 12.5631712,14.5136636 11.0560428,16.1484857 C10.7885298,16.4691897 10.2707739,16.4484366 9.99238571,16.1532854 C8.74451102,15.0347397 7.50332427,13.9076925 6.25352353,12.7912856 C4.5643298,14.6271997 2.91909329,16.5046221 1.23203863,18.3424618 C0.964849616,18.6499034 0.446769701,18.6424127 0.184002968,18.3342162 C-0.0900583395,18.0632914 -0.0410623576,17.59815 0.219269954,17.3348799 C1.85658474,15.481307 3.54625322,13.6738968 5.16763156,11.8079136 C3.92178943,10.6892615 2.67600055,9.57162543 1.43604308,8.44858935 C1.11324916,8.20059625 1.03340432,7.68820623 1.32744257,7.38750864 C2.79644063,5.7251372 5.15174112,4.93229392 7.33255721,5.32133121 C7.99302501,4.62342366 8.62450902,3.89748742 9.26888063,3.18412128 C9.00910047,2.91346697 8.727899,2.52574468 8.95044304,2.14422651 C9.2094711,1.73939972 9.57684565,1.41855658 9.88475257,1.05192355 C10.1822702,0.739835879 10.4355643,0.381159401 10.7772521,0.114644447 L10.7772521,0.114644447 L10.7772521,0.114644447 Z M10.6161531,2.38806786 C10.7842687,2.60137414 11.0284987,2.80865367 11.0155923,3.10684439 C11.0262732,3.40787448 10.8005566,3.63163179 10.617901,3.84090575 C9.7887392,4.74226115 8.98529936,5.66774064 8.15180619,6.56422861 C7.91869588,6.84135541 7.53556347,6.84207572 7.21315952,6.75708373 C5.70953501,6.43648257 4.08116759,6.8468459 2.90399458,7.83572395 C5.40984448,10.1099846 7.92430838,12.3736049 10.4484558,14.6275478 C11.3112404,13.3566129 11.5451543,11.6947798 11.0721818,10.2340334 C10.9537266,9.91827383 10.9079776,9.53145749 11.169486,9.27118234 C11.9906863,8.33458322 12.8395879,7.42098557 13.6650131,6.48722169 C13.8365384,6.29890873 14.0302666,6.0870167 14.3034325,6.06862515 C14.5995512,6.0215208 14.8313684,6.24473413 15.0612243,6.3916339 C15.2703564,6.18199124 15.4677237,5.96175742 15.6544489,5.73291137 C14.1788222,4.39093938 12.6965075,3.05746897 11.2084147,1.73041468 C11.0002989,1.94000408 10.8018088,2.15825897 10.6161531,2.38806786 L10.6161531,2.38806786 L10.6161531,2.38806786 Z")
    .controls__sound#js-sound(title="toggle sound")
      svg.icon.icon-sound
        //- path(d="M7.24619029,1.15739428 C7.6119926,0.521794984 8.23491683,-0.0461309033 9.01556017,0.00296549356 C9.78427518,-0.0262269586 10.3846681,0.53771814 10.7478197,1.16137507 C12.5967118,1.57803098 14.3369235,2.62099768 15.4104738,4.20667861 C16.0771353,5.18595268 16.4508898,6.36559314 16.4548659,7.55186824 C16.469445,9.1481646 16.4508898,10.743134 16.4628181,12.3394304 C16.4575167,12.7401631 16.5396896,13.1369151 16.7133132,13.4991669 C17.2447868,13.6371676 17.8319261,13.913169 17.9551855,14.5076334 C18.1858,15.2838873 17.4899804,16.0919874 16.7013849,16.0574873 C15.0420207,16.0853528 13.3826566,16.0468718 11.7232925,16.0734104 C11.3164037,17.1429157 10.2971936,17.9762275 9.12954205,17.9934776 C7.87971748,18.0823819 6.68688385,17.2530509 6.27734431,16.0787181 C4.62328168,16.0415641 2.9665683,16.0866797 1.31250567,16.0601411 C0.933449647,16.0574873 0.549092144,15.9141789 0.302573194,15.6196005 C-0.0870857922,15.1976368 -0.0990141285,14.5009988 0.25883596,14.0564774 C0.493426574,13.7194372 0.917545198,13.629206 1.28069677,13.496513 C1.45166959,13.1369151 1.5325172,12.7441439 1.52854109,12.347392 C1.54312017,10.7073069 1.51793813,9.06722189 1.54046943,7.42846378 C1.56830221,5.92505249 2.20978163,4.4614491 3.24622152,3.38132837 C4.30519271,2.24016887 5.74321992,1.5116845 7.24619029,1.15739428 L7.24619029,1.15739428 Z M4.95727509,3.90281172 C3.88770094,4.74541204 3.14151723,6.0418223 3.11103371,7.4205022 C3.08452629,9.05926031 3.11766056,10.6993454 3.10175611,12.3381035 C3.09380389,12.7481247 3.02753535,13.1528383 2.95861608,13.5548979 C6.98376689,13.5548979 11.0075923,13.5575518 15.0327432,13.5548979 C14.7955018,12.4097577 14.9187613,11.234098 14.8896031,10.0743615 C14.8776748,9.10304899 14.9174359,8.12908263 14.8644211,7.15909706 C14.7650183,5.94097565 14.1089598,4.81175852 13.1878271,4.02887003 C10.9293955,2.06634109 7.27667382,2.02520627 4.95727509,3.90281172 L4.95727509,3.90281172 Z")
        path(d="M8.73794928,0.348150316 C9.11206309,0.27529234 9.51838182,0.296610044 9.86109583,0.47605654 C10.2191072,0.665217432 10.5062677,0.969062175 10.7198937,1.31068513 C10.7491465,1.3573682 10.7802779,1.41268629 10.8403937,1.42132131 C11.9978922,1.69278473 13.1035944,2.21790185 14.0149936,2.98938685 C14.7361155,3.59491758 15.3281492,4.36073586 15.7033365,5.22882515 C15.9494358,5.79576814 16.1067031,6.40345762 16.1542054,7.02059166 C16.1778223,7.33469049 16.1759437,7.65013854 16.1759437,7.9650469 C16.1821163,9.17907665 16.1746018,10.3931064 16.1791642,11.6068663 C16.1716497,12.0920465 16.1839949,12.6039412 16.4147969,13.0421684 C16.4695452,13.0872324 16.5454952,13.0920896 16.6104417,13.117455 C16.9434943,13.2264721 17.2784254,13.4040297 17.4705815,13.7097634 C17.6031584,13.9437184 17.6587119,14.223547 17.6146985,14.4898834 C17.5159367,15.0257943 17.019981,15.4640215 16.4746443,15.4731962 C14.8845265,15.4972124 13.2941402,15.4702279 11.7040223,15.4904662 C11.3795578,16.3329203 10.6525317,17.0293886 9.76850669,17.2366291 C9.2373939,17.354551 8.66817196,17.3340429 8.15852911,17.1330088 C7.44572691,16.8615454 6.861476,16.2759832 6.58397695,15.5625147 C6.56867961,15.5352604 6.56545912,15.4807518 6.52037223,15.492625 C5.12294712,15.4729264 3.72552201,15.4907361 2.3280969,15.4812915 C2.13218364,15.4767042 1.93600201,15.4845297 1.7406255,15.4694184 C1.41401394,15.440545 1.09384337,15.2883528 0.887463517,15.0282229 C0.66122396,14.7581087 0.578564668,14.3781678 0.660418838,14.036275 C0.727780793,13.7456527 0.906786468,13.4755385 1.16630444,13.3249653 C1.37617316,13.2019163 1.6120742,13.1371536 1.83965562,13.0559305 C1.98350426,12.746419 2.06267469,12.4072247 2.07179941,12.0656017 C2.08468138,10.5010441 2.0667003,8.93648657 2.08468138,7.37192901 C2.09648985,6.29255159 2.44376623,5.22612671 3.03741024,4.32970376 C3.49445171,3.64456895 4.08702222,3.05307012 4.76171528,2.58489017 C5.57945185,2.01848687 6.51205263,1.63422851 7.47524808,1.40189252 C7.75838299,0.922648946 8.18134093,0.479834361 8.73794928,0.348150316 L8.73794928,0.348150316 Z M5.89264468,3.58736194 C5.14575894,4.04609734 4.4949512,4.68104111 4.0778975,5.46008176 C3.7663149,6.03565977 3.57952637,6.68382591 3.56932815,7.34089691 C3.54597958,8.8800891 3.57362214,10.4195511 3.55778805,11.9587433 C3.55215219,12.3659385 3.47781251,12.7677367 3.41984365,13.1698048 C3.35623894,13.4005217 3.23439699,13.6112702 3.09859958,13.8063676 C7.12662983,13.8063676 11.1543917,13.8060978 15.182422,13.8066375 C15.0345477,13.6269211 14.9113639,13.4215696 14.8448071,13.1973289 C14.6166889,12.1152531 14.7119618,11.0034943 14.6963961,9.90657703 C14.6859295,9.01663035 14.7124985,8.12614398 14.6786833,7.23646714 C14.6472836,6.34840937 14.2919559,5.48949479 13.7436672,4.79896309 C13.1089619,3.99995396 12.2337932,3.40926467 11.2794541,3.06656234 C9.5258963,2.43782499 7.48786167,2.60809678 5.89264468,3.58736194 L5.89264468,3.58736194 Z")


    .controls__timeline
      input(type="range", min="0", max="100000", value="0")#js-slider
  .motion_scene
    .svg-canvas#js-svg-canvas
      //- ball 7
      svg.svg-canvas__svg
        path#js-curve-5(d='M89,234.470827 C89,234.470827 209.009766,-25.0815972 240.529297,234.470827', fill="none")
        path#js-curve-5-mask(d='M89,234.470827 C89,234.470827 209.009766,-25.0815972 240.529297,234.470827', fill="none")
        path(d="M208.222656,234.470827 C109,-17 89,234.470827 89,234.470827", fill="none")#js-curve-4
        path(d="M208.222656,234.470827 C109,-17 89,234.470827 89,234.470827", fill="none")#js-curve-4-mask
        path(d="M357.447266,234.470827 C211.126953,-18.9175695 208,234.470827 208,234.470827", fill="none")#js-curve-3
        path(d="M357.447266,234.470827 C211.126953,-18.9175695 208,234.470827 208,234.470827", fill="none")#js-curve-3-mask
        path(d="M155.219461,234.470827 C256.749214,45.2260249 359.634766,130.155713 357.466797,234.470827", fill="none")#js-curve-2
        path(d="M155.219461,234.470827 C256.749214,45.2260249 359.634766,130.155713 357.466797,234.470827", fill="none")#js-curve-2-mask
        path(d="M287,235.670827 C187.791726,11.4579344 151.764383,181.797782 155.219461,234.670827", fill="none")#js-curve-1
        path(d="M287,235.670827 C187.791726,11.4579344 151.764383,181.797782 155.219461,234.670827", fill="none")#js-curve-1-mask

        g#js-i(transform='translate(233.000000, 183.000000)')
          g#js-i-line-3
            path(d='M8.31578947,58.8761456 L8.31578947,-150')
            path(d='M8.31578947,58.8761456 L8.31578947,-150')
            path(d='M8.31578947,58.8761456 L8.31578947,-150')
          g#js-i-line-2
            path(d='M0,29.3193277 L16.2531981,29.3193277')
            path(d='M0,29.3193277 L16.2531981,29.3193277')
            path(d='M0,29.3193277 L16.2531981,29.3193277')
          g#js-i-line-1
            path(d='M0,24.3193277 L16.2531981,24.3193277')
            path(d='M0,24.3193277 L16.2531981,24.3193277')
            path(d='M0,24.3193277 L16.2531981,24.3193277')
        g#js-circles-left(transform='translate(37.000000, 205.000000)', fill="none")
          g#js-circles-left-bottom
            path(d='M1.97368421,3.95798319 C3.0637199,3.95798319 3.94736842,3.07195848 3.94736842,1.9789916 C3.94736842,0.886024718 3.0637199,0 1.97368421,0 C0.88364852,0 0,0.886024718 0,1.9789916 C0,3.07195848 0.88364852,3.95798319 1.97368421,3.95798319 Z')
            path(d='M1.97368421,3.95798319 C3.0637199,3.95798319 3.94736842,3.07195848 3.94736842,1.9789916 C3.94736842,0.886024718 3.0637199,0 1.97368421,0 C0.88364852,0 0,0.886024718 0,1.9789916 C0,3.07195848 0.88364852,3.95798319 1.97368421,3.95798319 Z')
            path(d='M1.97368421,3.95798319 C3.0637199,3.95798319 3.94736842,3.07195848 3.94736842,1.9789916 C3.94736842,0.886024718 3.0637199,0 1.97368421,0 C0.88364852,0 0,0.886024718 0,1.9789916 C0,3.07195848 0.88364852,3.95798319 1.97368421,3.95798319 Z')
          g#js-circles-left-top
            path(d='M1.97368421,18.4705882 C3.0637199,18.4705882 3.94736842,17.5845635 3.94736842,16.4915966 C3.94736842,15.3986298 3.0637199,14.512605 1.97368421,14.512605 C0.88364852,14.512605 0,15.3986298 0,16.4915966 C0,17.5845635 0.88364852,18.4705882 1.97368421,18.4705882 Z')
            path(d='M1.97368421,18.4705882 C3.0637199,18.4705882 3.94736842,17.5845635 3.94736842,16.4915966 C3.94736842,15.3986298 3.0637199,14.512605 1.97368421,14.512605 C0.88364852,14.512605 0,15.3986298 0,16.4915966 C0,17.5845635 0.88364852,18.4705882 1.97368421,18.4705882 Z')
            path(d='M1.97368421,18.4705882 C3.0637199,18.4705882 3.94736842,17.5845635 3.94736842,16.4915966 C3.94736842,15.3986298 3.0637199,14.512605 1.97368421,14.512605 C0.88364852,14.512605 0,15.3986298 0,16.4915966 C0,17.5845635 0.88364852,18.4705882 1.97368421,18.4705882 Z')

        g#js-for-the-web(transform='translate(266.000000, 268.000000)', fill="none")
          g
            path(d='M47.199933,21.4064652 C46.4228812,23.469298 45.4936894,25.4168303 44.7763457,27.5255372 C46.2750047,27.107479 47.7776158,25.5871552 49.3345977,26.2929792 C50.1265058,26.6744015 49.9060309,27.9369898 49.4803943,28.6313376 C49.3293477,27.8845039 49.1159715,26.9390807 48.4479168,26.9513569 C47.1276641,26.9148082 45.8914539,27.7480011 44.6154117,28.1145425 C43.8184838,30.5981526 43.1750107,33.4619597 43.8978497,36.1489187 C44.278142,36.7715267 44.4340916,37.6268092 45.3365512,38.0168502 C46.1764259,37.9339006 46.9409776,37.4312694 47.689973,36.9203425 C47.4601232,37.6946919 47.2673297,38.6291371 46.671576,39.0009088 C46.1071895,39.5199802 45.4549329,39.1056435 44.8724061,38.8865209 C44.3136704,38.4603106 43.9934172,37.6491928 43.6035084,36.8449458 C42.607711,34.2747905 42.9414196,31.3098606 43.4675468,28.6342483 C42.4702566,29.0621887 36.4817031,32.5516439 35.9950349,32.5581432 C36.1264719,32.1480461 36.0427842,31.3858802 36.4601774,31.2686103 C38.8316723,30.167707 41.2217454,29.1352855 43.5980738,28.0552642 C44.1052349,25.9693162 44.6411919,23.8663862 45.5026742,22.0151491 C45.8403575,21.1646812 46.6156949,21.2035143 47.199933,21.4064652 L47.199933,21.4064652 Z', transform='translate(42.929768, 30.268044) rotate(12.000000) translate(-42.929768, -30.268044) ')
          g
            path(d='M53.7681512,18.8002489 C53.9704152,16.831705 53.2126,15.0644131 52.8528913,13.2221109 C52.6861253,12.5781425 52.9249824,11.3595686 53.5818458,11.6080788 C54.1676398,11.790958 54.6267406,12.4592718 54.8488783,13.175622 C55.1105442,14.5714202 55.2777546,18.1510485 55.1142919,19.4410886 C55.0815754,24.4803492 54.9148389,29.5156804 54.7420154,34.5497816 C55.6002612,31.6950341 56.4567983,28.833326 57.5415997,26.1120154 C57.9913576,25.7171917 57.9837084,25.6860327 58.7026512,25.7396848 C59.2371996,26.467899 59.9302753,27.1702645 59.9992337,28.2641587 C60.1586075,30.1387456 60.0019936,32.0222457 60.0003301,33.9006741 C59.9867356,34.776117 60.2787697,35.6240149 60.1842293,36.4996384 C59.4157772,36.4799619 58.4368832,35.8504907 58.4657946,34.6721824 C58.4360445,32.0530999 58.9285445,29.4287482 58.5767197,26.8173488 C57.659958,27.6310069 57.1828586,28.9866662 56.7408909,30.2733484 C55.85306,32.9368869 55.0667334,35.6722068 54.5280521,38.497264 C54.1519564,39.0861057 53.8515377,38.1687059 53.5400299,37.9602172 C53.8883376,36.4098392 53.8000909,34.7778561 53.8448504,33.1810207 C53.9202249,29.2234683 53.922755,25.2639248 53.875418,21.3070333 C53.8744948,21.2298683 53.7677105,19.5634133 53.7681512,18.8002489 L53.7681512,18.8002489 Z', transform='translate(56.502340, 25.133375) rotate(9.000000) translate(-56.502340, -25.133375) ')
          g
            path(d='M69.4390564,31.5364717 C68.2160619,33.1077918 66.6764252,34.4192873 64.9741099,34.3615486 C63.9312239,34.2914372 62.8069986,33.6315652 62.2724832,32.2953244 C61.9209812,31.0910581 62.4613066,29.8290529 62.9812971,28.9093564 C63.8905543,27.416396 65.2617024,26.1007763 66.7170949,26.5296931 C67.3445695,26.6163013 67.7251212,27.3834024 68.1027679,28.0020324 C67.1470312,30.5796573 64.9102005,32.1179838 62.9115777,31.2147841 C63.3705637,33.3923616 65.3401368,32.864464 66.4934118,32.2747034 C67.9255645,31.3302617 69.5843051,30.1961067 70.1478703,27.9360452 C70.6097956,27.2245063 70.4042753,30.4054019 69.4390564,31.5364717 Z M63.2630797,30.2662181 C64.5470786,30.4188135 65.8165526,29.4331297 66.6096108,28.0391502 C66.4934118,27.457638 66.237774,27.2184344 65.8456024,27.3256636 C64.7155671,27.6679722 63.9021742,28.9877162 63.2630797,30.2662181 L63.2630797,30.2662181 Z', transform='translate(66.272103, 30.405402) rotate(12.000000) translate(-66.272103, -30.405402) ')
          g
            path(d='M18.0863969,35.6861072 C18.3603547,35.7251564 18.6210553,35.8103934 18.901844,35.9441553 C19.7502705,36.7107135 20.5177837,37.8986719 20.4090787,39.2750609 C20.1600492,41.5790787 18.6356444,43.0754156 17.1452206,43.9420549 C15.8556503,44.779465 13.8840235,43.4352652 13.77351,41.3676186 C13.8939841,39.8756513 14.3468929,37.8954513 17.160773,36.5089196 C16.5896022,36.9137244 15.238535,36.8163549 13.8766538,37.793744 C14.0165442,37.3851446 13.9142432,36.588107 14.3738037,36.5148734 C16.3269545,35.8663544 17.2661043,35.5691849 18.0863969,35.6861072 L18.0863969,35.6861072 Z M17.7681027,36.8640119 C17.7844742,37.1021798 17.9413073,37.3853125 17.9603892,37.6226013 C16.3972757,37.4271448 14.942588,38.8050722 14.735787,40.8359478 C14.6240521,41.5986362 15.2702986,42.1114609 15.7741606,42.0278484 C17.199115,41.9328387 18.3591139,40.6305445 19.0227076,39.0941193 C19.4057668,38.2793424 19.3602681,37.1046487 18.7538224,36.3553922 C18.3040894,36.2590987 18.0605271,35.9289763 17.1772698,36.5256808 L17.7681027,36.8640119 L17.7681027,36.8640119 Z', transform='translate(17.096451, 39.927876) rotate(7.000000) translate(-17.096451, -39.927876) ')
          g
            path(d='M27.7755497,33.8332077 C26.8120881,35.8464873 26.0157904,38.1381626 26.2319459,40.4716958 C27.3502599,40.5827662 27.9873763,39.4378609 28.530534,38.5211229 C29.2341239,37.2573795 28.8336856,39.7061979 27.1583061,41.5675811 C26.2917819,41.5788007 25.4992556,40.6842607 25.4633725,39.7043166 C25.3898958,37.2586053 26.4352558,35.0022429 26.5506722,32.5831208 C27.073228,32.837235 27.5049772,33.2557356 27.7755497,33.8332077 L27.7755497,33.8332077 Z', transform='translate(27.160586, 37.075403) rotate(7.000000) translate(-27.160586, -37.075403) ')
          g
            path(d='M26.9620686,33.9753287 C26.8541887,34.249968 26.7315871,34.581411 26.4594254,34.6838837 C26.088401,34.7190985 25.6945611,34.5220686 25.4963679,34.155942 C25.1161008,33.5146336 24.8150355,32.8192549 24.4693419,32.1556954 C23.9984099,33.7825905 23.9004203,35.5076611 23.7323891,37.1971168 C23.1608998,37.4644791 22.5425989,36.6828106 22.5658477,36.0414699 C22.5537485,33.8602057 23.0800936,33.7320397 23.2187592,35.8217969 C23.5802229,34.4085684 23.8320527,32.9457654 24.3671098,31.599203 C24.5073158,31.0965049 25.2434211,31.1667455 25.3709726,31.6535368 C25.7051167,32.4028267 25.9938939,33.1810222 26.4070664,33.8810278 C26.5675253,33.6114057 26.7134756,33.3228405 26.7553091,32.9955242 C26.8984679,32.0504159 27.2784914,33.0244691 26.9620686,33.9753287 L26.9620686,33.9753287 Z', transform='translate(24.824880, 34.252422) rotate(7.000000) translate(-24.824880, -34.252422) ')
          g
            path(d='M11.1824053,26.7441775 C12.1122972,26.6490729 13.0892669,27.102763 13.5754554,27.9675721 C14.4031196,29.3758925 13.5204064,29.8261764 13.0956427,28.5078455 C12.7532486,27.4661623 11.6095058,26.9704195 10.6347615,27.1443324 C8.99892925,27.4595638 7.90754182,28.8673805 7.17049522,30.4460472 C6.64286268,31.4839207 7.24098017,37.3982534 7.22603662,38.5654724 C6.83739521,38.3196335 6.27472547,38.0870427 6.2841367,37.5122318 C4.88666801,33.1769491 5.95897672,30.4291719 6.62201294,29.5645051 C7.78627513,28.1420302 9.32950315,26.8421056 11.1824053,26.7441775 L11.1824053,26.7441775 L11.1824053,26.7441775 Z', transform='translate(9.758934, 32.648599) rotate(7.000000) translate(-9.758934, -32.648599) ')
          g
            path(d='M6.36392842,36.8075855 C7.851272,36.2651623 9.35519784,35.7492452 10.9026864,35.4267732 C11.955235,35.2474761 13.175595,35.2412681 14.0457683,35.9982489 C14.5300699,36.4273209 14.9916242,37.2201271 14.4904002,37.8221362 C14.0530727,36.7711371 12.8793088,36.6603778 11.938853,36.7333969 C9.97677383,36.8918457 8.07082223,37.4770553 6.22952153,38.1770711 C6.11030883,39.7978321 8.02937307,47.3283424 8.50094059,48.8662673 C7.94152765,49.0794912 7.49234654,48.5345976 7.22840489,48.0851821 C6.67758441,46.9891905 5.09403049,39.773726 5.14966092,38.5717983 C-0.226075731,40.8097716 -0.645551209,39.8507305 4.82519137,37.446559 C4.99038396,37.3739635 5.94263744,37.0547289 6.36392842,36.8075855 L6.36392842,36.8075855 Z', transform='translate(7.811112, 42.120489) rotate(7.000000) translate(-7.811112, -42.120489) ')
          g
            path(d='M125.68713,7.5434158 C126.656671,6.37239206 128.337933,6.02474439 129.750485,6.49315389 C129.027868,7.36776224 127.97481,7.85080953 127.204987,8.67784505 C125.262275,10.664926 123.315932,12.6629852 121.631038,14.8879303 C123.406713,13.6986093 125.443837,12.5495423 127.658892,12.8605955 C128.780944,12.9411033 130.004671,13.7059282 130.066402,14.9391626 C130.26612,16.6737415 128.991556,18.1155645 127.673417,19.0340862 C125.618137,20.4246769 123.181577,21.3029447 120.701442,21.4200471 C120.098656,21.3724743 119.285259,21.4822577 118.947554,20.8528325 C118.341137,19.8684406 117.418803,19.0267673 117.179142,17.8557436 C117.462378,17.1458105 118.199519,16.8750112 118.845879,16.6115309 C118.508174,17.0945782 118.148682,17.5666471 117.800083,18.0423755 C119.731901,19.1877831 122.113993,18.8913677 124.201954,18.4119799 C126.035729,17.8777003 128.076484,16.9006274 128.780944,14.9757571 C129.140437,13.8340089 127.749673,13.3729183 126.878176,13.5558908 C124.292735,13.7864361 121.580201,15.3563398 120.541667,17.8228086 C119.583021,17.2702317 119.524921,16.0406568 120.084131,15.1587295 C121.565676,12.3629104 123.591906,9.89278218 125.68713,7.5434158 L125.68713,7.5434158 Z')
          g
            path(d='M104.191997,16.737058 C105.245056,15.5770126 106.799226,14.7755933 108.382445,14.8341444 C109.115955,15.0903059 109.751421,15.6245855 110.198064,16.2613296 C110.027395,17.2676782 109.025174,17.7763416 108.215408,18.2044971 C106.857325,18.9254086 105.324943,19.1669323 103.814349,19.3096508 C104.035854,19.9024816 104.155685,20.6416903 104.791151,20.9417651 C106.040297,21.6041254 107.525473,21.1174187 108.760094,20.6490092 C111.062298,19.6609579 113.288246,18.2959834 114.871466,16.305243 C114.613648,15.8331741 114.359461,15.3574457 114.112537,14.8780578 C114.958616,15.1415382 116.298542,15.7929201 115.724807,16.916371 C114.631804,18.9620031 112.580155,20.2794048 110.62655,21.4028557 C108.858137,22.2957613 106.806488,23.2325803 104.798414,22.6580468 C103.316869,22.1567023 102.873858,20.4001667 102.881121,18.9912787 C102.706821,18.8522196 102.361854,18.5667826 102.187554,18.4277235 C103.287819,18.5192098 103.563793,17.3847805 104.191997,16.737058 L104.191997,16.737058 Z M104.555121,18.2630483 C105.978566,17.6665581 107.532735,17.0920246 108.495013,15.8038985 C106.940844,16.1369084 105.615442,17.1030029 104.555121,18.2630483 L104.555121,18.2630483 Z')
          g
            path(d='M164.195331,16.9217102 C166.228824,17.1266393 168.491085,17.7194701 169.743861,19.4833246 C170.437428,20.4786948 170.916751,22.1034902 169.703918,22.9158879 C169.391631,20.8482991 167.270989,20.0724959 165.495314,19.7358266 C161.787821,19.0441907 155.139025,19.5125999 152.056105,19.6150648 C148.973185,19.7175296 129.778465,24.529705 119.189777,28.7161149 C118.529514,28.9931112 117.829921,29.2081782 117.200208,29.5549362 C117.06455,29.6296377 114.447784,30.6473256 114.317346,30.7019307 C108.570343,33.1077917 102.931208,35.7704097 97.1045927,37.9781807 C95.4378548,38.5161198 93.6077113,39.3834092 91.8647175,38.6881139 C90.9460144,38.3038717 89.9328993,37.6341925 89.7767561,36.5656334 C89.8094372,35.3763124 90.5247909,34.3480072 91.2292509,33.4477827 C93.190119,31.080119 95.7065664,29.2540539 98.3392134,27.7097663 C97.1191177,25.9678685 96.2803019,23.991766 95.7537725,21.9314961 C94.889538,24.2186518 93.909104,26.4984887 92.4493466,28.4672723 C91.9845483,29.0235086 91.4434939,29.7005067 90.6627779,29.7334417 C89.667819,29.5358315 88.7672721,28.781985 88.4912981,27.7829553 C87.9211939,26.0081225 87.5943825,24.1674195 87.1295842,22.3669705 C84.8164861,25.7885555 83.4148285,29.7188039 81.8533965,33.5136527 C80.1793962,33.7039441 79.0791313,31.4241073 79.5657171,29.9530087 C80.9818996,24.8810121 82.7866245,19.9297774 84.3988938,14.916332 C84.3625814,14.4003497 84.1810196,13.8587512 84.355319,13.3537472 C85.6516706,12.8048298 87.0642219,14.4259658 86.3416057,15.6628596 C84.6240305,20.390868 82.4452882,24.9798173 81.4212793,29.9347114 C83.3058914,26.9266442 84.9363169,23.7209667 87.2312588,20.9983365 C87.9320876,19.9370963 89.8130684,20.6543483 89.8239622,21.8802638 C90.2016108,23.8710042 90.4412725,25.8946795 91.0585828,27.8305282 C91.6577369,27.3255242 92.2314724,26.7656285 92.5582838,26.0373981 C93.5605052,23.951512 94.2685965,21.7302264 94.9185879,19.5126002 C95.3724926,17.9683126 94.5155206,16.252031 95.2744492,14.769954 C96.037009,13.9904914 96.9992868,14.7443379 97.6638032,15.2493419 C97.598441,19.1905686 97.9760896,23.3440435 100.042264,26.7912446 C103.502833,25.140833 107.57345,23.7575612 111.346305,25.1627897 C113.096561,25.7263449 114.240401,27.2303785 115.311616,28.6392664 C116.804055,27.8305276 117.766881,27.4316727 117.963322,27.3514935 C129.236932,22.7500787 140.690623,18.8530044 152.807537,17.3315683 C154.552932,17.1083419 161.177773,16.7240999 164.195331,16.9217102 Z M107.653337,25.8471067 C107.533506,26.9559198 107.181276,28.1562191 106.157267,28.7527094 C104.029362,30.0518138 101.226047,29.7627173 99.0945107,28.6136503 C96.1931522,30.2823591 93.3135811,32.2072294 91.3018757,34.9481568 C90.8152899,35.6544305 90.1652985,36.9023027 91.2038323,37.4402417 C93.0012947,37.996478 94.8169133,37.0962535 96.4981761,36.5253794 C102.551448,34.1284402 108.434053,31.3070049 114.44375,28.7929633 C112.929524,26.582656 110.224253,25.7263449 107.653337,25.8471067 L107.653337,25.8471067 Z M101.291409,27.5853451 C101.258728,27.6914691 101.196997,27.9000577 101.167947,28.0061817 C102.188325,28.7197743 103.506464,29.0893787 104.72656,28.7344121 C105.855874,28.3282133 106.124586,27.0108115 106.498603,26.0154414 C104.715666,26.3447918 102.93636,26.8058824 101.291409,27.5853451 L101.291409,27.5853451 Z')
          g
            polygon(transform='translate(147.312328, 6.398198) rotate(37.000000) translate(-147.312328, -6.398198) ', points='147.312328 8.65051431 144.475229 10.3981979 145.445401 7.50377066 143.312328 5.45392591 146.126489 5.45392588 147.312328 2.39819787 148.423048 5.45392588 151.312328 5.45392591 149.126032 7.50377066 149.784464 10.3981977 ')
      //- ball 6
      svg.svg-canvas__svg
        g#js-m(transform='translate(83.000000, 184.000000)', fill="none")
          g#js-m-line-2()
            path(d='M0.0649285567,58.3490973 L0.0649285567,0.607639314 L43.9350714,37.9133678 L43.9350714,47.0178902 L0.0649285567,9.46407539')
            path(d='M0.0649285567,58.3490973 L0.0649285567,0.607639314 L43.9350714,37.9133678 L43.9350714,47.0178902 L0.0649285567,9.46407539')
            path(d='M0.0649285567,58.3490973 L0.0649285567,0.607639314 L43.9350714,37.9133678 L43.9350714,47.0178902 L0.0649285567,9.46407539')
          g(transform='translate(-8.000000, 0.000000)')
            g#js-m-line-1
              path(d='M0.0649285567,19.5005026 L21.883712,0.607639314 L21.9123021,58.4931435')
              path(d='M0.0649285567,19.5005026 L21.883712,0.607639314 L21.9123021,58.4931435')
              path(d='M0.0649285567,19.5005026 L21.883712,0.607639314 L21.9123021,58.4931435')

        g#js-circles-right(transform='translate(403.000000, 205.000000)', fill="none")
          g#js-circles-right-bottom
            path(d='M1.97368421,3.95798319 C3.0637199,3.95798319 3.94736842,3.07195848 3.94736842,1.9789916 C3.94736842,0.886024718 3.0637199,0 1.97368421,0 C0.88364852,0 0,0.886024718 0,1.9789916 C0,3.07195848 0.88364852,3.95798319 1.97368421,3.95798319 Z')
            path(d='M1.97368421,3.95798319 C3.0637199,3.95798319 3.94736842,3.07195848 3.94736842,1.9789916 C3.94736842,0.886024718 3.0637199,0 1.97368421,0 C0.88364852,0 0,0.886024718 0,1.9789916 C0,3.07195848 0.88364852,3.95798319 1.97368421,3.95798319 Z')
            path(d='M1.97368421,3.95798319 C3.0637199,3.95798319 3.94736842,3.07195848 3.94736842,1.9789916 C3.94736842,0.886024718 3.0637199,0 1.97368421,0 C0.88364852,0 0,0.886024718 0,1.9789916 C0,3.07195848 0.88364852,3.95798319 1.97368421,3.95798319 Z')
          g#js-circles-right-top
            path(d='M1.97368421,18.4705882 C3.0637199,18.4705882 3.94736842,17.5845635 3.94736842,16.4915966 C3.94736842,15.3986298 3.0637199,14.512605 1.97368421,14.512605 C0.88364852,14.512605 0,15.3986298 0,16.4915966 C0,17.5845635 0.88364852,18.4705882 1.97368421,18.4705882 Z')
            path(d='M1.97368421,18.4705882 C3.0637199,18.4705882 3.94736842,17.5845635 3.94736842,16.4915966 C3.94736842,15.3986298 3.0637199,14.512605 1.97368421,14.512605 C0.88364852,14.512605 0,15.3986298 0,16.4915966 C0,17.5845635 0.88364852,18.4705882 1.97368421,18.4705882 Z')
            path(d='M1.97368421,18.4705882 C3.0637199,18.4705882 3.94736842,17.5845635 3.94736842,16.4915966 C3.94736842,15.3986298 3.0637199,14.512605 1.97368421,14.512605 C0.88364852,14.512605 0,15.3986298 0,16.4915966 C0,17.5845635 0.88364852,18.4705882 1.97368421,18.4705882 Z')
      //- ball 5
      svg.svg-canvas__svg
        g#js-t(sketch:type='MSLayerGroup', transform='translate(191.000000, 183.000000)')
          g#js-t-line-1
            path(d='M17.3157895,60.0150887 L17.3157895,2')
            path(d='M17.3157895,60.0150887 L17.3157895,2')
            path(d='M17.3157895,60.0150887 L17.3157895,2')
          g#js-t-line-2
            path(d='M0,1.31932773 L32.1182043,1.31932773')
            path(d='M0,1.31932773 L32.1182043,1.31932773')
            path(d='M0,1.31932773 L32.1182043,1.31932773')
          g#js-t-line-3
            path(d='M0,7.31932773 L32.1182043,7.31932773')
            path(d='M0,7.31932773 L32.1182043,7.31932773')
            path(d='M0,7.31932773 L32.1182043,7.31932773')
      //- ball 4
      svg.svg-canvas__svg
        g#n(transform='translate(313.000000, 182.000000)', stroke1='#F6A623', stroke-width='2', fill="none")
          g#js-n-1
            path(d='M44.3702971,0 L44.3702971,57.6742056 L0.589583337,1.04713547 L8.953906,1.04713547 L44.3702971,47.0406689')
            path(d='M44.3702971,0 L44.3702971,57.6742056 L0.589583337,1.04713547 L8.953906,1.04713547 L44.3702971,47.0406689')
            path(d='M44.3702971,0 L44.3702971,57.6742056 L0.589583337,1.04713547 L8.953906,1.04713547 L44.3702971,47.0406689')
          g#js-n-2
            path(d='M44,0.00170809031 L44,56.7160707 L68.8373606,33.1138772')
            path(d='M44,0.00170809031 L44,56.7160707 L68.8373606,33.1138772')
            path(d='M44,0.00170809031 L44,56.7160707 L68.8373606,33.1138772')
      //- ball 3
      svg.svg-canvas__svg
        g(transform='translate(142.000000, 185.000000)', stroke1='#FEFEFE', stroke-width1='2')
          g#js-o1-line-1
            path(d='M14.4681748,56.4154786 L14.4681748,10.3704254')
            path(d='M14.4681748,56.4154786 L14.4681748,10.3704254')
            path(d='M14.4681748,56.4154786 L14.4681748,10.3704254')
          g#js-o1-line-2
            path(d='M0.152385328,1.68975318 L27.8476147,1.68975318')
            
View Compiled
PX = (1/16)rem
gs = 10*PX
nw()
  top arguments
  left arguments
rect()
  width  arguments
  height arguments
easy-click()
  &:after
    content ''
    position absolute
    rect 200%
    z-index 1
    nw -50%
mainColor     = lighten(#595959, 20)
normalOpacity = .5
hoverOpacity  = 1
body
  background #333
  font-size 16px
.snowball
  rect 500*PX
  border-radius 50%
  background white
  position absolute
  bottom -208*PX
  z-index 0
  transform scale(.1)
  transition transform 3s cubic-bezier(0.19, 1, 0.22, 1)
  opacity 0
  &.is-shown
    transform scale(12)
    opacity 1
    z-index 2
  &--by
    right  -208*PX
  &--with
    right  -155*PX
.credits
  position absolute
  right  25*PX
  bottom 55*PX
  z-index 1
  color white
  font-family Open Sans, sans-serif
  font-size 8*PX
  letter-spacing .8*PX
  padding-left 9.5*gs
  .with
    position absolute
    left 7*PX
.by
  padding-right 2.6*gs
  user-select none
  touch-action none
  &__text
    position relative
    top 1.6*gs
  &__logo
    cursor pointer
    width 18*PX
    height 24*PX
    position absolute
    right 0
    top 7*PX
    background-image url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMTggMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJtdXNocm9vbS0yIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIj4gICAgICAgICAgICA8cGF0aCBkPSJNMCw2IEwxOCw2IEwxOCw5IEwwLDkgTDAsNiBaIiBpZD0iRmlsbC0yIiBmaWxsPSIjRTQ2QTc1IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTMsMyBMMTUsMyBMMTUsNiBMMyw2IEwzLDMgWiIgaWQ9IkZpbGwtMyIgZmlsbD0iI0U0NkE3NSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik02LDAgTDEyLDAgTDEyLDMgTDYsMyBMNiwwIFoiIGlkPSJGaWxsLTQiIGZpbGw9IiNFNDZBNzUiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNiwxNSBMMTIsMTUgTDEyLDE4IEw2LDE4IEw2LDE1IFoiIGlkPSJGaWxsLTUiIGZpbGw9IiNGMUFDOEMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNiwxMiBMMTIsMTIgTDEyLDE1IEw2LDE1IEw2LDEyIFoiIGlkPSJGaWxsLTYiIGZpbGw9IiNCNDY0NzkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNiw5IEwxMiw5IEwxMiwxMiBMNiwxMiBMNiw5IFoiIGlkPSJGaWxsLTciIGZpbGw9IiM2NTU0NkUiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNiwxOCBMMTIsMTggTDEyLDI0IEw2LDI0IEw2LDE4IFoiIGlkPSJGaWxsLTgiIGZpbGw9IiNGMUFDOEMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMTAuNSw2IEwxMy41LDYgTDEzLjUsOSBMMTAuNSw5IEwxMC41LDYgWiIgaWQ9IkZpbGwtOSIgZmlsbD0iI0YxQUM4QyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik02LDMgTDksMyBMOSw2IEw2LDYgTDYsMyBaIiBpZD0iRmlsbC0xMCIgZmlsbD0iI0YxQUM4QyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+")
    
.with
  padding-right 4*gs
  user-select none
  touch-action none
  &__text
    position relative
    top 1.6*gs
  &__logo
    cursor pointer
    width  36*PX
    height 38*PX
    position absolute
    right -1*PX
    top 4*PX
    background-image url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMzZweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMzYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlVudGl0bGVkIDg8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxwYXRoIGQ9Ik0xOCwyIEMyMy41MjI4NDc1LDIgMjgsNi40NzcxNTI1IDI4LDEyIEMyOCwxNy41MjI4NDc1IDIzLjUyMjg0NzUsMjIgMTgsMjIgQzEyLjQ3NzE1MjUsMjIgOCwxNy41MjI4NDc1IDgsMTIgQzgsNi40NzcxNTI1IDEyLjQ3NzE1MjUsMiAxOCwyIFogTTE3Ljk5OTQwMzQsNy4wODY3OTgzMSBDMjAuNzEzMjE5Myw3LjA4Njc5ODMxIDIyLjkxMzIwMTcsOS4yODY3ODA3MiAyMi45MTMyMDE3LDEyLjAwMDU5NjYgQzIyLjkxMzIwMTcsMTQuNzE0NDEyNCAyMC43MTMyMTkzLDE2LjkxNDM5NDggMTcuOTk5NDAzNCwxNi45MTQzOTQ4IEMxNS4yODU1ODc2LDE2LjkxNDM5NDggMTMuMDg1NjA1MiwxNC43MTQ0MTI0IDEzLjA4NTYwNTIsMTIuMDAwNTk2NiBDMTMuMDg1NjA1Miw5LjI4Njc4MDcyIDE1LjI4NTU4NzYsNy4wODY3OTgzMSAxNy45OTk0MDM0LDcuMDg2Nzk4MzEgWiIgaWQ9Ik92YWwtMjIiIGZpbGw9IiNGMzQyNDYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDxwYXRoIGQ9Ik0yLjUzMTI1LDI5Ljc1IEwzLjYwMTU2MjUsMjkuNzUgTDMuNjAxNTYyNSwzMC4yMzgyODEyIEMzLjc4Mzg1NTA4LDMwLjAzNzc1OTQgMy45ODYzMjcwMSwyOS44ODgwMjEzIDQuMjA4OTg0MzgsMjkuNzg5MDYyNSBDNC40MzE2NDE3NCwyOS42OTAxMDM3IDQuNjc0NDc3ODUsMjkuNjQwNjI1IDQuOTM3NSwyOS42NDA2MjUgQzUuMjAzMTI2MzMsMjkuNjQwNjI1IDUuNDQyNzA3MjcsMjkuNzA1NzI4NSA1LjY1NjI1LDI5LjgzNTkzNzUgQzUuODY5NzkyNzMsMjkuOTY2MTQ2NSA2LjA0MTY2NjAyLDMwLjE1NjI0ODcgNi4xNzE4NzUsMzAuNDA2MjUgQzYuMzQxMTQ2NjgsMzAuMTU2MjQ4NyA2LjU0ODgyNjg5LDI5Ljk2NjE0NjUgNi43OTQ5MjE4OCwyOS44MzU5Mzc1IEM3LjA0MTAxNjg2LDI5LjcwNTcyODUgNy4zMDk4OTQzNywyOS42NDA2MjUgNy42MDE1NjI1LDI5LjY0MDYyNSBDNy45MDM2NDczNCwyOS42NDA2MjUgOC4xNjkyNjk2OSwyOS43MTA5MzY4IDguMzk4NDM3NSwyOS44NTE1NjI1IEM4LjYyNzYwNTMxLDI5Ljk5MjE4ODIgOC43OTIzMTcyMSwzMC4xNzU3ODAxIDguODkyNTc4MTIsMzAuNDAyMzQzOCBDOC45OTI4MzkwNCwzMC42Mjg5MDc0IDkuMDQyOTY4NzUsMzAuOTk3MzkzMyA5LjA0Mjk2ODc1LDMxLjUwNzgxMjUgTDkuMDQyOTY4NzUsMzQgTDcuOTY4NzUsMzQgTDcuOTY4NzUsMzEuODQzNzUgQzcuOTY4NzUsMzEuMzYxOTc2OCA3LjkwODg1NDc3LDMxLjAzNTgwODEgNy43ODkwNjI1LDMwLjg2NTIzNDQgQzcuNjY5MjcwMjMsMzAuNjk0NjYwNiA3LjQ4OTU4NDUzLDMwLjYwOTM3NSA3LjI1LDMwLjYwOTM3NSBDNy4wNjc3MDc0MiwzMC42MDkzNzUgNi45MDQyOTc2LDMwLjY2MTQ1NzggNi43NTk3NjU2MiwzMC43NjU2MjUgQzYuNjE1MjMzNjUsMzAuODY5NzkyMiA2LjUwNzgxMjg1LDMxLjAxMzY3MSA2LjQzNzUsMzEuMTk3MjY1NiBDNi4zNjcxODcxNSwzMS4zODA4NjAzIDYuMzMyMDMxMjUsMzEuNjc1Nzc5MiA2LjMzMjAzMTI1LDMyLjA4MjAzMTIgTDYuMzMyMDMxMjUsMzQgTDUuMjU3ODEyNSwzNCBMNS4yNTc4MTI1LDMxLjk0MTQwNjIgQzUuMjU3ODEyNSwzMS41NjExOTYgNS4yMjk4MTc5OSwzMS4yODU4MDgxIDUuMTczODI4MTIsMzEuMTE1MjM0NCBDNS4xMTc4MzgyNiwzMC45NDQ2NjA2IDUuMDMzODU0NzMsMzAuODE3NzA4OCA0LjkyMTg3NSwzMC43MzQzNzUgQzQuODA5ODk1MjcsMzAuNjUxMDQxMiA0LjY3NDQ3OTk2LDMwLjYwOTM3NSA0LjUxNTYyNSwzMC42MDkzNzUgQzQuMzM4NTQwNzgsMzAuNjA5Mzc1IDQuMTc3NzM1MSwzMC42NjIxMDg4IDQuMDMzMjAzMTIsMzAuNzY3NTc4MSBDMy44ODg2NzExNSwzMC44NzMwNDc0IDMuNzgwNTk5MzIsMzEuMDIwODMyNCAzLjcwODk4NDM4LDMxLjIxMDkzNzUgQzMuNjM3MzY5NDMsMzEuNDAxMDQyNiAzLjYwMTU2MjUsMzEuNzAwNTE4OCAzLjYwMTU2MjUsMzIuMTA5Mzc1IEwzLjYwMTU2MjUsMzQgTDIuNTMxMjUsMzQgTDIuNTMxMjUsMjkuNzUgWiBNMTIuNTU0Njg3NSwyOS42NDA2MjUgQzEyLjk1NTczMTIsMjkuNjQwNjI1IDEzLjMzMjY4MDUsMjkuNzQwODg0NCAxMy42ODU1NDY5LDI5Ljk0MTQwNjIgQzE0LjAzODQxMzIsMzAuMTQxOTI4MSAxNC4zMTM4MDExLDMwLjQxNDA2MDggMTQuNTExNzE4OCwzMC43NTc4MTI1IEMxNC43MDk2MzY0LDMxLjEwMTU2NDIgMTQuODA4NTkzOCwzMS40NzI2NTQzIDE0LjgwODU5MzgsMzEuODcxMDkzOCBDMTQuODA4NTkzOCwzMi4yNzIxMzc0IDE0LjcwODk4NTQsMzIuNjQ3MTMzNyAxNC41MDk3NjU2LDMyLjk5NjA5MzggQzE0LjMxMDU0NTksMzMuMzQ1MDUzOCAxNC4wMzkwNjQyLDMzLjYxNzgzNzYgMTMuNjk1MzEyNSwzMy44MTQ0NTMxIEMxMy4zNTE1NjA4LDM0LjAxMTA2ODcgMTIuOTcyNjU4MywzNC4xMDkzNzUgMTIuNTU4NTkzOCwzNC4xMDkzNzUgQzExLjk0OTIxNTcsMzQuMTA5Mzc1IDExLjQyOTAzODYsMzMuODkyNTgwMyAxMC45OTgwNDY5LDMzLjQ1ODk4NDQgQzEwLjU2NzA1NTEsMzMuMDI1Mzg4NSAxMC4zNTE1NjI1LDMyLjQ5ODcwMSAxMC4zNTE1NjI1LDMxLjg3ODkwNjIgQzEwLjM1MTU2MjUsMzEuMjE0ODQwNCAxMC41OTUwNDk2LDMwLjY2MTQ2MDUgMTEuMDgyMDMxMiwzMC4yMTg3NSBDMTEuNTA5MTE2NywyOS44MzMzMzE0IDExLjk5OTk5NzIsMjkuNjQwNjI1IDEyLjU1NDY4NzUsMjkuNjQwNjI1IEwxMi41NTQ2ODc1LDI5LjY0MDYyNSBaIE0xMi41NzAzMTI1LDMwLjY0NDUzMTIgQzEyLjIzOTU4MTcsMzAuNjQ0NTMxMiAxMS45NjQxOTM4LDMwLjc1OTc2NDUgMTEuNzQ0MTQwNiwzMC45OTAyMzQ0IEMxMS41MjQwODc0LDMxLjIyMDcwNDMgMTEuNDE0MDYyNSwzMS41MTU2MjMyIDExLjQxNDA2MjUsMzEuODc1IEMxMS40MTQwNjI1LDMyLjI0NDc5MzUgMTEuNTIyNzg1NCwzMi41NDQyNjk3IDExLjc0MDIzNDQsMzIuNzczNDM3NSBDMTEuOTU3NjgzNCwzMy4wMDI2MDUzIDEyLjIzMzA3MTMsMzMuMTE3MTg3NSAxMi41NjY0MDYyLDMzLjExNzE4NzUgQzEyLjg5OTc0MTIsMzMuMTE3MTg3NSAxMy4xNzcwODIyLDMzLjAwMTMwMzIgMTMuMzk4NDM3NSwzMi43Njk1MzEyIEMxMy42MTk3OTI4LDMyLjUzNzc1OTMgMTMuNzMwNDY4OCwzMi4yMzk1ODUyIDEzLjczMDQ2ODgsMzEuODc1IEMxMy43MzA0Njg4LDMxLjUxMDQxNDggMTMuNjIxNzQ1OSwzMS4yMTQxOTM4IDEzLjQwNDI5NjksMzAuOTg2MzI4MSBDMTMuMTg2ODQ3OSwzMC43NTg0NjI0IDEyLjkwODg1NTksMzAuNjQ0NTMxMiAxMi41NzAzMTI1LDMwLjY0NDUzMTIgTDEyLjU3MDMxMjUsMzAuNjQ0NTMxMiBaIE0yMS4wOTc2NTYyLDMwLjQ5NjA5MzggQzIxLjI1MzkwNywzMC40OTYwOTM4IDIxLjM4NjcxODIsMzAuNTUwMTI5NyAyMS40OTYwOTM4LDMwLjY1ODIwMzEgQzIxLjYwNTQ2OTMsMzAuNzY2Mjc2NiAyMS42NjAxNTYyLDMwLjg5ODQzNjcgMjEuNjYwMTU2MiwzMS4wNTQ2ODc1IEMyMS42NjAxNTYyLDMxLjIwODMzNDEgMjEuNjA1NDY5MywzMS4zMzk4NDMyIDIxLjQ5NjA5MzgsMzEuNDQ5MjE4OCBDMjEuMzg2NzE4MiwzMS41NTg1OTQzIDIxLjI1MzkwNywzMS42MTMyODEyIDIxLjA5NzY1NjIsMzEuNjEzMjgxMiBDMjAuOTQ0MDA5NiwzMS42MTMyODEyIDIwLjgxMjUwMDUsMzEuNTU4NTk0MyAyMC43MDMxMjUsMzEuNDQ5MjE4OCBDMjAuNTkzNzQ5NSwzMS4zMzk4NDMyIDIwLjUzOTA2MjUsMzEuMjA4MzM0MSAyMC41MzkwNjI1LDMxLjA1NDY4NzUgQzIwLjUzOTA2MjUsMzAuODk4NDM2NyAyMC41OTM3NDk1LDMwLjc2NjI3NjYgMjAuNzAzMTI1LDMwLjY1ODIwMzEgQzIwLjgxMjUwMDUsMzAuNTUwMTI5NyAyMC45NDQwMDk2LDMwLjQ5NjA5MzggMjEuMDk3NjU2MiwzMC40OTYwOTM4IEwyMS4wOTc2NTYyLDMwLjQ5NjA5MzggWiBNMjguMDU4NTkzOCwyOCBDMjguMjQ4Njk4OSwyOCAyOC40MTA4MDY2LDI4LjA2NzcwNzcgMjguNTQ0OTIxOSwyOC4yMDMxMjUgQzI4LjY3OTAzNzEsMjguMzM4NTQyMyAyOC43NDYwOTM4LDI4LjUwMjYwMzIgMjguNzQ2MDkzOCwyOC42OTUzMTI1IEMyOC43NDYwOTM4LDI4Ljg4NTQxNzYgMjguNjc5Njg4MiwyOS4wNDgxNzY0IDI4LjU0Njg3NSwyOS4xODM1OTM4IEMyOC40MTQwNjE4LDI5LjMxOTAxMTEgMjguMjU1MjA5MywyOS4zODY3MTg4IDI4LjA3MDMxMjUsMjkuMzg2NzE4OCBDMjcuODgwMjA3NCwyOS4zODY3MTg4IDI3LjcxODA5OTYsMjkuMzE3NzA5IDI3LjU4Mzk4NDQsMjkuMTc5Njg3NSBDMjcuNDQ5ODY5MSwyOS4wNDE2NjYgMjcuMzgyODEyNSwyOC44NzUwMDEgMjcuMzgyODEyNSwyOC42Nzk2ODc1IEMyNy4zODI4MTI1LDI4LjQ5MjE4NjYgMjcuNDQ4NTY3MSwyOC4zMzIwMzE5IDI3LjU4MDA3ODEsMjguMTk5MjE4OCBDMjcuNzExNTg5MiwyOC4wNjY0MDU2IDI3Ljg3MTA5MjgsMjggMjguMDU4NTkzOCwyOCBMMjguMDU4NTkzOCwyOCBaIE0yNy41MjczNDM4LDI5Ljc1IEwyOC41OTM3NSwyOS43NSBMMjguNTkzNzUsMzQuMTQwNjI1IEMyOC41OTM3NSwzNC41NDQyNzI5IDI4LjU1NDAzNjksMzQuODQ1NzAyMSAyOC40NzQ2MDk0LDM1LjA0NDkyMTkgQzI4LjM5NTE4MTksMzUuMjQ0MTQxNiAyOC4yNjk1MzIxLDM1LjM5NzEzNDkgMjguMDk3NjU2MiwzNS41MDM5MDYyIEMyNy45MjU3ODA0LDM1LjYxMDY3NzYgMjcuNzE4NzUxMiwzNS42NjQwNjI1IDI3LjQ3NjU2MjUsMzUuNjY0MDYyNSBDMjcuMjYzMDE5OCwzNS42NjQwNjI1IDI2Ljk5NzM5NzQsMzUuNjEwNjc3NiAyNi42Nzk2ODc1LDM1LjUwMzkwNjIgTDI2LjY3OTY4NzUsMzQuNjY0MDYyNSBDMjYuODQ2MzU1LDM0Ljc0NDc5MjEgMjYuOTkzNDg4OSwzNC43ODUxNTYyIDI3LjEyMTA5MzgsMzQuNzg1MTU2MiBDMjcuMjU2NTExMSwzNC43ODUxNTYyIDI3LjM1ODA3MjYsMzQuNzQ0NzkyMSAyNy40MjU3ODEyLDM0LjY2NDA2MjUgQzI3LjQ5MzQ4OTksMzQuNTgzMzMyOSAyNy41MjczNDM4LDM0LjQzNDg5NjkgMjcuNTI3MzQzOCwzNC4yMTg3NSBMMjcuNTI3MzQzOCwyOS43NSBaIE0zMi43MzgyODEyLDMwLjM0Mzc1IEwzMi4wNzgxMjUsMzEuMDAzOTA2MiBDMzEuODA5ODk0NSwzMC43MzgyNzk5IDMxLjU2NjQwNzMsMzAuNjA1NDY4OCAzMS4zNDc2NTYyLDMwLjYwNTQ2ODggQzMxLjIyNzg2NCwzMC42MDU0Njg4IDMxLjEzNDExNDksMzAuNjMwODU5MSAzMS4wNjY0MDYyLDMwLjY4MTY0MDYgQzMwLjk5ODY5NzYsMzAuNzMyNDIyMSAzMC45NjQ4NDM4LDMwLjc5NTU3MjUgMzAuOTY0ODQzOCwzMC44NzEwOTM4IEMzMC45NjQ4NDM4LDMwLjkyODM4NTcgMzAuOTg2MzI3OSwzMC45ODExMTk2IDMxLjAyOTI5NjksMzEuMDI5Mjk2OSBDMzEuMDcyMjY1OCwzMS4wNzc0NzQyIDMxLjE3ODM4NDYsMzEuMTQzMjI4NyAzMS4zNDc2NTYyLDMxLjIyNjU2MjUgTDMxLjczODI4MTIsMzEuNDIxODc1IEMzMi4xNDk3NDE2LDMxLjYyNTAwMSAzMi40MzIyOTA5LDMxLjgzMjAzMDIgMzIuNTg1OTM3NSwzMi4wNDI5Njg4IEMzMi43Mzk1ODQxLDMyLjI1MzkwNzMgMzIuODE2NDA2MiwzMi41MDEzMDA3IDMyLjgxNjQwNjIsMzIuNzg1MTU2MiBDMzIuODE2NDA2MiwzMy4xNjI3NjIzIDMyLjY3NzczNTgsMzMuNDc3ODYzMyAzMi40MDAzOTA2LDMzLjczMDQ2ODggQzMyLjEyMzA0NTUsMzMuOTgzMDc0MiAzMS43NTEzMDQ0LDM0LjEwOTM3NSAzMS4yODUxNTYyLDM0LjEwOTM3NSBDMzAuNjY1MzYxNSwzNC4xMDkzNzUgMzAuMTcwNTc0OCwzMy44NjcxODk5IDI5LjgwMDc4MTIsMzMuMzgyODEyNSBMMzAuNDU3MDMxMiwzMi42Njc5Njg4IEMzMC41ODIwMzE5LDMyLjgxMzgwMjggMzAuNzI4NTE0OCwzMi45MzE2NDAyIDMwLjg5NjQ4NDQsMzMuMDIxNDg0NCBDMzEuMDY0NDU0LDMzLjExMTMyODYgMzEuMjEzNTQxLDMzLjE1NjI1IDMxLjM0Mzc1LDMzLjE1NjI1IEMzMS40ODQzNzU3LDMzLjE1NjI1IDMxLjU5NzY1NTgsMzMuMTIyMzk2MiAzMS42ODM1OTM4LDMzLjA1NDY4NzUgQzMxLjc2OTUzMTcsMzIuOTg2OTc4OCAzMS44MTI1LDMyLjkwODg1NDYgMzEuODEyNSwzMi44MjAzMTI1IEMzMS44MTI1LDMyLjY1NjI0OTIgMzEuNjU3NTUzNiwzMi40OTYwOTQ1IDMxLjM0NzY1NjIsMzIuMzM5ODQzOCBMMzAuOTg4MjgxMiwzMi4xNjAxNTYyIEMzMC4zMDA3Nzc4LDMxLjgxMzgwMDQgMjkuOTU3MDMxMiwzMS4zODAyMTA5IDI5Ljk1NzAzMTIsMzAuODU5Mzc1IEMyOS45NTcwMzEyLDMwLjUyMzQzNTggMzAuMDg2NTg3MiwzMC4yMzYzMjkzIDMwLjM0NTcwMzEsMjkuOTk4MDQ2OSBDMzAuNjA0ODE5LDI5Ljc1OTc2NDQgMzAuOTM2MTk1OSwyOS42NDA2MjUgMzEuMzM5ODQzOCwyOS42NDA2MjUgQzMxLjYxNTg4NjgsMjkuNjQwNjI1IDMxLjg3NTY0OTgsMjkuNzAxMTcxMyAzMi4xMTkxNDA2LDI5LjgyMjI2NTYgQzMyLjM2MjYzMTQsMjkuOTQzMzYgMzIuNTY5MDA5NiwzMC4xMTcxODY0IDMyLjczODI4MTIsMzAuMzQzNzUgTDMyLjczODI4MTIsMzAuMzQzNzUgWiIgaWQ9Im1vLcK3LS1qcyIgb3BhY2l0eT0iMC42NTAwMTE2NiIgZmlsbD0iI0YzNDI0NiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICA8L2c+PC9zdmc+")

.controls
  padding-bottom .5*gs
  position relative
  visibility hidden
  opacity 0
  transition all .5s linear
  &.is-shown
    visibility visible
    opacity 1
    @media only screen and (max-device-width: 480px)
      transition none
    @media only screen and (-webkit-min-device-pixel-ratio: 2)
      transition none
    @media only screen and (max-device-width: 1024px)
      transition none
    
  &__repeat, &__pin, &__sound
    position absolute
    z-index 1
    easy-click()
    transition all .25s linear
    &:active
      transform scale(1.4)
      transition-duration 0
  &__repeat
    left .6*gs
    top PX
  &__pin
    left 3*gs
    top 0
    &.is-pinned
      transform rotate(-42deg)
      .icon
        fill white
        opacity .75
  &__sound
    left 5.7*gs
    top 0
    &.is-on
      .icon
        fill white
        opacity .75
  &__timeline
    padding-left 8.5*gs
    
.icon
  fill mainColor
  opacity normalOpacity
  overflow hidden
  cursor pointer
  position relative
  display block
  width  18*PX
  height 18*PX
  user-select none
  touch-action none
  &:after
    hl green
  &--repeat
    rect 18*PX
  &:hover
    opacity hoverOpacity
  &:active
    opacity normalOpacity

canvasWidth  = 48*gs
canvasHeight = 40*gs
.motion
  position absolute
  top  50%
  left 50%
  width  canvasWidth
  height canvasHeight
  margin-top  -(canvasHeight/1.75)
  margin-left -(canvasWidth/2)
  &__controls
    position absolute
    width 75%
    left 9%
    bottom 2*gs
    z-index 1
.svg-canvas
  &__svg
    rect 100%
    position absolute
    nw 0

trackHeight = 1*PX
thumbSize   = 16px
input[type=range]
  -webkit-appearance none
  width 100%
  opacity normalOpacity
  &:active, &:hover
    opacity 1
  &:focus
    outline none
    &::-webkit-slider-runnable-track
      background mainColor
    &::-ms-fill-lower
      background mainColor
    &::-ms-fill-upper
      background mainColor
  &::-webkit-slider-runnable-track
    width         100%
    height        trackHeight
    cursor        pointer
    animate       0.2s
    background    mainColor
    border-radius 1.3px
  &::-webkit-slider-thumb
    height        thumbSize
    width         thumbSize
    border-radius 50%
    background    mainColor
    cursor        pointer
    -webkit-appearance none
    margin-top    -(thumbSize/2)
  &::-moz-range-track
    width         100%
    height        trackHeight
    cursor        pointer
    animate       0.2s
    background    mainColor
    border-radius 50%
  &::-moz-range-thumb
    height        thumbSize
    width         thumbSize
    border-radius 50%
    background    mainColor
    border-width  0
    cursor        pointer
  &::-ms-track
    width        100%
    height       trackHeight
    cursor       pointer
    animate      0.2s
    background   transparent
    color        transparent
  &::-ms-fill-lower
    background    mainColor
    border-radius 50%
  &::-ms-fill-upper
    background    mainColor
    border-radius 50%
    height        thumbSize
    width         thumbSize
    background    mainColor
    cursor        pointer
View Compiled
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}


/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

	module.exports = __webpack_require__(1);


/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

	var Ball_1, Ball_2, Ball_3, Ball_4, Ball_5, Ball_6, Ball_7, Main, mojs,
	  indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

	mojs = __webpack_require__(2);

	mojs.isDebug = false;

	Ball_1 = __webpack_require__(3);

	Ball_2 = __webpack_require__(4);

	Ball_3 = __webpack_require__(5);

	Ball_4 = __webpack_require__(6);

	Ball_5 = __webpack_require__(7);

	Ball_6 = __webpack_require__(8);

	Ball_7 = __webpack_require__(9);

	Main = (function() {
	  Main.prototype.CYAN = '#11CDC5';

	  Main.prototype.PINK = '#FC2D79';

	  Main.prototype.YELLOW = '#F9DD5E';

	  Main.prototype.ORANGE = '#FCB635';

	  Main.prototype.WHITE = '#FDFDFD';

	  Main.prototype.S = .7;

	  Main.prototype.DELAY_START = 0;

	  Main.prototype.STROKE_WIDTH = 2;

	  Main.prototype.CIRCLE_RADIUS = 5;

	  Main.prototype.IS_RUNLESS = true;

	  function Main() {
	    this.vars();
	    this.listenSlider();
	    this.createBits();
	    this.createSounds();
	    this.listenLinks();
	  }

	  Main.prototype.vars = function() {
	    this.slider = document.querySelector('#js-slider');
	    this.ctx = document.querySelector('#js-svg-canvas');
	    this.repeat = document.querySelector('#js-repeat');
	    this.controls = document.querySelector('#js-controls');
	    this.pin = document.querySelector('#js-pin');
	    this.sound = document.querySelector('#js-sound');
	    this.ctxWidth = 480;
	    this.ctxHeight = 400;
	    this.centerX = this.ctxWidth / 2;
	    this.centerY = this.ctxHeight / 2;
	    this.o2Left = 287;
	    this.topLine = 65;
	    this.bottomLine = 240;
	    this.bottomLineBurst = this.bottomLine + 10;
	    this.CHARS_TOP = this.bottomLine - 70;
	    this.CHAR_DUR = 2500;
	    this.DOWN_DUR = 50;
	    this.BALL_1_START = this.DELAY_START;
	    this.BALL_1_ARCDUR = 1600;
	    this.BALL_2_START = this.BALL_1_START + this.BALL_1_ARCDUR;
	    this.BALL_2_ARCDUR = 800;
	    this.BALL_3_START = this.BALL_2_START + this.BALL_2_ARCDUR + 100;
	    this.BALL_3_ARCDUR = 800;
	    this.BALL_4_START = this.BALL_3_START + this.BALL_3_ARCDUR + 100;
	    this.BALL_4_ARCDUR = 800;
	    this.BALL_5_START = this.BALL_4_START + this.BALL_4_ARCDUR + 100;
	    this.BALL_5_ARCDUR = 800;
	    this.BALL_6_START = this.BALL_5_START + this.BALL_5_ARCDUR + 100;
	    this.BALL_6_ARCDUR = 800;
	    this.BALL_7_START = this.BALL_6_START + this.BALL_6_ARCDUR + 100;
	    this.BALL_7_ARCDUR = 600;
	    this.STAGGER_COLORS = [this.PINK, this.CYAN, this.WHITE];
	    this.STAGGER_EASING = 'sinusoidal.out';
	    this.BG = '#333';
	    this.TRAIL_DASH = '4 4';
	    this.TRAIL_WIDTH = 1;
	    this.TRAIL_FADE = 400;
	    this.TRAIL_COLOR = 'white';
	    this.TRAIL_OPACITY = .5;
	    this.isIOS = this.isIOSSafari();
	    this.isOn = !this.isIOS;
	    !this.isIOS && this.sound.classList.add('is-on');
	    this.clickHandler = this.isIOS || this.isTouch() ? 'touchstart' : 'click';
	    this.tween = new mojs.Tween({
	      onUpdate: (function(_this) {
	        return function(p) {
	          _this.progress = p;
	          if (_this.tween.state === 'play') {
	            return _this.slider.value = p * 100000;
	          }
	        };
	      })(this),
	      onStart: (function(_this) {
	        return function() {
	          return !_this.isPinned && _this.controls.classList.remove('is-shown');
	        };
	      })(this),
	      onComplete: (function(_this) {
	        return function() {
	          return _this.controls.classList.add('is-shown');
	        };
	      })(this)
	    });
	    return this.clickArea = new mojs.Transit({
	      type: 'circle',
	      fill: this.WHITE,
	      opacity: {
	        .5: 0
	      },
	      isRunLess: true,
	      radius: {
	        0: 25
	      },
	      parent: this.controls,
	      easing: 'cubic.out'
	    });
	  };

	  Main.prototype.isIOSSafari = function() {
	    var userAgent;
	    userAgent = window.navigator.userAgent;
	    return userAgent.match(/iPad/i) || userAgent.match(/iPhone/i);
	  };

	  Main.prototype.isTouch = function() {
	    var isIETouch;
	    isIETouch = navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
	    return indexOf.call(window, 'ontouchstart') >= 0 || isIETouch;
	  };

	  Main.prototype.listenSlider = function() {
	    var controlsStep, it;
	    it = this;
	    this.slider.addEventListener('input', function(e) {
	      if (it.tween.state === 'play') {
	        it.tween.pause();
	        it.bells1.stop();
	      }
	      return it.tween.setProgress(this.value / 100000);
	    });
	    controlsStep = 27;
	    this.addEvent(this.repeat, (function(_this) {
	      return function() {
	        _this.clickArea.run({
	          x: 12,
	          y: 10
	        });
	        _this.bells1.stop();
	        return _this.tween.restart();
	      };
	    })(this));
	    this.addEvent(this.pin, (function(_this) {
	      return function(e) {
	        _this.clickArea.run({
	          x: 12 + 1 * controlsStep,
	          y: 10
	        });
	        _this.pin.classList.toggle('is-pinned');
	        return _this.isPinned = !_this.isPinned;
	      };
	    })(this));
	    return this.addEvent(this.sound, (function(_this) {
	      return function(e) {
	        _this.clickArea.run({
	          x: 12 + 2 * controlsStep,
	          y: 10
	        });
	        if (!_this.isOn) {
	          _this.bells1.play().pos(_this.progress * 5.14858);
	        } else {
	          _this.bells1.stop();
	        }
	        _this.sound.classList.toggle('is-on');
	        return _this.isOn = !_this.isOn;
	      };
	    })(this));
	  };

	  Main.prototype.createBits = function() {
	    this.createBall_1();
	    return this.createBalls();
	  };

	  Main.prototype.createBall_1 = function() {
	    var ball_1;
	    ball_1 = new Ball_1(this);
	    this.tween.add(ball_1.tweens);
	    return this.mainBall = ball_1.ball;
	  };

	  Main.prototype.createBalls = function() {
	    this.tween.add(new Ball_2(this));
	    this.tween.add(new Ball_3(this));
	    this.tween.add(new Ball_4(this));
	    this.tween.add(new Ball_5(this));
	    this.tween.add(new Ball_6(this));
	    return this.tween.add(new Ball_7(this));
	  };

	  Main.prototype.isOpera = function() {
	    var userAgent;
	    userAgent = navigator.userAgent;
	    return /^Opera\//.test(userAgent) || /\x20OPR\//.test(userAgent);
	  };

	  Main.prototype.createSounds = function() {
	    var audioLink;
	    audioLink = this.isOpera() ? 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bells-1-half.wav' : 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bells-1-half.mp3';
	    return this.bells1 = new Howl({
	      urls: [audioLink],
	      onload: (function(_this) {
	        return function() {
	          return setTimeout((function() {
	            return _this.tween.start();
	          }), 500);
	        };
	      })(this)
	    });
	  };

	  Main.prototype.playSound = function(audio) {
	    if (!this.isOn) {
	      return;
	    }
	    return audio.play();
	  };

	  Main.prototype.listenLinks = function() {
	    this.lego = document.querySelector('#js-by-logo');
	    this.legoSnowball = document.querySelector('#js-by-snowball');
	    this.mojs = document.querySelector('#js-with-logo');
	    this.mojsSnowball = document.querySelector('#js-with-snowball');
	  };

	  Main.prototype.addEvent = function(el, handler) {
	    return el.addEventListener(this.clickHandler, handler);
	  };

	  Main.prototype.generateBezier = function(mX1, mY1, mX2, mY2) {
	    var A, B, C, NEWTON_ITERATIONS, NEWTON_MIN_SLOPE, SUBDIVISION_MAX_ITERATIONS, SUBDIVISION_PRECISION, _precomputed, binarySubdivide, calcBezier, calcSampleValues, f, float32ArraySupported, getSlope, getTForX, i, isNan, kSampleStepSize, kSplineTableSize, mSampleValues, newtonRaphsonIterate, precompute;
	    NEWTON_ITERATIONS = 4;
	    NEWTON_MIN_SLOPE = 0.001;
	    SUBDIVISION_PRECISION = 0.0000001;
	    SUBDIVISION_MAX_ITERATIONS = 10;
	    kSplineTableSize = 11;
	    kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
	    float32ArraySupported = indexOf.call(window, 'Float32Array') >= 0;

	    /* Must contain four arguments. */
	    A = function(aA1, aA2) {
	      return 1.0 - 3.0 * aA2 + 3.0 * aA1;
	    };
	    B = function(aA1, aA2) {
	      return 3.0 * aA2 - 6.0 * aA1;
	    };
	    C = function(aA1) {
	      return 3.0 * aA1;
	    };
	    calcBezier = function(aT, aA1, aA2) {
	      return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
	    };
	    getSlope = function(aT, aA1, aA2) {
	      return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
	    };
	    newtonRaphsonIterate = function(aX, aGuessT) {
	      var currentSlope, currentX, i;
	      i = 0;
	      while (i < NEWTON_ITERATIONS) {
	        currentSlope = getSlope(aGuessT, mX1, mX2);
	        if (currentSlope === 0.0) {
	          return aGuessT;
	        }
	        currentX = calcBezier(aGuessT, mX1, mX2) - aX;
	        aGuessT -= currentX / currentSlope;
	        ++i;
	      }
	      return aGuessT;
	    };
	    calcSampleValues = function() {
	      var i;
	      i = 0;
	      while (i < kSplineTableSize) {
	        mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
	        ++i;
	      }
	    };
	    binarySubdivide = function(aX, aA, aB) {
	      var currentT, currentX, i, isSubDiv;
	      currentX = void 0;
	      currentT = void 0;
	      i = 0;
	      while (true) {
	        currentT = aA + (aB - aA) / 2.0;
	        currentX = calcBezier(currentT, mX1, mX2) - aX;
	        if (currentX > 0.0) {
	          aB = currentT;
	        } else {
	          aA = currentT;
	        }
	        isSubDiv = Math.abs(currentX) > SUBDIVISION_PRECISION;
	        if (!(isSubDiv && ++i < SUBDIVISION_MAX_ITERATIONS)) {
	          break;
	        }
	      }
	      return currentT;
	    };
	    getTForX = function(aX) {
	      var currentSample, dist, guessForT, initialSlope, intervalStart, lastSample, one;
	      intervalStart = 0.0;
	      currentSample = 1;
	      lastSample = kSplineTableSize - 1;
	      while (currentSample !== lastSample && mSampleValues[currentSample] <= aX) {
	        intervalStart += kSampleStepSize;
	        ++currentSample;
	      }
	      --currentSample;
	      one = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample + 1], dist = one - mSampleValues[currentSample]);
	      guessForT = intervalStart + dist * kSampleStepSize;
	      initialSlope = getSlope(guessForT, mX1, mX2);
	      if (initialSlope >= NEWTON_MIN_SLOPE) {
	        return newtonRaphsonIterate(aX, guessForT);
	      } else if (initialSlope === 0.0) {
	        return guessForT;
	      } else {
	        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize);
	      }
	    };
	    precompute = function() {
	      var _precomputed;
	      _precomputed = true;
	      if (mX1 !== mY1 || mX2 !== mY2) {
	        calcSampleValues();
	      }
	    };
	    if (arguments.length !== 4) {
	      return false;
	    }

	    /* Arguments must be numbers. */
	    i = 0;
	    while (i < 4) {
	      isNan = isNaN(arguments[i]);
	      if (typeof arguments[i] !== 'number' || isNan || !isFinite(arguments[i])) {
	        return false;
	      }
	      ++i;
	    }

	    /* X values must be in the [0, 1] range. */
	    mX1 = Math.min(mX1, 1);
	    mX2 = Math.min(mX2, 1);
	    mX1 = Math.max(mX1, 0);
	    mX2 = Math.max(mX2, 0);
	    mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
	    _precomputed = false;
	    f = function(aX) {
	      if (!_precomputed) {
	        precompute();
	      }
	      if (mX1 === mY1 && mX2 === mY2) {
	        return aX;
	      }
	      if (aX === 0) {
	        return 0;
	      }
	      if (aX === 1) {
	        return 1;
	      }
	      return calcBezier(getTForX(aX), mY1, mY2);
	    };
	    f.getControlPoints = function() {
	      return [
	        {
	          x: mX1,
	          y: mY1
	        }, {
	          x: mX2,
	          y: mY2
	        }
	      ];
	    };
	    return f;
	  };

	  return Main;

	})();

	new Main;


/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {

	var require;var require;/*! 
	  :: mo · js :: motion graphics toolbelt for the web
	  Oleg Solomka @LegoMushroom 2015 MIT
	  v0.110.0 
	*/

	(function(f){if(true){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.yes = f()}})(function(){var define,module,exports;return (function e(t,n,r){
	function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return require(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

	var Burst, Swirl, Transit, Tween, bitsMap, h,
	  extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
	  hasProp = {}.hasOwnProperty;

	bitsMap = require('./shapes/bitsMap');

	Tween = require('./tween/tween');

	Transit = require('./transit');

	Swirl = require('./swirl');

	h = require('./h');

	Burst = (function(superClass) {
	  extend(Burst, superClass);

	  function Burst() {
	    return Burst.__super__.constructor.apply(this, arguments);
	  }

	  Burst.prototype.skipProps = {
	    childOptions: 1
	  };

	  Burst.prototype.defaults = {
	    count: 5,
	    degree: 360,
	    opacity: 1,
	    randomAngle: 0,
	    randomRadius: 0,
	    x: 100,
	    y: 100,
	    shiftX: 0,
	    shiftY: 0,
	    easing: 'Linear.None',
	    radius: {
	      25: 75
	    },
	    radiusX: void 0,
	    radiusY: void 0,
	    angle: 0,
	    size: null,
	    sizeGap: 0,
	    duration: 600,
	    delay: 0,
	    onStart: null,
	    onComplete: null,
	    onCompleteChain: null,
	    onUpdate: null,
	    isResetAngles: false
	  };

	  Burst.prototype.childDefaults = {
	    radius: {
	      7: 0
	    },
	    radiusX: void 0,
	    radiusY: void 0,
	    angle: 0,
	    opacity: 1,
	    onStart: null,
	    onComplete: null,
	    onUpdate: null,
	    points: 3,
	    duration: 500,
	    delay: 0,
	    repeat: 0,
	    yoyo: false,
	    easing: 'Linear.None',
	    type: 'circle',
	    fill: 'deeppink',
	    fillOpacity: 1,
	    isSwirl: false,
	    swirlSize: 10,
	    swirlFrequency: 3,
	    stroke: 'transparent',
	    strokeWidth: 0,
	    strokeOpacity: 1,
	    strokeDasharray: '',
	    strokeDashoffset: '',
	    strokeLinecap: null
	  };

	  Burst.prototype.optionsIntersection = {
	    radius: 1,
	    radiusX: 1,
	    radiusY: 1,
	    angle: 1,
	    opacity: 1,
	    onStart: 1,
	    onComplete: 1,
	    onUpdate: 1
	  };

	  Burst.prototype.run = function(o) {
	    var base, i, j, key, keys, len, len1, ref, tr, transit;
	    if ((o != null) && Object.keys(o).length) {
	      if (o.count || ((ref = o.childOptions) != null ? ref.count : void 0)) {
	        this.h.warn('Sorry, count can not be changed on run');
	      }
	      this.extendDefaults(o);
	      keys = Object.keys(o.childOptions || {});
	      if ((base = this.o).childOptions == null) {
	        base.childOptions = {};
	      }
	      for (i = j = 0, len1 = keys.length; j < len1; i = ++j) {
	        key = keys[i];
	        this.o.childOptions[key] = o.childOptions[key];
	      }
	      len = this.transits.length;
	      while (len--) {
	        transit = this.transits[len];
	        transit.tuneNewOption(this.getOption(len), true);
	      }
	      this.tween.recalcDuration();
	    }
	    if (this.props.randomAngle || this.props.randomRadius) {
	      len = this.transits.length;
	      while (len--) {
	        tr = this.transits[len];
	        this.props.randomAngle && tr.setProp({
	          angleShift: this.generateRandomAngle()
	        });
	        this.props.randomRadius && tr.setProp({
	          radiusScale: this.generateRandomRadius()
	        });
	      }
	    }
	    return this.startTween();
	  };

	  Burst.prototype.createBit = function() {
	    var i, j, option, ref, results;
	    this.transits = [];
	    results = [];
	    for (i = j = 0, ref = this.props.count; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
	      option = this.getOption(i);
	      option.ctx = this.ctx;
	      option.index = i;
	      option.isDrawLess = option.isRunLess = option.isTweenLess = true;
	      this.props.randomAngle && (option.angleShift = this.generateRandomAngle());
	      this.props.randomRadius && (option.radiusScale = this.generateRandomRadius());
	      results.push(this.transits.push(new Swirl(option)));
	    }
	    return results;
	  };

	  Burst.prototype.addBitOptions = function() {
	    var aShift, angleAddition, delta, end, i, j, keys, len1, newEnd, newStart, pointEnd, pointStart, points, ref, results, start, step, transit;
	    points = this.props.count;
	    this.degreeCnt = this.props.degree % 360 === 0 ? points : points - 1 || 1;
	    step = this.props.degree / this.degreeCnt;
	    ref = this.transits;
	    results = [];
	    for (i = j = 0, len1 = ref.length; j < len1; i = ++j) {
	      transit = ref[i];
	      aShift = transit.props.angleShift;
	      pointStart = this.getSidePoint('start', i * step + aShift);
	      pointEnd = this.getSidePoint('end', i * step + aShift);
	      transit.o.x = this.getDeltaFromPoints('x', pointStart, pointEnd);
	      transit.o.y = this.getDeltaFromPoints('y', pointStart, pointEnd);
	      if (!this.props.isResetAngles) {
	        angleAddition = i * step + 90;
	        transit.o.angle = typeof transit.o.angle !== 'object' ? transit.o.angle + angleAddition + aShift : (keys = Object.keys(transit.o.angle), start = keys[0], end = transit.o.angle[start], newStart = parseFloat(start) + angleAddition + aShift, newEnd = parseFloat(end) + angleAddition + aShift, delta = {}, delta[newStart] = newEnd, delta);
	      }
	      results.push(transit.extendDefaults());
	    }
	    return results;
	  };

	  Burst.prototype.getSidePoint = function(side, angle) {
	    var pointStart, sideRadius;
	    sideRadius = this.getSideRadius(side);
	    return pointStart = this.h.getRadialPoint({
	      radius: sideRadius.radius,
	      radiusX: sideRadius.radiusX,
	      radiusY: sideRadius.radiusY,
	      angle: angle,
	      center: {
	        x: this.props.center,
	        y: this.props.center
	      }
	    });
	  };

	  Burst.prototype.getSideRadius = function(side) {
	    return {
	      radius: this.getRadiusByKey('radius', side),
	      radiusX: this.getRadiusByKey('radiusX', side),
	      radiusY: this.getRadiusByKey('radiusY', side)
	    };
	  };

	  Burst.prototype.getRadiusByKey = function(key, side) {
	    if (this.deltas[key] != null) {
	      return this.deltas[key][side];
	    } else if (this.props[key] != null) {
	      return this.props[key];
	    }
	  };

	  Burst.prototype.getDeltaFromPoints = function(key, pointStart, pointEnd) {
	    var delta;
	    delta = {};
	    if (pointStart[key] === pointEnd[key]) {
	      return delta = pointStart[key];
	    } else {
	      delta[pointStart[key]] = pointEnd[key];
	      return delta;
	    }
	  };

	  Burst.prototype.draw = function(progress) {
	    return this.drawEl();
	  };

	  Burst.prototype.isNeedsTransform = function() {
	    return this.isPropChanged('shiftX') || this.isPropChanged('shiftY') || this.isPropChanged('angle');
	  };

	  Burst.prototype.fillTransform = function() {
	    return "rotate(" + this.props.angle + "deg) translate(" + this.props.shiftX + ", " + this.props.shiftY + ")";
	  };

	  Burst.prototype.createTween = function() {
	    var i, results;
	    Burst.__super__.createTween.apply(this, arguments);
	    i = this.transits.length;
	    results = [];
	    while (i--) {
	      results.push(this.tween.add(this.transits[i].timeline));
	    }
	    return results;
	  };

	  Burst.prototype.calcSize = function() {
	    var i, j, largestSize, len1, radius, ref, transit;
	    largestSize = -1;
	    ref = this.transits;
	    for (i = j = 0, len1 = ref.length; j < len1; i = ++j) {
	      transit = ref[i];
	      transit.calcSize();
	      if (largestSize < transit.props.size) {
	        largestSize = transit.props.size;
	      }
	    }
	    radius = this.calcMaxRadius();
	    this.props.size = largestSize + 2 * radius;
	    this.props.size += 2 * this.props.sizeGap;
	    this.props.center = this.props.size / 2;
	    return this.addBitOptions();
	  };

	  Burst.prototype.getOption = function(i) {
	    var key, keys, len, option;
	    option = {};
	    keys = Object.keys(this.childDefaults);
	    len = keys.length;
	    while (len--) {
	      key = keys[len];
	      option[key] = this.getPropByMod({
	        key: key,
	        i: i,
	        from: this.o.childOptions
	      });
	      if (this.optionsIntersection[key]) {
	        if (option[key] == null) {
	          option[key] = this.getPropByMod({
	            key: key,
	            i: i,
	            from: this.childDefaults
	          });
	        }
	        continue;
	      }
	      if (option[key] == null) {
	        option[key] = this.getPropByMod({
	          key: key,
	          i: i,
	          from: this.o
	        });
	      }
	      if (option[key] == null) {
	        option[key] = this.getPropByMod({
	          key: key,
	          i: i,
	          from: this.childDefaults
	        });
	      }
	    }
	    return option;
	  };

	  Burst.prototype.getPropByMod = function(o) {
	    var prop, ref;
	    prop = (ref = o.from || this.o.childOptions) != null ? ref[o.key] : void 0;
	    if (this.h.isArray(prop)) {
	      return prop[o.i % prop.length];
	    } else {
	      return prop;
	    }
	  };

	  Burst.prototype.generateRandomAngle = function(i) {
	    var randdomness, randomness;
	    randomness = parseFloat(this.props.randomAngle);
	    randdomness = randomness > 1 ? 1 : randomness < 0 ? 0 : void 0;
	    return this.h.rand(0, randomness ? randomness * 360 : 180);
	  };

	  Burst.prototype.generateRandomRadius = function(i) {
	    var randdomness, randomness, start;
	    randomness = parseFloat(this.props.randomRadius);
	    randdomness = randomness > 1 ? 1 : randomness < 0 ? 0 : void 0;
	    start = randomness ? (1 - randomness) * 100 : (1 - .5) * 100;
	    return this.h.rand(start, 100) / 100;
	  };

	  Burst.prototype.then = function(o) {
	    this.h.error("Burst's \"then\" method is under consideration, you can vote for it in github repo issues");
	    return this;
	  };

	  return Burst;

	})(Transit);

	module.exports = Burst;

	},{"./h":3,"./shapes/bitsMap":9,"./swirl":18,"./transit":19,"./tween/tween":21}],2:[function(require,module,exports){
	var Easing, easing;

	Easing = (function() {
	  function Easing() {}

	  Easing.prototype.linear = {
	    none: function(k) {
	      return k;
	    }
	  };

	  Easing.prototype.quadratic = {
	    "in": function(k) {
	      return k * k;
	    },
	    out: function(k) {
	      return k * (2 - k);
	    },
	    inout: function(k) {
	      if ((k *= 2) < 1) {
	        return 0.5 * k * k;
	      }
	      return -0.5 * (--k * (k - 2) - 1);
	    }
	  };

	  Easing.prototype.cubic = {
	    "in": function(k) {
	      return k * k * k;
	    },
	    out: function(k) {
	      return --k * k * k + 1;
	    },
	    inout: function(k) {
	      if ((k *= 2) < 1) {
	        return 0.5 * k * k * k;
	      }
	      return 0.5 * ((k -= 2) * k * k + 2);
	    }
	  };

	  Easing.prototype.quartic = {
	    "in": function(k) {
	      return k * k * k * k;
	    },
	    out: function(k) {
	      return 1 - (--k * k * k * k);
	    },
	    inout: function(k) {
	      if ((k *= 2) < 1) {
	        return 0.5 * k * k * k * k;
	      }
	      return -0.5 * ((k -= 2) * k * k * k - 2);
	    }
	  };

	  Easing.prototype.quintic = {
	    "in": function(k) {
	      return k * k * k * k * k;
	    },
	    out: function(k) {
	      return --k * k * k * k * k + 1;
	    },
	    inout: function(k) {
	      if ((k *= 2) < 1) {
	        return 0.5 * k * k * k * k * k;
	      }
	      return 0.5 * ((k -= 2) * k * k * k * k + 2);
	    }
	  };

	  Easing.prototype.sinusoidal = {
	    "in": function(k) {
	      return 1 - Math.cos(k * Math.PI / 2);
	    },
	    out: function(k) {
	      return Math.sin(k * Math.PI / 2);
	    },
	    inout: function(k) {
	      return 0.5 * (1 - Math.cos(Math.PI * k));
	    }
	  };

	  Easing.prototype.exponential = {
	    "in": function(k) {
	      if (k === 0) {
	        return 0;
	      } else {
	        return Math.pow(1024, k - 1);
	      }
	    },
	    out: function(k) {
	      if (k === 1) {
	        return 1;
	      } else {
	        return 1 - Math.pow(2, -10 * k);
	      }
	    },
	    inout: function(k) {
	      if (k === 0) {
	        return 0;
	      }
	      if (k === 1) {
	        return 1;
	      }
	      if ((k *= 2) < 1) {
	        return 0.5 * Math.pow(1024, k - 1);
	      }
	      return 0.5 * (-Math.pow(2, -10 * (k - 1)) + 2);
	    }
	  };

	  Easing.prototype.circular = {
	    "in": function(k) {
	      return 1 - Math.sqrt(1 - k * k);
	    },
	    out: function(k) {
	      return Math.sqrt(1 - (--k * k));
	    },
	    inout: function(k) {
	      if ((k *= 2) < 1) {
	        return -0.5 * (Math.sqrt(1 - k * k) - 1);
	      }
	      return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
	    }
	  };

	  Easing.prototype.elastic = {
	    "in": function(k) {
	      var a, p, s;
	      s = void 0;
	      p = 0.4;
	      if (k === 0) {
	        return 0;
	      }
	      if (k === 1) {
	        return 1;
	      }
	      a = 1;
	      s = p / 4;
	      return -(a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p));
	    },
	    out: function(k) {
	      var a, p, s;
	      s = void 0;
	      p = 0.4;
	      if (k === 0) {
	        return 0;
	      }
	      if (k === 1) {
	        return 1;
	      }
	      a = 1;
	      s = p / 4;
	      return a * Math.pow(2, -10 * k) * Math.sin((k - s) * (2 * Math.PI) / p) + 1;
	    },
	    inout: function(k) {
	      var a, p, s;
	      s = void 0;
	      p = 0.4;
	      if (k === 0) {
	        return 0;
	      }
	      if (k === 1) {
	        return 1;
	      }
	      a = 1;
	      s = p / 4;
	      if ((k *= 2) < 1) {
	        return -0.5 * (a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p));
	      }
	      return a * Math.pow(2, -10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1;
	    }
	  };

	  Easing.prototype.back = {
	    "in": function(k) {
	      var s;
	      s = 1.70158;
	      return k * k * ((s + 1) * k - s);
	    },
	    out: function(k) {
	      var s;
	      s = 1.70158;
	      return --k * k * ((s + 1) * k + s) + 1;
	    },
	    inout: function(k) {
	      var s;
	      s = 1.70158 * 1.525;
	      if ((k *= 2) < 1) {
	        return 0.5 * (k * k * ((s + 1) * k - s));
	      }
	      return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
	    }
	  };

	  Easing.prototype.bounce = {
	    "in": function(k) {
	      return 1 - easing.bounce.out(1 - k);
	    },
	    out: function(k) {
	      if (k < (1 / 2.75)) {
	        return 7.5625 * k * k;
	      } else if (k < (2 / 2.75)) {
	        return 7.5625 * (k -= 1.5 / 2.75) * k + 0.75;
	      } else if (k < (2.5 / 2.75)) {
	        return 7.5625 * (k -= 2.25 / 2.75) * k + 0.9375;
	      } else {
	        return 7.5625 * (k -= 2.625 / 2.75) * k + 0.984375;
	      }
	    },
	    inout: function(k) {
	      if (k < 0.5) {
	        return easing.bounce["in"](k * 2) * 0.5;
	      }
	      return easing.bounce.out(k * 2 - 1) * 0.5 + 0.5;
	    }
	  };

	  return Easing;

	})();

	easing = new Easing;

	module.exports = easing;

	},{}],3:[function(require,module,exports){
	var Helpers, h;

	Helpers = (function() {
	  Helpers.prototype.logBadgeCss = 'background:#3A0839;color:#FF512F;border-radius:5px; padding: 1px 5px 2px; border: 1px solid #FF512F;';

	  Helpers.prototype.shortColors = {
	    transparent: 'rgba(0,0,0,0)',
	    aqua: 'rgb(0,255,255)',
	    black: 'rgb(0,0,0)',
	    blue: 'rgb(0,0,255)',
	    fuchsia: 'rgb(255,0,255)',
	    gray: 'rgb(128,128,128)',
	    green: 'rgb(0,128,0)',
	    lime: 'rgb(0,255,0)',
	    maroon: 'rgb(128,0,0)',
	    navy: 'rgb(0,0,128)',
	    olive: 'rgb(128,128,0)',
	    purple: 'rgb(128,0,128)',
	    red: 'rgb(255,0,0)',
	    silver: 'rgb(192,192,192)',
	    teal: 'rgb(0,128,128)',
	    white: 'rgb(255,255,255)',
	    yellow: 'rgb(255,255,0)',
	    orange: 'rgb(255,128,0)'
	  };

	  Helpers.prototype.chainOptionMap = {
	    duration: 1,
	    delay: 1,
	    repeat: 1,
	    easing: 1,
	    yoyo: 1,
	    onStart: 1,
	    onComplete: 1,
	    onCompleteChain: 1,
	    onUpdate: 1,
	    points: 1
	  };

	  Helpers.prototype.callbacksMap = {
	    onStart: 1,
	    onComplete: 1,
	    onCompleteChain: 1,
	    onUpdate: 1
	  };

	  Helpers.prototype.tweenOptionMap = {
	    duration: 1,
	    delay: 1,
	    repeat: 1,
	    easing: 1,
	    yoyo: 1
	  };

	  Helpers.prototype.posPropsMap = {
	    x: 1,
	    y: 1,
	    shiftX: 1,
	    shiftY: 1,
	    burstX: 1,
	    burstY: 1,
	    burstShiftX: 1,
	    burstShiftY: 1
	  };

	  Helpers.prototype.strokeDashPropsMap = {
	    strokeDasharray: 1,
	    strokeDashoffset: 1
	  };

	  Helpers.prototype.RAD_TO_DEG = 180 / Math.PI;

	  function Helpers() {
	    this.vars();
	  }

	  Helpers.prototype.vars = function() {
	    this.prefix = this.getPrefix();
	    this.getRemBase();
	    this.isFF = this.prefix.lowercase === 'moz';
	    this.isIE = this.prefix.lowercase === 'ms';
	    this.isOldOpera = navigator.userAgent.match(/presto/gim);
	    this.div = document.createElement('div');
	    return document.body.appendChild(this.div);
	  };

	  Helpers.prototype.cloneObj = function(obj, exclude) {
	    var i, key, keys, newObj;
	    keys = Object.keys(obj);
	    newObj = {};
	    i = keys.length;
	    while (i--) {
	      key = keys[i];
	      if (exclude != null) {
	        if (!exclude[key]) {
	          newObj[key] = obj[key];
	        }
	      } else {
	        newObj[key] = obj[key];
	      }
	    }
	    return newObj;
	  };

	  Helpers.prototype.extend = function(objTo, objFrom) {
	    var key, results, value;
	    results = [];
	    for (key in objFrom) {
	      value = objFrom[key];
	      results.push(objTo[key] != null ? objTo[key] : objTo[key] = objFrom[key]);
	    }
	    return results;
	  };

	  Helpers.prototype.getRemBase = function() {
	    var html, style;
	    html = document.querySelector('html');
	    style = getComputedStyle(html);
	    return this.remBase = parseFloat(style.fontSize);
	  };

	  Helpers.prototype.clamp = function(value, min, max) {
	    return Math.min(Math.max(value, min), max);
	  };

	  Helpers.prototype.setPrefixedStyle = function(el, name, value) {
	    var prefixedName;
	    prefixedName = "" + this.prefix.css + name;
	    el.style[name] = value;
	    return el.style[prefixedName] = value;
	  };

	  Helpers.prototype.prepareForLog

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/classlist/2014.01.31/classList.min.js
  2. https://cdn.jsdelivr.net/howler.js/1.1.25/howler.min.js