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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                %svg{ :width => '100%', :height => '100%', :viewbox => '0 0 800 400', :version => '1.1', :xmlns => 'http://www.w3.org/2000/svg', 'xmlns:xlink' => 'http://www.w3.org/1999/xlink' }

  %defs
    %clipPath#clipPathCupTop
      %path{ :d => 'M7.02184767,92 L7,92 L7,0 L129,0 L129,92 L128.978152,92 C128.992687,92.1661301 129,92.332806 129,92.5 C129,102.717268 101.68937,111 68,111 C34.3106303,111 7,102.717268 7,92.5 C7,92.332806 7.00731313,92.1661301 7.02184767,92 Z' }

    %path#cupBodyShape{ :d => 'M312,190 L446,164 C455.679978,208.942066 460.800657,255.464673 463,303 C470.179673,326.771115 327.481478,334.20088 327,305 C322.662603,253.027247 317.662603,214.693913 312,190 Z' }
    %path#cupBodyShape10{ :d => 'M342,176 L477,198 C472.318151,226.923654 468.318151,266.923654 465,318 C462,342 325,335 328,306 C330.871259,262.691021 334.501621,219.371745 342,176 Z' }
    %path#cupBodyShape16{ :d => 'M314,224 L456,201 C463.924323,240.504879 466.217643,276.832327 470,314 C476,338 333,341 328,324 C326.159408,297.711378 322.288194,266.360915 314,224 Z' }
    %path#cupBodyShape20{ :d => 'M332,133 L468,137 L466,278 C467,300 337,303 330,273 L332,133 Z' }
    %path#cupBodyShape23{ :d => 'M339,194 L475,213 C469.534444,249.892255 465.761476,285.811621 465,320 C462,336 336,335 329,313 C329.796384,271.874705 333.666244,232.516516 339,194 Z' }

    %clipPath#clipPathCup
      %use{ 'xlink:href' => '#cupBodyShape' }

    %path#cupShadowShape10{ :d => 'M446,338 C450.151325,286.826433 455.566917,237.621166 462,190 L485,190 L470,338 L446,338 Z' }
    %path#cupShadowShape16{ :d => 'M441,209 C446.333333,235 450,277 452,335 L478,325 L458,189 C446.666667,197 441,203.666667 441,209 Z' }
    %polygon#cupShadowShape20{ :fill => '#FF0000', :points => '454 135 449 296 472 294 476 127' }
    %path#cupShadowShape23{ :d => 'M462,209 C454.862488,239.452757 450.853775,289.930693 446,335 L467,335 L485,204 L462,209 Z' }

    %path#cupHandleShape10{:d => 'M457.142477,297.916216 L468.541341,297.916216 C487.623561,297.916216 488.674633,273.782259 468.541341,273.782259 L457.142477,273.782259 L457.142477,258.698535 L473.959627,258.698535 C507.939771,263.693847 504.409876,311.966778 473.959627,314.005521 L457.142477,314.005521 L457.142477,297.916216 Z', :fill => '#D0021B' }
    %path#cupHandleShape16{:d => 'M457.30779,294.076584 L468.064585,294.076584 C483.435957,294.370085 483.641055,271.349269 468.064585,271.826487 L457.30779,271.826487 L457.30779,257.920177 L473.177674,257.920177 C505.243806,262.525562 501.912741,307.030379 473.177674,308.909981 L457.30779,308.909981 L457.30779,294.076584 Z', :fill => '#D0021B' }
    %path#cupHandleShape20{:d => 'M456.30779,251.254545 L467.064585,251.254545 C482.435957,251.605666 482.641055,224.065459 467.064585,224.636364 L456.30779,224.636364 L456.30779,208 L472.177674,208 C504.243806,213.509503 500.912741,266.751399 472.177674,269 L456.30779,269 L456.30779,251.254545 Z', :fill => '#D0021B'}
    %path#cupHandleShape23{:d => 'M464,300.327273 L474.756795,300.327273 C490.128167,300.597808 490.333264,279.378305 474.756795,279.818182 L464,279.818182 L464,267 L479.869884,267 C511.936016,271.245027 508.604951,312.267471 479.869884,314 L464,314 L464,300.327273 Z', :fill => '#D0021B'}

    %path#coffeeShape02{ :d => 'M58.9464219,116.999785 C92.6357916,116.999785 123.242656,96.6341025 119,94 C70.0715617,92.4109889 66.1558154,83.6056254 41,82 C15.8441846,80.3943746 2,90.7970315 2,98.4997847 C2,108.717053 25.2570521,116.999785 58.9464219,116.999785 Z' }
    %path#coffeeShape04{ :d => 'M58.9464219,116.999785 C92.6357916,116.999785 123.242656,97.6341025 119,95 C86,81.2309941 69.1558154,81.6056254 44,80 C18.8441846,78.3943746 2,90.7970315 2,98.4997847 C2,108.717053 25.2570521,116.999785 58.9464219,116.999785 Z' }
    %path#coffeeShape06{ :d => 'M58.9464219,116.999785 C92.6357916,116.999785 124.242656,97.6341025 120,95 C111,88 106.155815,82.6056254 81,81 C55.8441846,79.3943746 2,86 2,98.4997847 C2,108.717053 25.2570521,116.999785 58.9464219,116.999785 Z' }
    %path#coffeeShape08{ :d => 'M58.9464219,116.999785 C92.6357916,116.999785 124.242656,97.6341025 120,95 C116.155815,89 116.155815,80.6056254 91,79 C65,79 10,84 2,95 C-6,106 25.2570521,116.999785 58.9464219,116.999785 Z' }
    %path#coffeeShape10{ :d => 'M56.7576355,119.851665 C90.4470052,119.851665 117.757635,121.70333 117.757635,101.351665 C117.757635,81 82.3626371,84.4851474 56.7576355,89 C31.1526339,93.5148526 4,90.2972468 4,98 C4,108.217268 23.0682657,119.851665 56.7576355,119.851665 Z' }
    %path#coffeeShape12{ :d => 'M56.7576355,119.851665 C90.4470052,119.851665 117.757635,121.70333 117.757635,101.351665 C117.757635,81 83,94 56.7576355,89 C30.515271,84 4,90.2972468 4,98 C4,108.217268 23.0682657,119.851665 56.7576355,119.851665 Z' }
    %path#coffeeShape14{ :d => 'M56.7576355,119.851665 C90.4470052,119.851665 117.757635,121.70333 117.757635,101.351665 C117.757635,81 87.8788177,88 60.8788177,88 C33.8788177,88 4,90.2972468 4,98 C4,108.217268 23.0682657,119.851665 56.7576355,119.851665 Z' }
    %path#coffeeShape16{ :d => 'M57.2257505,111.577985 C92.6552442,111.577985 126.840087,104.518073 121.376524,96.0101494 C115.912961,87.5022255 82.2795577,85.196306 59.0719696,86.0067328 C35.8643815,86.8171596 -2.98094472,93.8709053 -2.98094472,100.352808 C-2.98094472,108.950686 21.7962568,111.577985 57.2257505,111.577985 Z' }
    %path#coffeeShape17{ :d => 'M70.1629587,118.164524 C105.895578,118.164524 140.683235,108.241335 134.86259,102.67796 C129.041945,97.1145858 115.460758,86.3945821 93.4741593,87.162371 C73.4863428,87.8603609 54.0900927,105.498598 3.98267834,103.295406 C5.70891158,111.622517 34.4303389,118.164524 70.1629587,118.164524 Z' }
    %path#coffeeShape18{ :d => 'M75,131.766007 C99.6721032,125.989585 129.19238,115.066396 123.371735,109.503021 C117.55109,103.939647 119.607229,96.8434271 100,91.766007 C72.9464806,88.5468586 41.0187682,122.385716 5,117.766007 C6.72623324,126.093117 50.3278968,137.542429 75,131.766007 Z' }
    %path#coffeeShape19{ :d => 'M77.990768,126.138157 C102.662871,120.361735 126.820645,107.563375 121,102 C115.179355,96.4366255 115.607229,90.0774201 96,85 C68.9464806,81.7808516 37.0187682,103.619709 1,99 C-9.70642084,169.539421 53.3186649,131.91458 77.990768,126.138157 Z' }
    %path#coffeeShape20{ :d => 'M59.6287636,116.779448 C92.7056051,116.779448 124.620445,108.867368 119.519683,99.3324937 C112.428247,83.0353336 79.7314966,90.7473167 64.3657483,79.8736584 C49,69 4,57 -0.26215572,99.3324937 C-0.26215572,108.96818 26.5519222,116.779448 59.6287636,116.779448 Z' }
    %path#coffeeShape23{ :d => 'M55.8909194,118.640001 C88.9677608,118.640001 126.100762,110.727921 121,101.193047 C107,91 102,98 79.4195122,80.2637619 C56,61 22,-31 -4,101.193047 C-4,110.828733 22.8140779,118.640001 55.8909194,118.640001 Z' }
    %path#coffeeShape25{ :d => 'M53.4163166,126.364071 C86.493158,126.364071 125.100762,114.534874 120,105 C102,98 110,85 92,72 C68.9628826,56.6934255 44,91 -6,94 C-6,103.635687 20.3394751,126.364071 53.4163166,126.364071 Z' }
    %path#coffeeShape27{ :d => 'M62,110.4847 C95.0768414,110.4847 128.49462,120.019575 123.393858,110.4847 C116.302423,94.1875402 116.302423,80 97.3577842,75.1898834 C63.5029391,69 58.45617,100 -7,96 C-7,105.635687 28.9231586,110.4847 62,110.4847 Z' }
    %path#coffeeShape29{ :d => 'M60.8689269,112.814669 C94.5582967,112.814669 122.242656,98.6341025 118,96 C101,84 90.7387339,87.6436978 61.1266916,88 C31.5146493,88.3563022 15,86 0,99.3062874 C0,109.523555 27.1795572,112.814669 60.8689269,112.814669 Z' }

    %path#foot{ :d => 'M388,346 L395,346 C392.196088,337.186786 390.95329,325.697713 396,314', :stroke => '#272D21', 'stroke-linecap' => 'round', 'stroke-linejoin' => 'round', 'stroke-width' => '7' }
    %path#footShape10{ :d => 'M388,346 L395,346 C386,339 390,333 395,322' }
    %path#footShape16{ :d => 'M388,346 L395,346 C384,342 388,338 398,326' }
    %path#footShape20{ :d => 'M391,330 L394.5,325 C394.5,318 395,299 395,287' }
    %path#footShape23{ :d => 'M388,346 L395,346 C386,339 388,335 396,324' }

    %path#drop{ :fill => '#8FCFFE', :d => 'M6.5,18 C9,18 13,15.9705627 13,11 C13,6.02943725 8,0 6.5,0 C5,2.5434972e-16 0,6.02943725 0,11 C0,15.9705627 4,18 6.5,18 Z' }

    %polyline#wave{ :stroke => '#D6D6BE', 'stroke-width' => '6', :fill => 'none', 'stroke-linecap' => 'round', 'stroke-linejoin' => 'round' }

    %g#eyeOpen
      %ellipse{ :cx => '10.5', :cy => '11.5', :fill => '#FFFFFF', :rx => '10.5', :ry => '11.5' }
      %ellipse{ :cx => '10', :cy => '11', :fill => '#4A4342', :rx => '7', :ry => '8' }
      %circle{ :cx => '6', :cy => '8', :fill => '#FFFFFF', :r => '4' }
      %circle{ :cx => '14.5', :cy => '17.5', :fill => '#FFFFFF', :r => '3.5' }

    %g#eyeClosed
      %path#eyeClosedTop{:d => 'M0,0 L8,5'}
      %path#eyeClosedBottom{:d => 'M8,5 L0,10'}

  %g{ :fill => 'none', 'fill-rule' => 'evenodd', :stroke => 'none', 'stroke-width' => '1' }

    %g#vaporWrapper{ :transform => 'translate(365, 85)' }
      %use{ 'xlink:href' => '#wave' }
      %use{ 'xlink:href' => '#wave', :transform => 'translate(28, 0)' }
      %use{ 'xlink:href' => '#wave', :transform => 'translate(56, 0)' }

    %path#shadow{ :d => 'M364,346 L443,346', :stroke => '#C6C39A', 'stroke-linecap' => 'round', 'stroke-width' => '8' }

    %g
      %use{ 'xlink:href'=> '#foot' }
      %use{ 'xlink:href'=> '#foot', :transform => 'translate(20, 0)' }

    %g
      %path#cupHandleShape{ :d => 'M456.068833,278.354024 L467.467696,278.354024 C486.549917,278.354024 487.600989,251.846024 467.467696,251.846024 L456.068833,251.846024 L456.068833,235.278523 L472.885983,235.278523 C506.866127,240.765221 503.336232,293.786731 472.885983,296.026024 L456.068833,296.026024 L456.068833,278.354024 Z', :fill => '#D6D6BE' }

    %g
      %use{ :fill => '#EAE6D8', 'xlink:href' => '#cupBodyShape' }
      %path#cupShadowShape{ 'clip-path' => 'url(#clipPathCup)', :d => 'M431,160 C443,210 444,275 447,326 L470,320 L455,157 L431,160 Z', :fill => '#D6D6BE' }

    %g#face{ :transform => 'translate(360, 265)' }
      %g#eyesOpen.hide
        %use{ 'xlink:href' => '#eyeOpen' }
        %use{ 'xlink:href' => '#eyeOpen', :transform => 'translate(51, 0)' }
      %g#eyesClosed{ :stroke => '#4A4342', 'stroke-linecap' => 'round', 'stroke-linejoin' => 'round', 'stroke-width' => '4', :transform => 'translate(6.000000, 6.000000)'}
        %use{ 'xlink:href' => '#eyeClosed' }
        %use{ 'xlink:href' => '#eyeClosed', :transform => 'translate(60, 0) scale(-1, 1)' }
      %path#mouthClosed{ :d => 'M18,29.25 L53,29.25', :stroke => '#4A4342', 'stroke-linecap' => 'round', 'stroke-width' => '5' }
      %circle#mouthOpen.hide{ :cx => '30', :cy => '29', :fill => '#4A4342', :r => '7' }

    %g
      %use#drop1{ 'xlink:href' => '#drop' }
      %use#drop2{ 'xlink:href' => '#drop' }
      %use#drop3{ 'xlink:href' => '#drop' }
      %use#drop4{ 'xlink:href' => '#drop' }

    %g#cupTop.hide
      %path{ :d => 'M69,118 C30.8923523,118 0,106.807119 0,93 C0,79.1928813 30.8923523,68 69,68 C107.107648,68 138,79.1928813 138,93 C138,106.807119 107.107648,118 69,118 Z M68,111 C101.68937,111 129,102.717268 129,92.5 C129,82.2827321 101.68937,74 68,74 C34.3106303,74 7,82.2827321 7,92.5 C7,102.717268 34.3106303,111 68,111 Z', :fill => '#F7F7E7' }
      %ellipse{ :cx => '68', :cy => '92.5', :fill => '#D6D6BE', :rx => '61', :ry => '18.5' }
      %g{ 'clip-path' => 'url(#clipPathCupTop)' }
        %path#coffeeShape{ :d => 'M58.9464219,116.999785 C92.6357916,116.999785 124.189078,101.133887 119.946422,98.4997847 C71.0179836,96.9107736 64.8973737,81.2309941 39.7415583,79.6253687 C14.5857429,78.0197434 2,90.7970315 2,98.4997847 C2,108.717053 25.2570521,116.999785 58.9464219,116.999785 Z', :fill => '#4A4342', :transform => 'translate(10, 10)' }
        %path#coffeeDrop1{ :d => 'M101.5,106 C103.985281,106 106,102.642136 106,98.5 C106,94.3578644 103.985281,91 101.5,91 C99.0147186,91 97,94.3578644 97,98.5 C97,102.642136 99.0147186,106 101.5,106 Z', :fill => '#4A4342' }
        %path#coffeeDrop2{ :d => 'M21,126 C24.3137085,126 27,123.313708 27,120 C27,116.686292 24.3137085,114 21,114 C17.6862915,114 15,116.686292 15,120 C15,123.313708 17.6862915,126 21,126 Z', :fill => '#4A4342' }
        %path#coffeeDrop3{ :d => 'M32,128 C34.209139,128 36,126.209139 36,124 C36,121.790861 34.209139,120 32,120 C29.790861,120 28,121.790861 28,124 C28,126.209139 29.790861,128 32,128 Z', :fill => '#4A4342' }
      
