Coffee anyone?

FEATURED

In this example below you will see how to do a Coffee anyone? with some HTML / CSS and Javascript

Morphing gooey buttons. SVG stretched buttons with drop shadow + Gaussian blur to create an extra stretched gooey effect.

Thumbnail
This awesome code was written by Mikael Ainalem, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Mikael Ainalem ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  Coffee anyone?
  <svg viewBox="0 0 100 100" width="300" height="300">
    <defs>
      <filter id="gooeyness1">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 10 -5" result="gooey" />
        <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
      </filter>
      <filter id="gooeyness2">
        <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 5 -2" result="gooey" />
        <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
      </filter>
    </defs>
    <g class="shadow">
      <path
            d="m 64.571068,55.499996 c 0,4.142136 -1.678932,7.892136 -4.393398,10.606602 -2.714466,2.714466 -6.464466,4.393398 -10.606602,4.393398 -4.142136,0 -7.892136,-1.678932 -10.606602,-4.393398 -2.714466,-2.714466 -4.393398,-6.464466 -4.393398,-10.606602 0,-4.142136 2.562815,-11.642136 4.393398,-14.356602 2.146369,-3.182727 6.464466,-12.143398 10.606602,-12.143398 4.142136,0 8.460233,8.960671 10.606602,12.143398 1.830583,2.714466 4.393398,10.214466 4.393398,14.356602 z"
            style="fill:#444;stroke:none;stroke-width:1.35028005;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;" />
      <path
            style="fill:#444;stroke:none;stroke-width:1.35028005;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;"
            d="m 58.560284,63.063767 c -2.375831,3.393039 -5.902044,5.501863 -9.682558,6.16847 -3.780514,0.666607 -7.81533,-0.109004 -11.208369,-2.484836 -3.393039,-2.375832 -5.501864,-5.902044 -6.16847,-9.682558 -0.666607,-3.780514 0.109004,-7.81533 2.484836,-11.208369 2.375831,-3.393039 8.77699,-8.06671 11.833469,-9.240291 3.58374,-1.37603 12.260548,-6.239424 15.653587,-3.863592 3.393039,2.375832 1.790587,12.192742 1.723253,16.030986 -0.05743,3.27354 -2.259916,10.887151 -4.635748,14.28019 z" />
      <path
            d="m 65.156413,45.856474 c 2.375832,3.393039 3.151443,7.427855 2.484836,11.208369 -0.666606,3.780514 -2.775431,7.306726 -6.16847,9.682558 -3.393039,2.375832 -7.427855,3.151443 -11.208369,2.484836 -3.780514,-0.666607 -7.306727,-2.775431 -9.682558,-6.16847 -2.375832,-3.393039 -4.57832,-11.00665 -4.635748,-14.28019 -0.06733,-3.838244 -1.669786,-13.655154 1.723253,-16.030986 3.393039,-2.375832 12.069847,2.487562 15.653587,3.863592 3.056479,1.173581 9.457638,5.847252 11.833469,9.240291 z"
            style="fill:#444;stroke:none;stroke-width:1.35028005;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;" />
      <path
            style="fill:#444;stroke:none;stroke-width:2.02541995;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;"
            d="m 72.5,50 c 0,6.213203 -2.518398,11.838203 -6.590097,15.909903 -4.0717,4.071699 -9.6967,6.590097 -15.909903,6.590097 -6.213203,0 -11.838203,-2.518398 -15.909903,-6.590097 -4.071699,-4.0717 -6.590097,-9.6967 -6.590097,-15.909903 0,-6.213203 2.518398,-11.838203 6.590097,-15.909903 4.0717,-4.071699 9.6967,-6.590097 15.909903,-6.590097 6.213203,0 11.838203,2.518398 15.909903,6.590097 4.071699,4.0717 6.590097,9.6967 6.590097,15.909903 z" />
    </g>
    <g class="paths">
      <path
            class="button"
            d="m 64.571068,55.499996 c 0,4.142136 -1.678932,7.892136 -4.393398,10.606602 -2.714466,2.714466 -6.464466,4.393398 -10.606602,4.393398 -4.142136,0 -7.892136,-1.678932 -10.606602,-4.393398 -2.714466,-2.714466 -4.393398,-6.464466 -4.393398,-10.606602 0,-4.142136 2.562815,-11.642136 4.393398,-14.356602 2.146369,-3.182727 6.464466,-12.143398 10.606602,-12.143398 4.142136,0 8.460233,8.960671 10.606602,12.143398 1.830583,2.714466 4.393398,10.214466 4.393398,14.356602 z"
            style="stroke:none;stroke-width:1.35028005;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;" />
      <path
            class="button"
            style="stroke:none;stroke-width:1.35028005;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;"
            d="m 58.560284,63.063767 c -2.375831,3.393039 -5.902044,5.501863 -9.682558,6.16847 -3.780514,0.666607 -7.81533,-0.109004 -11.208369,-2.484836 -3.393039,-2.375832 -5.501864,-5.902044 -6.16847,-9.682558 -0.666607,-3.780514 0.109004,-7.81533 2.484836,-11.208369 2.375831,-3.393039 8.77699,-8.06671 11.833469,-9.240291 3.58374,-1.37603 12.260548,-6.239424 15.653587,-3.863592 3.393039,2.375832 1.790587,12.192742 1.723253,16.030986 -0.05743,3.27354 -2.259916,10.887151 -4.635748,14.28019 z" />
      <path
            class="button"
            d="m 65.156413,45.856474 c 2.375832,3.393039 3.151443,7.427855 2.484836,11.208369 -0.666606,3.780514 -2.775431,7.306726 -6.16847,9.682558 -3.393039,2.375832 -7.427855,3.151443 -11.208369,2.484836 -3.780514,-0.666607 -7.306727,-2.775431 -9.682558,-6.16847 -2.375832,-3.393039 -4.57832,-11.00665 -4.635748,-14.28019 -0.06733,-3.838244 -1.669786,-13.655154 1.723253,-16.030986 3.393039,-2.375832 12.069847,2.487562 15.653587,3.863592 3.056479,1.173581 9.457638,5.847252 11.833469,9.240291 z"
            style="stroke:none;stroke-width:1.35028005;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;" />
      <path
            class="button button-main"
            style="stroke:none;stroke-width:2.02541995;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;"
            d="m 72.5,50 c 0,6.213203 -2.518398,11.838203 -6.590097,15.909903 -4.0717,4.071699 -9.6967,6.590097 -15.909903,6.590097 -6.213203,0 -11.838203,-2.518398 -15.909903,-6.590097 -4.071699,-4.0717 -6.590097,-9.6967 -6.590097,-15.909903 0,-6.213203 2.518398,-11.838203 6.590097,-15.909903 4.0717,-4.071699 9.6967,-6.590097 15.909903,-6.590097 6.213203,0 11.838203,2.518398 15.909903,6.590097 4.071699,4.0717 6.590097,9.6967 6.590097,15.909903 z" />
    </g>
  </svg>
  <svg class="icon-big" viewBox="0 0 100 100">
    <path class="path1"
          style="opacity:0.98999999;fill:none;fill-rule:evenodd;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;"
          d="m 44.723054,16.479541 c 0.92549,1.65178 1.268192,2.795163 1.18513,4.179142 -0.08306,1.383979 -1.741801,2.64392 -1.746507,4.303892 -0.0047,1.659972 0.998004,3.118762 0.998004,3.118762" />
    <path class="path2"
          d="m 45.159681,28.081337 c 0,0 -1.002704,-1.45879 -0.998004,-3.118762 0.0047,-1.659972 1.663447,-2.919913 1.746507,-4.303892 0.08306,-1.383979 -0.25964,-2.527362 -1.18513,-4.179142"
          style="opacity:0.98999999;fill:none;fill-rule:evenodd;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;" />
    <path
          class="path-cup"
          style="fill:none;fill-fill-rule:evenodd;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 33.080286,47.337558 c 0,0 0.433879,12.382418 1.350852,16.734298 0.916973,4.35188 3.992016,10.978044 3.992016,10.978044" />
    <g
       id="g1590"
       style="fill:#fff">
      <path class="path-cup"
            d="m 70.8,43 c -1.5,-1.7 -3.6,-2.8 -5.8,-3.1 0,-1.2 0,-2.2 -0.1,-3.1 -0.1,-2.2 -1.8,-3.9 -4,-3.9 h -31.5 c -2.2,0 -4,1.7 -4,3.9 -0.3,9.5 -0.3,32.8 7,43.7 1.1,1.7 3.1,2.7 5.2,2.7 h 15.2 c 2.1,0 4,-1 5.2,-2.7 1.2,-1.8 2.3,-4.1 3.1,-6.5 h 0.7 c 4.9,0 9.1,-3.7 9.6,-8.5 l 1.8,-14.9 c 0.3,-2.8 -0.6,-5.5 -2.4,-7.6 z m -15.4,35.8 c -0.6,0.9 -1.6,1.4 -2.7,1.4 h -15.2 c -1.1,0 -2.1,-0.5 -2.7,-1.4 -7,-10.5 -6.7,-34.7 -6.5,-41.9 0,-0.5 0.5,-1 1,-1 h 31.5 c 0.6,0 1,0.4 1,1 0.4,7.2 0.6,31.4 -6.4,41.9 z m 14.8,-28.6 -1.8,14.9 c -0.4,3.3 -3.2,5.7 -6.4,5.9 2.5,-9 3,-20.1 3,-28 1.4,0.3 2.6,1 3.5,2.1 1.3,1.4 1.9,3.2 1.7,5.1 z"
            id="path1584"
            inkscape:connector-curvature="0"
            style="fill:#fff" />
      <path class="path-cup"
            d="m 33.1,42.8 c 0,0 0,0 0,0 0.8,0 1.5,-0.7 1.5,-1.5 0,-1.1 0,-1.7 0,-1.7 0,-0.8 -0.6,-1.5 -1.4,-1.6 -0.8,0 -1.5,0.6 -1.6,1.4 0,0 0,0.6 0,1.8 0,0.9 0.7,1.6 1.5,1.6 z"
            id="path1588"
            inkscape:connector-curvature="0"
            style="fill:#fff" />
      </svg>
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-coffee" viewBox="0 0 100 100" width="100" height="100"><g fill="#fff"><path d="M43.8 28.85c.3.5.8.7 1.3.7.3 0 .5-.1.8-.2.7-.4.9-1.4.5-2.1 0 0-1.3-2.2-.1-3.8 2.5-3.3.2-7 .1-7.2-.4-.7-1.4-.9-2.1-.5-.7.4-.9 1.4-.5 2.1 0 0 1.3 2.1.1 3.7-2.5 3.4-.2 7.2-.1 7.3zM70.8 43.45c-1.5-1.7-3.6-2.8-5.8-3.1 0-1.2 0-2.2-.1-3.1-.1-2.2-1.8-3.9-4-3.9H29.4c-2.2 0-4 1.7-4 3.9-.3 9.5-.3 32.8 7 43.7 1.1 1.7 3.1 2.7 5.2 2.7h15.2c2.1 0 4-1 5.2-2.7 1.2-1.8 2.3-4.1 3.1-6.5h.7c4.9 0 9.1-3.7 9.6-8.5l1.8-14.9c.3-2.8-.6-5.5-2.4-7.6zm-15.4 35.8c-.6.9-1.6 1.4-2.7 1.4H37.5c-1.1 0-2.1-.5-2.7-1.4-7-10.5-6.7-34.7-6.5-41.9 0-.5.5-1 1-1h31.5c.6 0 1 .4 1 1 .4 7.2.6 31.4-6.4 41.9zm14.8-28.6l-1.8 14.9c-.4 3.3-3.2 5.7-6.4 5.9 2.5-9 3-20.1 3-28 1.4.3 2.6 1 3.5 2.1 1.3 1.4 1.9 3.2 1.7 5.1z"/><path d="M34.6 46.75c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5c.1 9.1 1 21.5 4.3 28.9.3.6.8.9 1.4.9.2 0 .4 0 .6-.1.8-.3 1.1-1.2.7-2-3.2-7.3-3.9-20.5-4-27.7zM33.1 43.25c.8 0 1.5-.7 1.5-1.5v-1.7c0-.8-.6-1.5-1.4-1.6-.8 0-1.5.6-1.6 1.4v1.8c0 .9.7 1.6 1.5 1.6z"/></g></svg>
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-espresso" viewBox="0 0 100 100" width="100" height="100"><g fill="#fff"><path d="M69.5 54.464c-.2-2.6-2-4.8-4.5-5.4.2-1 .3-2 .4-3.1 0-.4-.1-.8-.4-1.1-.3-.3-.7-.5-1.1-.5H30c-.4 0-.8.2-1.1.5-.3.3-.4.7-.4 1.1.6 11.7 8.7 20.8 18.4 20.8 5.3 0 10-2.7 13.4-7 1 .7 2.1 1 3.3 1h.4c3.3-.1 5.7-3 5.5-6.3zm-22.6 9.4c-7.7 0-14.2-7.1-15.3-16.4h30.6c-1.1 9.3-7.6 16.4-15.3 16.4zm16.9-6c-.6 0-1.3-.1-1.8-.5 1-1.6 1.7-3.4 2.3-5.3 1.2.3 2.1 1.4 2.1 2.7.2 1.6-1 3-2.6 3.1zM45.7 37.764c.3.5.8.7 1.3.7.3 0 .5-.1.8-.2.7-.4.9-1.3.5-2.1 0 0-1.3-2.3-.1-3.9 2.4-3.3.2-7 .1-7.2-.4-.7-1.4-.9-2.1-.5-.7.4-.9 1.4-.5 2.1 0 0 1.3 2.2.1 3.8-2.5 3.3-.2 7.1-.1 7.3zM56.1 69.364H37.4c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h18.7c.8 0 1.5-.7 1.5-1.5s-.6-1.5-1.5-1.5z"/><path d="M45.9 58.364c-2.1-.5-3.9-1.6-5.4-3.2-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1 1.9 2 4.2 3.3 6.8 4h.4c.7 0 1.3-.5 1.5-1.1 0-.8-.4-1.6-1.2-1.8zM38.3 52.264c-.4-.8-.6-1.3-.6-1.4-.2-.8-1.1-1.2-1.9-1-.8.2-1.2 1.1-1 1.9 0 .1.3.8.8 1.8.3.5.8.8 1.3.8.2 0 .5-.1.7-.2.8-.3 1.1-1.2.7-1.9z"/></g></svg>
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-latte" viewBox="0 0 100 100" width="100" height="100"><g fill="#fff"><path d="M47.7 24.813c.3.5.8.7 1.3.7.3 0 .5-.1.8-.2.7-.4.9-1.4.5-2.1 0-.1-1.1-1.8-.1-3.1 1.8-2.3.9-5.1.1-6.4-.4-.7-1.4-.9-2.1-.5-.7.4-.9 1.4-.5 2.1 0 0 1 1.7.1 3-1.8 2.4-.9 5.2-.1 6.5zM70.5 45.413l-.6-5.8c-.1-1.2-1.1-2.1-2.4-2.1h-2.7l-1-5c-.3-1.4-1.5-2.5-3-2.5H37.2c-1.5 0-2.7 1-3 2.5l-1 5h-2.7c-1.2 0-2.2.9-2.4 2.1l-.6 5.8c-.1.7.1 1.3.6 1.8.4.5 1.1.8 1.8.8h1.9l1.9 39.6c0 .8.7 1.4 1.5 1.4h27.7c.8 0 1.5-.6 1.5-1.4l1.9-39.6h1.9c.7 0 1.3-.3 1.8-.8.3-.5.6-1.1.5-1.8zm-33.3-12.4H61l.9 4.5H36.2zm24.2 53.1H36.6l-1.9-38.1h28.5zm-30.8-41.1l.5-4.5H67l.5 4.5z"/></g></svg>
    </div>

