Goo menu

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/filters/goo-menu.html
  Desc   : Gooey action menu — dots merge and separate like liquid
  ============================================================
-->
<div class="sg-goo-menu" style="--sg-color:#7F77DD; --sg-size:140px; --sg-duration:2.8s;">
  <svg viewBox="0 0 120 120" aria-hidden="true" focusable="false">
    <defs>
      <filter id="sg-goo-menu-goo" x="-30%" y="-30%" width="160%" height="160%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="8" 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 19 -9" result="goo" />
        <feBlend in="SourceGraphic" in2="goo" />
      </filter>
    </defs>
    <g filter="url(#sg-goo-menu-goo)">
      <circle class="sg-goo-menu-dot" cx="60" cy="60" r="15" />
      <circle class="sg-goo-menu-sat sg-goo-menu-sat1" cx="60" cy="60" r="11" />
      <circle class="sg-goo-menu-sat sg-goo-menu-sat2" cx="60" cy="60" r="11" />
      <circle class="sg-goo-menu-sat sg-goo-menu-sat3" cx="60" cy="60" r="11" />
    </g>
  </svg>
</div>
<style>
  .sg-goo-menu {
    width: var(--sg-size);
    height: var(--sg-size);
  }
  .sg-goo-menu svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-goo-menu circle {
    fill: var(--sg-color);
  }
  .sg-goo-menu-sat {
    animation-duration: var(--sg-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  .sg-goo-menu-sat1 { animation-name: sg-goo-menu-up; }
  .sg-goo-menu-sat2 { animation-name: sg-goo-menu-right; }
  .sg-goo-menu-sat3 { animation-name: sg-goo-menu-left; }
  @keyframes sg-goo-menu-up {
    0%, 12%  { transform: translate(0, 0); }
    45%, 65% { transform: translate(0, -35px); }
    100%     { transform: translate(0, 0); }
  }
  @keyframes sg-goo-menu-right {
    0%, 12%  { transform: translate(0, 0); }
    45%, 65% { transform: translate(31px, 18px); }
    100%     { transform: translate(0, 0); }
  }
  @keyframes sg-goo-menu-left {
    0%, 12%  { transform: translate(0, 0); }
    45%, 65% { transform: translate(-31px, 18px); }
    100%     { transform: translate(0, 0); }
  }
</style>