.credits
  %span
    Original by&nbsp;
    %a{ :href => 'https://www.behance.net/gallery/43627687/Moody-Foodies-Animated-Stickers', :target => '_blank', :rel => 'noopener noreferrer' } Jonas Mosesson
  %span
    by&nbsp;
    %a{ :href => 'https://twitter.com/pixelia_me', :target => '_blank', :rel => 'noopener noreferrer', :title => 'Noel Delgado' }
      %svg{ :height => '12', :viewBox => '0 0 57 30' }
        %path{ :stroke => 'none', :d => 'M28.1312,9.5341 C29.7966,9.5341 32.1025,10.627 34.248,12.368 C49.3297,11.5836 53.8793,-0.4796 55.5773,0.6783 C57.8326,3.2476 50.8638,16.3535 39.4,19.088 C39.8655,20.2628 40.1364,21.4786 40.1364,22.6983 C40.1364,25.9478 38.837,26.7409 36.7281,28.8974 L36.704,28.824 C36.4799,29.0276 36.208,29.2318 35.8945,29.4 C35.8945,29.4 36.1346,27.0065 34.9341,26.7672 C34.9341,26.7672 34.3739,27.4054 33.0133,27.2459 C32.8532,25.8896 32.293,25.4109 32.1329,25.3311 C31.4126,25.4109 30.9324,26.5278 30.132,26.5278 C29.8,26.1969 29.5184,25.5615 29.312,24.972 C29.0201,25.4221 28.6036,26.1128 28.2512,26.2885 C27.8796,26.2885 27.1476,25.2858 26.836,24.832 C26.6262,25.4581 26.3285,26.1707 25.9702,26.5278 C25.1699,26.5278 24.6896,25.4109 23.9694,25.3311 C23.8093,25.4109 23.249,25.8896 23.089,27.2459 C21.7284,27.4054 21.1681,26.7672 21.1681,26.7672 C19.9676,27.0065 20.2077,29.4 20.2077,29.4 C19.6122,29.0804 19.1739,28.6307 18.908,28.304 L18.8667,28.3947 C17.1544,26.3262 16.1259,25.5896 16.1259,22.6983 C16.1259,21.4938 16.3637,20.2895 16.784,19.128 C5.2094,16.4922 -1.8448,3.2615 0.4227,0.6783 C2.119,-0.4785 6.6627,11.5578 21.708,12.364 C23.8143,10.6244 26.1724,9.5341 28.1312,9.5341 Z M28.8514,20.3048 C28.8514,20.3048 30.4121,21.7409 32.213,21.7409 C34.0137,21.7409 35.3343,19.3474 35.3343,19.3474 L28.8514,20.3048 Z M20.6879,19.3474 C20.6879,19.3474 22.2486,21.7409 24.0494,21.7409 C25.8502,21.7409 27.1707,20.3048 27.1707,20.3048 L20.6879,19.3474 Z', 'fill-rule' => 'evenodd' }
              
            