/*Downloaded from https://www.codeseek.co/ainalem/coffee-anyone-LryMQQ */
    @import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
body {
  align-items: center;
  display: flex;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 2em;
  height: 100vh;
  justify-content: center;
  margin: 0;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
}
.shadow {
  filter: url('#gooeyness2');
  opacity: .2;
  transform: translateY(3px);
}
.paths {
  filter: url('#gooeyness1');
}
.button {
  cursor: pointer;
  fill:#005c94;
  -webkit-tap-highlight-color: transparent;
  transition: fill 100ms;
}
.button:active {
  fill:#006ca9;
}
.icon-big {
  bottom: 104px;
  left: 100px;
  pointer-events: none;
  position: absolute;
  width: 100px;
}
.path-cup {
  transform-origin: 50%;
}
.icon {
  height: 50px;
  pointer-events: none;
  position: absolute;
  width: 50px;
}
.icon-coffee {
  bottom: 82px;
  left: 33px;
}
.icon-espresso {
  bottom: 81px;
  left: 127px;
}
.icon-latte {
  bottom: 83px;
  left: 220px;
}



/*Downloaded from https://www.codeseek.co/ainalem/coffee-anyone-LryMQQ */
    const svg = document.querySelector('svg')
const from = [
  "m 64.571068,55.499996 c 0,4.142136 -1.678932,7.892136 -4.393398,10.606602 -2.714466,2.714466 -6.464466,4.393398 -10.606602,4.393398 -4.142136,0 -7.892136,-1.678932 -10.606602,-4.393398 -2.714466,-2.714466 -4.393398,-6.464466 -4.393398,-10.606602 0,-4.142136 2.562815,-11.642136 4.393398,-14.356602 2.146369,-3.182727 6.464466,-12.143398 10.606602,-12.143398 4.142136,0 8.460233,8.960671 10.606602,12.143398 1.830583,2.714466 4.393398,10.214466 4.393398,14.356602 z",
  "m 58.560284,63.063767 c -2.375831,3.393039 -5.902044,5.501863 -9.682558,6.16847 -3.780514,0.666607 -7.81533,-0.109004 -11.208369,-2.484836 -3.393039,-2.375832 -5.501864,-5.902044 -6.16847,-9.682558 -0.666607,-3.780514 0.109004,-7.81533 2.484836,-11.208369 2.375831,-3.393039 8.77699,-8.06671 11.833469,-9.240291 3.58374,-1.37603 12.260548,-6.239424 15.653587,-3.863592 3.393039,2.375832 1.790587,12.192742 1.723253,16.030986 -0.05743,3.27354 -2.259916,10.887151 -4.635748,14.28019 z",
  "m 65.156413,45.856474 c 2.375832,3.393039 3.151443,7.427855 2.484836,11.208369 -0.666606,3.780514 -2.775431,7.306726 -6.16847,9.682558 -3.393039,2.375832 -7.427855,3.151443 -11.208369,2.484836 -3.780514,-0.666607 -7.306727,-2.775431 -9.682558,-6.16847 -2.375832,-3.393039 -4.57832,-11.00665 -4.635748,-14.28019 -0.06733,-3.838244 -1.669786,-13.655154 1.723253,-16.030986 3.393039,-2.375832 12.069847,2.487562 15.653587,3.863592 3.056479,1.173581 9.457638,5.847252 11.833469,9.240291 z",
  "m 72.5,50 c 0,6.213203 -2.518398,11.838203 -6.590097,15.909903 -4.0717,4.071699 -9.6967,6.590097 -15.909903,6.590097 -6.213203,0 -11.838203,-2.518398 -15.909903,-6.590097 -4.071699,-4.0717 -6.590097,-9.6967 -6.590097,-15.909903 0,-6.213203 2.518398,-11.838203 6.590097,-15.909903 4.0717,-4.071699 9.6967,-6.590097 15.909903,-6.590097 6.213203,0 11.838203,2.518398 15.909903,6.590097 4.071699,4.0717 6.590097,9.6967 6.590097,15.909903 z"
]
const to = [
  "m 61.250001,65 c 0,3.106602 -1.259199,5.919102 -3.295049,7.954951 -2.035849,2.03585 -4.848349,3.295049 -7.954951,3.295049 -3.106602,0 -5.919102,-1.259199 -7.954952,-3.295049 -2.03585,-2.035849 -3.295049,-4.848349 -3.295049,-7.954951 0,-3.106602 1.259199,-5.919102 3.295049,-7.954952 2.03585,-2.035849 4.84835,-3.295048 7.954952,-3.295048 3.106602,0 5.919102,1.259199 7.954951,3.295048 2.03585,2.035851 3.295049,4.84835 3.295049,7.954952 z",
  "m 28.494665,70.625 c -1.553301,2.690396 -4.05005,4.496493 -6.831072,5.241666 -2.781022,0.745172 -5.846318,0.429421 -8.536714,-1.12388 -2.690397,-1.553301 -4.4964932,-4.05005 -5.2416662,-6.831072 -0.7451725,-2.781022 -0.4294211,-5.846318 1.12388,-8.536714 1.5533012,-2.690396 4.0500492,-4.496493 6.8310722,-5.241666 2.781022,-0.745172 5.846318,-0.429421 8.536714,1.12388 2.690396,1.553301 4.496493,4.05005 5.241666,6.831071 0.745172,2.781023 0.429421,5.846319 -1.12388,8.536715 z",
  "m 90.994666,59.375 c 1.553301,2.690396 1.869052,5.755693 1.12388,8.536714 -0.745173,2.781023 -2.55127,5.277771 -5.241666,6.831072 -2.690396,1.553301 -5.755692,1.869052 -8.536715,1.12388 -2.781022,-0.745172 -5.277771,-2.551269 -6.831072,-5.241665 -1.553301,-2.690396 -1.869053,-5.755693 -1.123879,-8.536716 0.745173,-2.781022 2.55127,-5.27777 5.241666,-6.831071 2.690396,-1.553301 5.755692,-1.869052 8.536714,-1.12388 2.781023,0.745173 5.277771,2.55127 6.831072,5.241666 z",
  "m 61.25,33.75 c 0,3.106602 -1.259199,5.919102 -3.295049,7.954951 -2.035849,2.03585 -4.848349,3.295049 -7.954951,3.295049 -3.106602,0 -5.919102,-1.259199 -7.954952,-3.295049 -2.035849,-2.035849 -3.295048,-4.848349 -3.295048,-7.954951 0,-3.106602 1.259199,-5.919102 3.295048,-7.954952 2.03585,-2.035849 4.84835,-3.295048 7.954952,-3.295048 3.106602,0 5.919102,1.259199 7.954951,3.295048 2.03585,2.03585 3.295049,4.84835 3.295049,7.954952 z"
];
const pathsShadow = Array.from(document.querySelectorAll('.shadow path')),
      paths = Array.from(document.querySelectorAll('.paths path')),
      icons = Array.from(document.querySelectorAll('.icon')),
      button = document.querySelector('.button-main'),
      anims = [];
