Fluid tab bar

fluid-tab-bar.markdown

Fluid tab bar

Remake of Fluid Tab Bar Interaction on dribbble https://dribbble.com/shots/4800174-Fluid-Tab-Bar-Interaction

Icons from the Nuon project

A Pen by Mikael Ainalem on CodePen.

License.

index.html

<svg viewBox="0 0 100 100">
  <rect
        class="drop drop-mobile"
        width="90"
        height="90"
        x="5"
        y="5" />
  <rect
        class="drop drop-desktop"
        width="100"
        height="100"
        x="0"
        y="0" />
  <rect
        class="background"
        width="60"
        height="65"
        x="20"
        y="5"
        ry="0" />
  <path
        style="opacity:1;fill:#fd6465;fill-opacity:1;stroke:none;stroke-width:0.98610508;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:8.39999962;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
        d="m 80,70 v 7.44186 c 0,1.41721 -1.14093,2.55814 -2.55814,2.55814 h -54.88372 c -1.41721,0 -2.55814,-1.14093 -2.55814,-2.55814 v -7.44186 z"
        id="bar" />
  <g class="icon icon-sign icon--expanded">
    <path
          d="m 30.58586,72.799642 -0.413362,-0.388308 c -0.02505,-0.02506 -0.05011,-0.03757 -0.08768,-0.03757 h -2.004175 v -0.588727 c 0,-0.07516 -0.0501,-0.125261 -0.125261,-0.125261 h -0.663883 c -0.07516,0 -0.125261,0.05011 -0.125261,0.125261 v 0.601252 h -0.425888 c -0.07516,0 -0.125261,0.05011 -0.125261,0.125262 v 0.839248 c 0,0.07516 0.0501,0.125261 0.125261,0.125261 h 0.425888 v 0.613779 h -2.004176 c -0.03758,0 -0.06263,0.01253 -0.08768,0.03758 l -0.413361,0.450939 c -0.02505,0.02506 -0.03758,0.06263 -0.03758,0.08768 0,0.03758 0.01253,0.06263 0.03758,0.08768 l 0.413361,0.388309 c 0.02505,0.02506 0.0501,0.03758 0.08768,0.03758 h 2.004176 v 2.379959 c 0,0.07516 0.0501,0.125261 0.125261,0.125261 h 0.663883 c 0.07516,0 0.125261,-0.05011 0.125261,-0.125261 v -2.379959 h 0.425887 c 0.07516,0 0.125261,-0.05011 0.125261,-0.12526 v -0.839249 c 0,-0.07516 -0.0501,-0.125261 -0.125261,-0.125261 h -0.425887 v -0.613778 h 2.004175 c 0.03758,0 0.06263,-0.01252 0.08768,-0.03757 l 0.413362,-0.450939 c 0.02506,-0.02505 0.03758,-0.06263 0.03758,-0.08768 0,-0.03757 -0.01253,-0.07516 -0.03758,-0.100209 z m -3.181629,-0.889353 h 0.413361 v 0.475992 h -0.413361 z m 0.425887,5.511483 h -0.413361 v -2.254698 h 0.413361 z m 0.538622,-2.505219 h -0.425887 -0.663883 -2.079332 l -0.2881,-0.275574 0.300626,-0.313153 h 2.079332 0.663883 0.425887 v 0.588727 z m -0.538622,-0.826723 h -0.413361 v -0.613778 h 0.413361 z m 2.192067,-0.876827 h -2.066806 -0.663883 -0.425887 v -0.5762 h 0.425887 0.663883 2.079332 l 0.2881,0.275574 z"
          />
    <rect class="hitarea" fill="#fff" height="11" y="69" style="opacity: 0;" x="22" width="11"></rect>
  </g>
  <g class="icon icon-drink">
    <path
          d="m 43.735537,71.838984 c -0.03745,-0.06241 -0.112339,-0.07489 -0.17475,-0.03745 l -1.06098,0.698997 c -0.02496,0.01248 -0.04993,0.03745 -0.04993,0.07489 l -0.08737,0.337017 h -1.58523 c -0.07489,0 -0.124821,0.04993 -0.124821,0.124822 v 4.618384 c 0,0.07489 0.04993,0.124821 0.124821,0.124821 h 2.596282 c 0.07489,0 0.124821,-0.04993 0.124821,-0.124821 v -4.618384 c 0,-0.07489 -0.04993,-0.124822 -0.124821,-0.124822 h -0.748928 l 0.06241,-0.224679 1.011052,-0.674034 c 0.06241,-0.03745 0.07489,-0.112339 0.03745,-0.17475 z m -1.435443,1.323105 -0.224678,0.848784 h -1.17332 v -0.848784 z m 0.936159,3.807046 h -2.334157 v -2.70862 h 2.346639 v 2.70862 z m -2.334157,0.561697 v -0.312054 h 2.346639 v 0.312054 z m 2.334157,-4.368743 v 0.848784 h -0.911195 l 0.224679,-0.848784 z"
          />
    <path
          d="m 41.139257,74.884622 0.212195,0.449356 c 0.01248,0.02496 0.03745,0.04993 0.07489,0.06241 0.01248,0 0.02496,0.01248 0.03745,0.01248 0.01248,0 0.03745,0 0.04993,-0.01248 l 0.449357,-0.212197 c 0.02496,-0.01248 0.04993,-0.03745 0.06241,-0.07489 0.01248,-0.02496 0.01248,-0.06241 0,-0.09986 l -0.212196,-0.449356 c -0.02496,-0.06241 -0.09986,-0.08737 -0.162267,-0.06241 l -0.449357,0.224678 c -0.06241,0.02496 -0.09986,0.09986 -0.06241,0.162268 z m 0.499285,-0.09986 0.112338,0.224677 -0.224677,0.11234 -0.112341,-0.224679 z"
          />
    <path
          d="m 42.337539,76.008013 c 0.02496,0.04993 0.06241,0.07489 0.112341,0.07489 0.01248,0 0.03745,0 0.04993,-0.01248 l 0.449356,-0.212197 c 0.06241,-0.02496 0.08737,-0.09986 0.06241,-0.162266 l -0.212196,-0.449358 c -0.02496,-0.06241 -0.09986,-0.08738 -0.162268,-0.06241 l -0.449356,0.212196 c -0.06241,0.02496 -0.08737,0.09986 -0.06241,0.162268 z m 0.287089,-0.549215 0.112339,0.22468 -0.224677,0.09986 -0.112339,-0.224678 z"
          />
    <path
          d="m 41.925629,75.945602 c -0.02496,-0.06241 -0.09986,-0.08738 -0.162267,-0.06241 l -0.449357,0.212197 c -0.06241,0.02496 -0.08737,0.09986 -0.06241,0.162266 l 0.212196,0.449358 c 0.01248,0.02496 0.03745,0.04993 0.07489,0.06241 0.01248,0 0.02496,0.01248 0.03745,0.01248 0.01248,0 0.03745,0 0.04993,-0.01248 l 0.449356,-0.212196 c 0.02496,-0.01248 0.04993,-0.03745 0.06241,-0.07489 0.01248,-0.02496 0.01248,-0.06241 0,-0.09986 z m -0.287087,0.561695 -0.112339,-0.224678 0.224677,-0.11234 0.112339,0.224679 z"
          />
    <rect class="hitarea" fill="#fff" height="11" style="opacity: 0;" width="11" x="36.6" y="69"></rect>
  </g>
  <g class="icon icon-train">
    <path
          d="m 57.986492,73.218945 h -3.056368 c -0.07516,0 -0.125261,0.0501 -0.125261,0.125261 v 1.916493 c 0,0.07516 0.0501,0.125261 0.125261,0.125261 h 3.056368 c 0.07516,0 0.125261,-0.0501 0.125261,-0.125261 v -1.916493 c 0,-0.06263 -0.05011,-0.125261 -0.125261,-0.125261 z m -0.125261,1.916493 h -2.805846 v -1.665971 h 2.805846 z"
          />
    <path
          d="m 55.318433,75.849425 c -0.275574,0 -0.51357,0.22547 -0.51357,0.51357 0,0.2881 0.22547,0.51357 0.51357,0.51357 0.275574,0 0.51357,-0.22547 0.51357,-0.51357 0,-0.2881 -0.237996,-0.51357 -0.51357,-0.51357 z m 0,0.764092 c -0.137787,0 -0.263048,-0.112735 -0.263048,-0.263048 0,-0.137787 0.112735,-0.263048 0.263048,-0.263048 0.150313,0 0.263048,0.112735 0.263048,0.263048 -0.01253,0.150313 -0.125261,0.263048 -0.263048,0.263048 z"
          />
    <path
          d="m 57.610709,75.849425 c -0.275574,0 -0.51357,0.22547 -0.51357,0.51357 0,0.2881 0.22547,0.51357 0.51357,0.51357 0.275574,0 0.51357,-0.22547 0.51357,-0.51357 0,-0.2881 -0.237996,-0.51357 -0.51357,-0.51357 z m 0,0.764092 c -0.137787,0 -0.263048,-0.112735 -0.263048,-0.263048 0,-0.137787 0.112735,-0.263048 0.263048,-0.263048 0.137787,0 0.263048,0.112735 0.263048,0.263048 -0.01253,0.150313 -0.125261,0.263048 -0.263048,0.263048 z"
          />
    <path
          d="m 58.612797,77.841074 -0.601253,-0.526096 h 0.488518 c 0.07516,0 0.125261,-0.0501 0.125261,-0.125261 v -4.572025 c 0,-0.51357 -1.515658,-0.563674 -2.167015,-0.563674 -0.651357,0 -2.154489,0.0501 -2.154489,0.563674 v 4.572025 c 0,0.07516 0.0501,0.125261 0.125261,0.125261 h 0.488518 l -0.601252,0.526096 c -0.0501,0.05011 -0.06263,0.125261 -0.01253,0.175366 0.02505,0.02505 0.06263,0.03758 0.100208,0.03758 0.02505,0 0.06263,-0.01253 0.08768,-0.02505 l 0.313153,-0.275574 h 0.02505 3.331941 l 0.313153,0.275574 c 0.02505,0.02505 0.0501,0.02505 0.08768,0.02505 0.03758,0 0.07516,-0.01253 0.100209,-0.03758 0.01253,-0.05011 0,-0.125261 -0.0501,-0.175366 z m -4.058456,-5.223382 c 0,-0.08768 0.563675,-0.313152 1.916493,-0.313152 1.340293,0 1.916493,0.22547 1.916493,0.313152 v 4.446764 h -3.832986 z m 0.51357,4.897704 0.22547,-0.187892 h 2.34238 l 0.22547,0.187892 z"
          />
    <path
          d="m 55.882108,72.845715 h 1.164927 c 0.07516,0 0.12526,-0.0501 0.12526,-0.125261 0,-0.07516 -0.0501,-0.125261 -0.12526,-0.125261 h -1.164927 c -0.07516,0 -0.125261,0.0501 -0.125261,0.125261 0,0.07516 0.0501,0.125261 0.125261,0.125261 z"
          />
    <rect class="hitarea" fill="#fff" height="11" style="opacity: 0;" width="11" x="51" y="69" />
  </g>
  <g class="icon icon-umbrella">
    <path
          d="m 71.04474,72.380484 v -0.12474 c 0,-0.07484 -0.0499,-0.12474 -0.12474,-0.12474 -0.07484,0 -0.124741,0.0499 -0.124741,0.12474 v 0.12474 c -1.434511,0.07484 -2.58212,1.259876 -2.58212,2.706861 0,0.07484 0.0499,0.12474 0.12474,0.12474 0.07484,0 0.12474,-0.0499 0.12474,-0.12474 0,-0.286902 0.237006,-0.523909 0.523909,-0.523909 0.286902,0 0.511434,0.224533 0.523908,0.511435 v 0.01247 c 0,0.07484 0.0499,0.12474 0.12474,0.12474 v 0 0 c 0.07484,0 0.12474,-0.0499 0.12474,-0.12474 0,-0.286902 0.237007,-0.523909 0.523909,-0.523909 0.286902,0 0.523908,0.237007 0.523908,0.523909 v 0.01247 2.507276 c 0,0.149689 -0.12474,0.274429 -0.274428,0.274429 -0.149688,0 -0.274428,-0.12474 -0.274428,-0.274429 0,-0.07484 -0.0499,-0.12474 -0.12474,-0.12474 -0.07484,0 -0.12474,0.0499 -0.12474,0.12474 0,0.286903 0.237006,0.523909 0.523908,0.523909 0.286902,0 0.523909,-0.237006 0.523909,-0.523909 v -2.51975 -0.02495 c 0.01247,-0.274428 0.237006,-0.498961 0.523908,-0.498961 0.286903,0 0.523909,0.237007 0.523909,0.523909 0,0.07484 0.0499,0.12474 0.12474,0.12474 v 0 0 c 0.07484,0 0.12474,-0.0499 0.12474,-0.12474 v -0.03742 c 0,-0.274428 0.224532,-0.486487 0.49896,-0.486487 0.286903,0 0.523909,0.237007 0.523909,0.523909 0,0.07484 0.0499,0.12474 0.124741,0.12474 v 0 0 c 0.07484,0 0.12474,-0.0499 0.12474,-0.12474 0,-1.446985 -1.147609,-2.632017 -2.58212,-2.706861 z m -2.058212,1.933472 c -0.162163,0 -0.311851,0.0499 -0.436591,0.137214 0.224532,-0.823285 0.848233,-1.471933 1.659044,-1.708939 -0.349273,0.37422 -0.598753,1.022869 -0.673597,1.808731 -0.137214,-0.149688 -0.336798,-0.237006 -0.548856,-0.237006 z m 1.284823,0 c -0.18711,0 -0.349272,0.06237 -0.486487,0.174636 0.124741,-0.972973 0.523909,-1.721413 0.997921,-1.846153 v 1.871101 c -0.12474,-0.12474 -0.31185,-0.199584 -0.511434,-0.199584 z m 1.297297,0 c -0.199584,0 -0.386694,0.07484 -0.523908,0.199584 v -1.871101 c 0.486486,0.112266 0.885655,0.87318 0.997921,1.846153 -0.12474,-0.112266 -0.299377,-0.174636 -0.474013,-0.174636 z m 1.284823,0 c -0.212058,0 -0.399168,0.08732 -0.548856,0.224532 -0.07484,-0.773388 -0.324324,-1.422037 -0.673597,-1.808731 0.810811,0.24948 1.434512,0.898128 1.659044,1.721413 -0.12474,-0.08732 -0.274428,-0.137214 -0.436591,-0.137214 z" />
    <rect class="hitarea" fill="#fff" height="11" style="opacity: 0;" width="11" x="65.5" y="69" />
  </g>
  <path
        class="bubble"
        d="m 18.3,70.1 c 5.108754,0 5.808634,-3.8 10,-3.8 4.191366,0 5.454939,3.8 10,3.8 z" />
  <rect
        class="cover"
        width="15"
        height="15"
        x="5"
        y="65" />
  <rect
        class="cover"
        y="65"
        x="80"
        height="15"
        width="15" />