!

CSS

              
                :root {
  font-size: 13px;
  font-family: monospace;
  --fg-color: #323230;
  --bg-color: #FDFDF2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--fg-color);
  background-color: var(--bg-color);
}

a {
  color: inherit;
}

svg {
  display: block;
  fill: currentColor;
}

.hide {
  opacity: 0;
}

.credits {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.75rem;
}

.credits > span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 1em;
}
              
            
!

JS

              
                /**
 * Noel Delgado | @pixelia_me
 *
 * Original work by Jonas Mosesson
 * https://www.behance.net/gallery/43627687/Moody-Foodies-Animated-Stickers
 */

const { log } = console;

log('☕️');

const sl = document.querySelector.bind(document);

const internals = {};
internals.setElements = (prefix, array) => array.forEach((p) => (internals[`${prefix}${p}`] = sl(`#${prefix}${p}`)));

// -------

internals.svgRoot = sl('svg');

internals.cupBodyShape = sl('#cupBodyShape');
internals.setElements('cupBodyShape', '10 16 20 23'.split(' '));

internals.cupShadowShape = sl('#cupShadowShape')
internals.setElements('cupShadowShape', '10 16 20 23'.split(' '));

internals.cupHandleShape = sl('#cupHandleShape');
internals.setElements('cupHandleShape', '10 16 20 23'.split(' '));

