<div class="container">
    <div class="menu">
        <h3>Your Settings</h3>
        <ul>
            <li>
                <a href="#">
                    <svg><use xlink:href="#cog"></svg>
                    <span>Edit Personal Info</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg><use xlink:href="#picture"></svg>
                    <span>Set Profile Picture</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg><use xlink:href="#lock"></svg>
                    <span>Change Password</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="menu-btn-container">
        <button aria-pressed="false" aria-label="Open Menu" class="menu-btn"></button>
        <span class="menu-btn-pulse"></span>
        <span class="menu-btn-pulse"></span>
    </div>
    <svg>
    <symbol id="cog" viewBox="0 0 1024 1024">
        <path d="M390.71 1008.755c-2.109 0-4.248-0.262-6.378-0.81-45.976-11.803-90.149-30.042-131.291-54.21-11.923-7.003-16.13-22.21-9.501-34.344 
            8.15-14.925 12.459-31.866 12.459-48.992 0-56.464-45.936-102.4-102.4-102.4-17.125 0-34.066 4.309-48.992 12.459-12.133 6.627-27.339 
            2.421-34.342-9.501-24.17-41.142-42.408-85.315-54.211-131.293-3.333-12.989 3.92-26.349 16.629-30.629 41.699-14.037 69.717-53.034 
            69.717-97.037s-28.018-83-69.718-97.040c-12.707-4.278-19.962-17.638-16.627-30.627 11.803-45.976 30.042-90.149 54.211-131.291 7.003-11.923 22.21-16.13
            34.344-9.501 14.923 8.15 31.864 12.459 48.99 12.459 56.464 0 102.4-45.936 102.4-102.4 0-17.126-4.309-34.067-12.459-48.99-6.629-12.134-2.422-27.341 
            9.501-34.344 41.141-24.168 85.314-42.408 131.291-54.211 12.994-3.334 26.349 3.92 30.627 16.627 14.040 41.701 53.037 69.718 97.040 69.718s83-28.018 
            97.038-69.717c4.28-12.71 17.645-19.965 30.629-16.629 45.976 11.802 90.15 30.042 131.293 54.211 11.922 7.003 16.128 22.208 9.501 34.342-8.152 
            14.926-12.461 31.867-12.461 48.992 0 56.464 45.936 102.4 102.4 102.4 17.126 0 34.067-4.309 48.992-12.459 12.138-6.629 27.341-2.421 34.344 9.501 
            24.166 41.141 42.406 85.314 54.21 131.291 3.334 12.989-3.918 26.349-16.627 30.627-41.701 14.040-69.718 53.037-69.718 97.040s28.018 
            83 69.718 97.038c12.707 4.28 19.962 17.638 16.627 30.629-11.803 45.976-30.042 90.15-54.21 131.291-7.005 11.925-22.208 16.128-34.344 
            9.502-14.926-8.152-31.867-12.461-48.992-12.461-56.464 0-102.4 45.936-102.4 102.4 0 17.125 4.309 34.066 12.461 48.992 6.627 12.136 2.421
            27.341-9.502 34.344-41.141 24.166-85.314 42.406-131.291 54.21-12.992 3.336-26.349-3.918-30.629-16.627-14.038-41.701-53.035-69.718-97.038-69.718s-83
            28.018-97.040 69.718c-3.578 10.624-13.502 17.437-24.25 17.437zM512 870.4c57.715 0 109.693 32.138 135.917 82.029 26.637-8.218 52.507-18.875 
            77.299-31.846-5.541-16.077-8.416-33.075-8.416-50.182 0-84.696 68.904-153.6 153.6-153.6 17.107 0 34.106 2.875 50.181 8.418 12.971-24.792 23.63-50.662
            31.846-77.299-49.89-26.226-82.027-78.203-82.027-135.918s32.138-109.691 82.029-135.918c-8.218-26.637-18.875-52.506-31.846-77.299-16.077 5.542-33.074 
            8.418-50.182 8.418-84.696 0-153.6-68.904-153.6-153.6 0-17.107 2.875-34.106 8.418-50.181-24.792-12.971-50.662-23.63-77.299-31.846-26.226 49.89-78.203 
            82.027-135.918 82.027s-109.691-32.138-135.917-82.027c-26.637 8.216-52.507 18.874-77.299 31.846 5.542 16.075 8.416 33.072 8.416 50.181 0 84.696-68.904 
            153.6-153.6 153.6-17.109 0-34.106-2.874-50.181-8.418-12.973 24.794-23.63 50.662-31.846 77.299 49.89 26.227 82.027 78.203 82.027 135.918s-32.138 
            109.693-82.027 135.917c8.216 26.637 18.875 52.507 31.846 77.299 16.075-5.541 33.074-8.416 50.181-8.416 84.696 0 153.6 68.904 153.6 153.6 0 17.109-2.875
            34.106-8.418 50.181 24.794 12.971 50.662 23.63 77.299 31.846 26.227-49.89 78.203-82.027 135.918-82.027z"></path>
        <path d="M512 665.6c-84.696 0-153.6-68.904-153.6-153.6s68.904-153.6 153.6-153.6 153.6 68.904 153.6 153.6-68.904 153.6-153.6 153.6zM512 409.6c-56.464 0-102.4
             45.936-102.4 102.4s45.936 102.4 102.4 102.4c56.464 0 102.4-45.936 102.4-102.4s-45.936-102.4-102.4-102.4z"></path>
        </symbol>
        <symbol id="picture" viewBox="0 0 1024 1024">
        <path d="M947.2 1024h-870.4c-42.347 0-76.8-34.451-76.8-76.8v-870.4c0-42.347 34.453-76.8 76.8-76.8h870.4c42.349 0 76.8 34.453 76.8 76.8v870.4c0 42.349-34.451
        76.8-76.8 76.8zM76.8 51.2c-14.115 0-25.6 11.485-25.6 25.6v870.4c0 14.115 11.485 25.6 25.6 25.6h870.4c14.115 0 25.6-11.485 25.6-25.6v-870.4c0-14.115-11.485-25.6-25.6-25.6h-870.4z"></path>
        <path d="M665.6 460.8c-56.464 0-102.4-45.936-102.4-102.4s45.936-102.4 102.4-102.4 102.4 45.936 102.4 102.4-45.936 102.4-102.4 102.4zM665.6 307.2c-28.232 0-51.2
        22.968-51.2 51.2s22.968 51.2 51.2 51.2 51.2-22.968 51.2-51.2-22.968-51.2-51.2-51.2z"></path>
        <path d="M896 102.4h-768c-14.138 0-25.6 11.462-25.6 25.6v614.4c0 14.139 11.462 25.6 25.6 25.6h768c14.139 0 25.6-11.461 25.6-25.6v-614.4c0-14.138-11.461-25.6-25.6-25.6zM153.6
        598.533l164.318-184.858c4.203-4.728 9.694-7.371 15.462-7.44 5.725-0.090 11.322 2.438 15.638 7.062l283.27 303.502h-478.69v-118.267zM870.4 
        716.8h-168.075l-315.875-338.437c-14.269-15.288-33.312-23.605-53.691-23.325-20.354 0.246-39.214 8.992-53.107 24.621l-126.051 141.808v-367.867h716.8v563.2z"></path>
        </symbol>
        <symbol id="lock" viewBox="0 0 1024 1024">
        <path d="M813.412,360.894h-30.141v-90.424C783.271,120.891,661.579-0.8,512-0.8S240.729,120.891,240.729,270.471v90.423h-30.141
        c-49.859,0-90.424,40.565-90.424,90.424v482.259c0,49.859,40.565,90.424,90.424,90.424h602.823
        c49.859,0,90.424-40.565,90.424-90.424V451.318C903.835,401.459,863.271,360.894,813.412,360.894L813.412,360.894z M301.012,270.471
        c0-116.339,94.649-210.988,210.988-210.988s210.988,94.649,210.988,210.988v90.423H301.012L301.012,270.471L301.012,270.471z
            M843.553,933.576c0,16.619-13.522,30.141-30.141,30.141H210.588c-16.619,0-30.141-13.522-30.141-30.141V451.318
        c0-16.619,13.522-30.141,30.141-30.141h602.823c16.619,0,30.141,13.522,30.141,30.141V933.576z"/>
        </symbol>
    </svg>