</svg>

script.js

const icons = Array.from(document.querySelectorAll('.icon'))
icons.forEach((icon) => {
  icon.addEventListener('click', () => {
    icons.forEach((i) => {
      i.classList.remove('icon--expanded');
    });
    icon.classList.add('icon--expanded')
  })
})

style.css

body {
  margin: 0;
}
svg {
  height: 100vmin;
  left: calc(50% - 50vmin);
  position: absolute;
  width: 100vmin;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.drop {
  fill:#1d1636;
}
.drop-desktop {
  display: none;
}
@media (max-width: 600px) {
  .drop-desktop {
    display: block;
  }
}
.background {
  fill:#30284d;
}
.icon {
  fill: #ffd6b3;
  stroke-width:0.125;
  transition: transform 300ms cubic-bezier(.87,-0.91,.66,1.42), fill 300ms cubic-bezier(.87,-0.91,.66,1.42);
  transform: scale(0.8);
}
.icon--expanded {
  transform: scale(1.15);
  fill: #fff;
}
.icon-sign {
  transform-origin: 27.5% 78.5%;
}
.icon-drink {
  transform-origin: 42% 77%;
}
.icon-train {
  transform-origin: 56% 77%;
}
.icon-umbrella {
  transform-origin: 70% 77%;
}
.icon-drink.icon--expanded ~ .bubble {
  transform: translateX(13.9px);
}
.icon-train.icon--expanded ~ .bubble {
  transform: translateX(28.4px);
}
.icon-umbrella.icon--expanded ~ .bubble {
  transform: translateX(42.8px);
}
.hitarea {
  cursor: pointer;
}
.bubble {
  transition: transform 300ms cubic-bezier(.87,-0.91,.66,1.42);
  fill:#fd6465;
}
.cover {
  fill:#1d1636;
}