internals.cupTop = sl('#cupTop');

internals.coffeeShape = sl('#coffeeShape');
internals.setElements('coffeeShape', '02 04 06 08 10 12 14 16 17 18 19 20 23 25 27'.split(' '));

internals.setElements('coffeeDrop', [1, 2, 3])

internals.footShape = sl('#foot');
internals.setElements('footShape', '10 16 20 23'.split(' '));

internals.face = sl('#face');
internals.eyesOpen = sl('#eyesOpen');
internals.eyesClosed = sl('#eyesClosed');
internals.eyeClosedTop = sl('#eyeClosedTop');
internals.eyeClosedBottom = sl('#eyeClosedBottom');
internals.mouthA = sl('#mouthClosed');
internals.mouthB = sl('#mouthOpen');

internals.drop1 = sl('#drop1');
internals.drop2 = sl('#drop2');
internals.drop3 = sl('#drop3');
internals.drop4 = sl('#drop4');
internals.vaporWrapper = sl('#vaporWrapper');

internals.shadow = sl('#shadow');
internals.wave = sl('#wave');

// -------

TweenLite.defaultEase = Power0.easeNone;
TweenMax.set([internals.cupBodyShape,  internals.face, internals.eyesClosed, internals.cupTop], { transformOrigin: '50% 100%' });
TweenMax.set(internals.cupTop, { autoAlpha: 1, x: 317, y: 86, rotation: -10 });
TweenMax.set(internals.face, { x: 356, y: 262, rotation: -4 });
TweenMax.set(internals.eyesOpen, { autoAlpha: 0 });
TweenMax.set(internals.eyeClosedTop, { transformOrigin: '100% 100%' });
TweenMax.set(internals.eyeClosedBottom, { transformOrigin: '100% 0%' });
TweenMax.set(internals.mouthB, { autoAlpha: 0, transformOrigin: '-10% center' });
TweenMax.set(internals.drop1, { transformOrigin: '50% 0', x: 428, y: 258, scale: 0 });
TweenMax.set(internals.drop2, { transformOrigin: '50% 0', x: 342, y: 239, scale: 0 });
TweenMax.set(internals.drop3, { transformOrigin: '50% 0', x: 438, y: 230, scale: 0 });
TweenMax.set(internals.drop4, { transformOrigin: '50% 0', x: 383, y: 219, scale: 0 });
TweenMax.set(internals.shadow, { transformOrigin: 'center' });