</div>

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: "Montserrat";
  overflow:hidden;
}
ul,
li {
  list-style-type: none;
}
ul {
  padding-left: 0;
  font-size: 0.875em;
}
li {
  margin: 15px auto;
  padding: 15px 0px;
  border-bottom: 1px solid rgba(175, 175, 175, 0.25);
}
li:last-child {
  border: none;
}
a {
  display: inline-block;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
}
h3 {
  font-size: 20px;
}
.container {
  text-align: center;
}
.menu-btn {
  border: none;
  background: linear-gradient(120deg, #f829ab 25%, #f42977 75%, #f41f5f 100%);
  border-radius: 25px;
  transform: rotate(-45deg) translateZ(0);
  width: 70px;
  height: 70px;
  position: relative;
  cursor: pointer;
  box-shadow: 0px 2px 20px rgba(244, 31, 95, 0.25);
  margin: 15px auto;
}
.menu-btn:focus {
  outline: none;
}
.menu-btn:before,
.menu-btn:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 17px);
  width: 34px;
  height: 2px;
  background: white;
  transition: 0.3s ease all;
  transform: rotate(-45deg) translateZ(0);
}
.menu-btn:after {
  transform: rotate(45deg) translateZ(0);
}
.menu-btn.open:before {
  transform: rotate(0deg);
}
.menu-btn.open:after {
  transform: rotate(90deg);
}
.menu {
  position: relative;
  min-height: 250px;
  min-width: 300px;
  margin: 15px auto;
  border-radius: 24px 24px 24px 4px;
  text-align: left;
  padding: 15px 20px;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: 0.35s ease all;
  overflow: hidden;
}
.menu > h3 {
  opacity: 0;
}
.menu > ul > li {
  opacity: 0;
}
.menu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #28334b;
  z-index: -1;
  border-radius: 50%;
  transform: scale(0.5);
}
.menu.active:before {
  animation: 0.2s menuIn 0.15s normal forwards;
  animation-timing-function: ease-in;
}
.active {
  transform: scale(1);
}
.menu.active > h3 {
  transition: 0.2s ease-in 0.2s;
  opacity: 1;
}
.menu.active > ul > li {
  transition: 0.2s ease-in 0.2s;
  opacity: 1;
}
@keyframes menuIn {
  0% {
    transform: scale(0.5);
    border-radius: 50%;
  }
  45% {
    transform: scale(1.25);
    border-radius: 50%;
  }
  100% {
    transform: scale(1);
    border-radius: 24px 24px 24px 4px;
  }
}
@keyframes menuOut {
  from {
    transform: scale(1);
    border-radius: 24px 24px 24px 4px;
  }
  to {
    transform: scale(0.5);
    border-radius: 50%;
  }
}
svg {
  width: 26px;
  height: 26px;
  fill: white;
  margin-right: 10px;
}
.menu-btn-container {
  position: relative;
}
.menu-btn-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(248, 41, 171, 0.28);
  filter: blur(3px);
}
.menu-btn-particle {
  width: 6px;
  height: 6px;
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: -1;
}