let expanded = false;

icons.forEach((icon) => {
  icon.style.transform = 'scale(0)';
})

function animate(values, expand) {
  anims.forEach((anim) => {
    anim.pause();
  });
  anims.length = 0;

  const easing = expand ? 'easeInQuad' : 'easeOutQuad';
  let anim = null;
  // Buttons
  pathsShadow.forEach((path, i) => {
    anim = anime({
      targets: path,
      d: {
        value: values[i],
        duration: 600,
        easing
      }
    });
    anims.push(anim);
  });
  paths.forEach((path, i) => {
    anim = anime({
      targets: path,
      d: {
        value: values[i],
        duration: 600,
        easing
      }
    });
    anims.push(anim);
  });
  // Big icon
  anim = anime({
    targets: '.icon-big',
    scale: {
      value: expand ? 0.55 : 1,
      duration: 600,
      easing
    },
    translateY: {
      value: expand ? -80 : 0,
      duration: 600,
      easing
    }
  });
  anims.push(anim);
  anim = anime({
    targets: '.path1',
    d: {
      value: expand ? "m 75,75 c 0,0 -9.089452,-9.462765 -15,-15 -5.910548,-5.537235 -15.179982,-15.179982 -20,-20 -4.820018,-4.820018 -11.961819,-11.961819 -15,-15" : "m 45.159681,28.081337 c 0,0 -1.002704,-1.45879 -0.998004,-3.118762 0.0047,-1.659972 1.663447,-2.919913 1.746507,-4.303892 0.08306,-1.383979 -0.25964,-2.527362 -1.18513,-4.179142",
      duration: 400,
      delay: expand ? 200 : 0,
      easing
    }
  });
  anims.push(anim);
  anim = anime({
    targets: '.path2',
    d: {
      value: expand ? "m 75,25 c -6.228628,6.228628 -10.773505,10.773505 -15,15 -4.226495,4.226495 -14.535331,14.535331 -20,20 -5.464669,5.464669 -15,15 -15,15" : "m 44.723054,16.479541 c 0.92549,1.65178 1.268192,2.795163 1.18513,4.179142 -0.08306,1.383979 -1.741801,2.64392 -1.746507,4.303892 -0.0047,1.659972 0.998004,3.118762 0.998004,3.118762",
      duration: 400,
      delay: expand ? 200 : 0,
      easing
    }
  });
  anims.push(anim);
  anim = anime({
    targets: '.path-cup',
    scale: {
      value: expand ? 0 : 1,
      duration: 600,
      easing
    }
  });
  anims.push(anim);
  // Small icons
  anim = anime({
    targets: '.icon',
    scale: {
      value: expand ? 1 : 0,
      duration: 200,
      delay: expand ? 400 : 0,
      easing
    }
  });
  anims.push(anim);
}

button.addEventListener('click', () => {
  if (expanded) {
    animate(from, !expanded);
  } else {
    animate(to, !expanded);
  }

  expanded = !expanded;
})

Comments