// -------

const createVaporWave = (svg, wave) => {
  // https://codepen.io/osublake/pen/957a0e49b1690d1946cba33e0e52f885?editors=0010
  const height = 56;
  const amplitude = 4;
  const frequency = 4;
  const segments  = 8;
  const interval  = height / segments;

  for (let i = 0; i <= segments; i++) {

    const norm  = i / segments;
    const point = wave.points.appendItem(svg.createSVGPoint());

    point.x = amplitude / 2;
    point.y = i * interval;

    TweenMax.to(point, 0.5, { x: -point.x, repeat: -1, yoyo: true }).progress(norm * frequency);
  }
}

const getMorphTimeline = (shapeName) => new TimelineMax()
  .to(internals[shapeName],   1, { morphSVG: internals[shapeName + '10'] })
  .to(internals[shapeName], 0.6, { morphSVG: internals[shapeName + '16'] })
  .to(internals[shapeName], 0.4, { morphSVG: internals[shapeName + '20'] })
  .to(internals[shapeName], 0.3, { morphSVG: internals[shapeName + '23'] })
  .to(internals[shapeName], 0.7, { morphSVG: internals[shapeName] })

const getTimelineCupBodyMorph = () => getMorphTimeline('cupBodyShape');
const getTimelineCupShadowMorph = () => getMorphTimeline('cupShadowShape');
const getTimelineCupHandleMorph = () => getMorphTimeline('cupHandleShape');
const getTimelineFeetMorph = () => getMorphTimeline('footShape');