const randomMinMax = (min,max) => {
    return min + Math.random() * (max-min);
}
const button = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');
const buttonPulse = document.querySelectorAll('.menu-btn-pulse')

const btnHoverTl = new TimelineMax({
    repeat:-1,
    paused:true
}); 
btnHoverTl.fromTo(button,0.8,{
        scale:1
    },{
        scale:1.05
    })
    .to(button,0.6,{
        scale:1
    });

const pulseTl = new TimelineMax({
    repeat:-1,
    onRepeat:() => {
        TweenMax.set(buttonPulse,{scale:0.5})
    }
});

pulseTl.staggerTo(buttonPulse,2,{
        scale:2.5,
        transformOrigin:"center center"
    },0.25,'in')
.staggerTo(buttonPulse,2,{
        opacity:0,
        scale:3.5
    },0.25,'in+=0.25');

button.addEventListener('click',() => {
    menu.classList.toggle('active');
    button.classList.toggle('open');
    // play particles on click
    button.classList.contains('open') ? playParticles()  : null;

    if (button.classList.contains('open')) {
        pulseTl.eventCallback("onRepeat", () => {
            pulseTl.pause();
        })
        btnHoverTl.eventCallback('onRepeat',() => {
            btnHoverTl.pause();
        })
    }
    else {
        pulseTl.eventCallback("onRepeat", null);
        pulseTl.restart();
        btnHoverTl.eventCallback('onRepeat',null)
        btnHoverTl.restart();
    }  
});

button.addEventListener('mouseover',() => { 
    btnHoverTl.play();   
    btnHoverTl.eventCallback("onRepeat", null);
});

button.addEventListener('mouseleave',()=> {
    btnHoverTl.eventCallback("onRepeat", () => {
        btnHoverTl.pause();
    });
});

const colors = ["#F829AB","#F42977","#F41F5F"];
const particleCount = 8;
const btnContainer = document.querySelector('.menu-btn-container');

// create a few span elements
const createParticles = () => {    
    for (let i = 0; i < particleCount; i++) {   
        // create element
        const particle = document.createElement('span');
        // assign class to element
        particle.setAttribute('class','menu-btn-particle')
        btnContainer.appendChild(particle);
    }
};

createParticles();

const particle = document.querySelectorAll('.menu-btn-particle');

randomizeParticles = () => {
    let color = colors[(Math.random() * colors.length) | 0];
    TweenMax.set(particle,{x:0,y:0,backgroundColor:() => color });
    TweenMax.set(particle,{scale:() => randomMinMax(0.35,1)});
    TweenMax.set(particle,{opacity:() => randomMinMax(0.25,1)});
}

randomizeParticles();


playParticles = () => {
  const particleTl = new TimelineMax();
  particleTl.staggerTo(particle,0.5,{ cycle: {
    physics2D: () => {
      return {
        velocity:randomMinMax(145,165),
        angle:randomMinMax(180,325),
        gravity:randomMinMax(215,225)        
      }   
    }
  }},'in')
    .to(particle,0.4,{scale:0,opacity:0,onComplete:() => {
      randomizeParticles();
    }},'in')
};