const getTimelineCupTopPosition = () => new TimelineMax()
  .to(internals.cupTop,   1, { x: 335, y: 90, rotation: 9 })
  .to(internals.cupTop, 0.6, { x: 320, y: 116, rotation: -9, scaleX: 1.06 })
  .to(internals.cupTop, 0.4, { x: 329, y: 39, rotation: 3, scaleX: 1 })
  .to(internals.cupTop, 0.3, { x: 334, y: 108, rotation: 7 })
  .to(internals.cupTop, 0.7, { x: 317, y: 86, rotation: -10 })

const getTimelineCoffeeMorph = () => new TimelineMax()
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape02 }, 0)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape04 }, 0.2)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape06 }, 0.4)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape08 }, 0.6)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape10 }, 0.8)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape12 }, 1)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape14 }, 1.2)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape16 }, 1.4)
  .to(internals.coffeeShape, 0.1, { morphSVG: internals.coffeeShape17 }, 1.6)
  .to(internals.coffeeShape, 0.1, { morphSVG: internals.coffeeShape18 }, 1.7)
  .to(internals.coffeeShape, 0.1, { morphSVG: internals.coffeeShape19 }, 1.8)
  .to(internals.coffeeShape, 0.1, { morphSVG: internals.coffeeShape20 }, 1.9)
  .to(internals.coffeeShape, 0.3, { morphSVG: internals.coffeeShape23 }, 2)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape25 }, 2.3)
  .to(internals.coffeeShape, 0.2, { morphSVG: internals.coffeeShape27 }, 2.5)
  .to(internals.coffeeShape, 0.3, { morphSVG: internals.coffeeShape }, 2.7)

const getTimelineCoffeeDrops = () => new TimelineMax()
  .to(internals.coffeeDrop1, 0.2, { y: -26, scaleY: 0.7 }, 0)
  .to(internals.coffeeDrop1, 0.2, { y: -38, scaleY: .6 }, 0.2)
  .to(internals.coffeeDrop1, 0.2, { y: -20, scaleY: 0.7 }, 0.4)
  .to(internals.coffeeDrop1, 0.2, { y: 20, scaleY: 0.7 }, 0.6)
  .to(internals.coffeeDrop2, 0.2, { x: 10, y: -40 }, 1.8)
  .to(internals.coffeeDrop2, 0.2, { x: 20, y: -62 }, 2)
  .to(internals.coffeeDrop2, 0.2, { x: 60, y: -92, scale: 1.4 }, 2.2)
  .to(internals.coffeeDrop2, 0.2, { x: 80, y: -76, scaleX: 1.4, scaleY: 1.6 }, 2.4)
  .to(internals.coffeeDrop2, 0.2, { x: 86, y: -32, scale: 1.4 }, 2.6)
  .to(internals.coffeeDrop2, 0.2, { x: 86, y: 0, scale: 1.4 }, 2.8)
  .to(internals.coffeeDrop3, 0.2, { x: 26, y: -62, scaleY: 1.2 }, 2.2)
  .to(internals.coffeeDrop3, 0.2, { x: 54, y: -92, scaleY: 1.2 }, 2.4)
  .to(internals.coffeeDrop3, 0.2, { x: 66, y: -62, scaleY: 1.2 }, 2.6)
  .to(internals.coffeeDrop3, 0.2, { x: 70, y: -22, scaleY: 1.2 }, 2.8)

const getTimelineFace = () => new TimelineMax()
  .to(internals.face, 1, { x: 356, y: 262, rotation: 4 })
  .set(internals.eyesClosed, { autoAlpha: 0 }, .5)
  .set(internals.eyesOpen, { autoAlpha: 1 }, .5)
  .to(internals.mouthA, .3, { scaleX: 0.4 }, .5)
  .set(internals.mouthA, { autoAlpha: 0 }, .8)
  .set(internals.mouthB, { autoAlpha: 1, scale: 0.7 }, .8)
  .to(internals.mouthB, .5, { scale: 1 }, .8)
  .set(internals.eyesClosed, { autoAlpha: 1 }, 1.2)
  .set(internals.eyesOpen, { autoAlpha: 0 }, 1.2)
  .to(internals.face, .6, { x: 356, y: 274, rotation: -4 }, 1)
  .to(internals.mouthB, .4, { scale: .8 }, 1.3)
  .to(internals.mouthB, .2, { scaleX: .7 }, 1.7)
  .to(internals.eyesClosed, .4, { scaleY: .8 }, 1.2)
  .to(internals.face, .4, { x: 358, y: 218, rotation: 0 }, 1.6)
  .set(internals.eyesClosed, { scaleY: 1 })
  .set(internals.mouthA, { autoAlpha: 1 })
  .set(internals.mouthB, { autoAlpha: 0 })
  .to(internals.face, .3, { x: 360, y: 264, rotation: 3 }, 2)
  .to(internals.mouthA, .2, { scaleX: 1 }, 2)
  .to(internals.face, .7, { x: 356, y: 262, rotation: -4 }, 2.3)
  .to(internals.eyeClosedTop, .1, { rotation: -32 }, 2.8)
  .to(internals.eyeClosedBottom, .1, { rotation: 32 }, 2.8)
  .to(internals.eyeClosedTop, .1, { rotation: 0 }, 2.9)
  .to(internals.eyeClosedBottom, .1, { rotation: 0 }, 2.9)

const getTimelineFaceDrops = () => new TimelineMax()
  .to(internals.drop1, 0.8, { x: 434, y: 282, scale: 1 }, 0.2)
  .to(internals.drop1, 0.6, { x: 433, y: 317, scale: 0 })
  .set(internals.drop1, { x: 428, y: 258, scale: 0 }, 3)
  .to(internals.drop2, 0.6, { x: 340, y: 262, scale: 0.9 }, 0.6)
  .to(internals.drop2, 0.4, { x: 337, y: 300, scale: 0 }, 1.2)
  .set(internals.drop2, { x: 342, y: 239, scale: 0 }, 3)
  .to(internals.drop3, 0.7, { x: 434, y: 233, scale: 1 }, 1)
  .to(internals.drop3, 0.4, { x: 438, y: 246, scale: 0 }, 1.7)
  .set(internals.drop3, { x: 438, y: 230, scale: 0 }, 3)
  .to(internals.drop4, 0.2, { x: 394, y: 200, scale: 0.5 }, 1.7)
  .to(internals.drop4, 0.2, { x: 394, y: 200, scale: 0.8 }, 1.9)
  .to(internals.drop4, 0.2, { x: 394, y: 240, scale: 1 }, 2.1)
  .to(internals.drop4, 0.7, { x: 384, y: 270, scale: 0 }, 2.3)

const getTimelineVaporPosition = () => new TimelineMax()
  .to(internals.vaporWrapper, 1.3, { y: 104 }, 0)
  .to(internals.vaporWrapper, 0.2, { y: 110 }, 1.3)
  .to(internals.vaporWrapper, 0.1, { y: 120 }, 1.5)
  .to(internals.vaporWrapper, 0.2, { y: 100 }, 1.6)
  .to(internals.vaporWrapper, 0.2, { y: 77 }, 1.8)
  .to(internals.vaporWrapper, 0.4, { y: 100 }, 2)
  .to(internals.vaporWrapper, 0.6, { y: 85 }, 2.4)

const getTimelineShadow = () => new TimelineMax()
  .to(internals.shadow, .4, { scaleX: 0.6 })
  .to(internals.shadow, .3, { scaleX: 1 })

// -------

createVaporWave(internals.svgRoot, internals.wave);

internals.tl = new TimelineMax({ repeat: -1 })
  .add(getTimelineCupBodyMorph(), 0)
  .add(getTimelineCupShadowMorph(), 0)
  .add(getTimelineCupHandleMorph(), 0)
  .add(getTimelineFeetMorph(), 0)
  .add(getTimelineCupTopPosition(), 0)
  .add(getTimelineCoffeeMorph(), 0)
  .add(getTimelineCoffeeDrops(), 0)
  .add(getTimelineFace(), 0)
  .add(getTimelineFaceDrops(), 0)
  .add(getTimelineVaporPosition(), 0)
  .add(getTimelineShadow(), 1.7)
              
            
!
999px

Console