<nav class="orbital-menu">  
  <ul class="orbital-menu__list">
    <li class="orbital-menu__item">
      <a href="" class="orbital-menu__link">
        <span class="orbital-menu__link-icon">
          <i data-feather="log-out"></i>
        </span>
        <span class="orbital-menu__link-text">Exit & Off-branding</span>
      </a>
    </li>
    <li class="orbital-menu__item">
      <a href="" class="orbital-menu__link">
        <span class="orbital-menu__link-icon">
          <i data-feather="map"></i>
        </span>
        <span class="orbital-menu__link-text">Travel & Requisitions</span>
      </a>
    </li>
    <li class="orbital-menu__item">
      <a href="" class="orbital-menu__link">
        <span class="orbital-menu__link-icon">
        <i  data-feather="alert-circle"></i>
        </span>
        <span class="orbital-menu__link-text">Disciplinary</span>
      </a>
    </li>
    <li class="orbital-menu__item">
      <a href="" class="orbital-menu__link">
        <span class="orbital-menu__link-icon">
        <i data-feather="activity"></i>
        </span>
        <span class="orbital-menu__link-text">Analytics & Reporting</span>
      </a>
    </li>
    <li class="orbital-menu__item">
      <a href="" class="orbital-menu__link">
        <span class="orbital-menu__link-icon">
        <i  data-feather="calendar"></i>
        </span>
        <span class="orbital-menu__link-text">Time & Attendance</span>
      </a>
    </li>
    <li class="orbital-menu__item">
      <a href="" class="orbital-menu__link">
        <span class="orbital-menu__link-icon">
        <i  data-feather="user-plus"></i>
        </span>
        <span class="orbital-menu__link-text">Onboarding</span>
      </a>
    </li>
    <li class="orbital-menu__item">
      <a href="" class="orbital-menu__link">
        <span class="orbital-menu__link-icon">
        <i  data-feather="archive"></i>
        </span>
        <span class="orbital-menu__link-text">HR Information System</span>
      </a>
    </li>
    <li class="orbital-menu__item">
      <a href="" class="orbital-menu__link">
        <span class="orbital-menu__link-icon">
        <i  data-feather="sun"></i>
        </span>
        <span class="orbital-menu__link-text">Leaves & Holidays</span>
      </a>
    </li>
  </ul>
  <div class="orbital-menu__center-pic">
    <img src="https://seamlesshr.com/wp-content/uploads/2020/11/2.png" alt="">
    <img src="https://seamlesshr.com/wp-content/uploads/2020/11/1.png" alt="">
  </div>
</nav>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html{  
  font-size: 62.5%;
}
html,body{
  height: 100%;
}
body{
  font-size: 16px;
  display: flex;
  align-items:center;
  justify-content:center;
  font-family: 'Roboto', sans-serif;
}

@keyframes appear {
  0% {
    top: 0;
    transform-origin: 5rem 0;
  }
  100% {
    top: -25rem;
    transform-origin: 5rem 25rem;
  }
}

@keyframes menu-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@keyframes scaling {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.orbital-menu{
    position: relative;
   $ref: &;
  &__list{
    position: absolute;
    top: 50%;
    left: 50%;
    animation: menu-rotation linear 60s infinite;
    &:hover{
      animation-play-state: paused;      
      #{$ref}__link{
        > * {
      animation-play-state: paused;  
        }
      }
    }
  }
  &__item{
    position: absolute;
    animation: appear 2s forwards;
    left: -5rem;
    top: 0;
    transform-origin: 5rem 0;
    @for $c from 2 to 9 {
      &:nth-child(#{$c}){
        animation-delay: ($c - 1) * 0.1s;
        transform:rotate(($c - 1)* 45deg);
        #{$ref}__link{
            transform:rotate(($c - 1)* 45deg * -1);
          &:before{
            background:hsl(($c - 1)* 45deg 100% 65%);
            animation-delay:($c - 1)*0.33s;
          }
        }
      }
    }
  }
  &__link{
    position: relative;
    display:block;
    height: 10rem;
    width: 10rem;
    &:before{
      content:'';
      position: absolute;
      inset: 0;
      background:hsl(0 100% 65%);
      border-radius: 50%;
      animation: scaling linear 3s infinite;
    }    
    > *{
      position: absolute;
      inset: 0;
      display: flex;
      align-items:center;
      justify-content:center;
      animation: menu-rotation linear 60s infinite;
      animation-direction: reverse;
      transition: 250ms ease all;
    }
    &-text{
      opacity: 0;
      text-align: center;
      color: #fff;
    }
    &-icon{
      color: rgba(#000, 0.8);
    }
    &:hover{
      &:before{
        animation-play-state: paused;        
        filter: brightness(0.7);
      }
      #{$ref}__link-text{
        opacity: 1;
      }
      #{$ref}__link-icon{
        opacity: 0;
      }
    }
  }
  &__center-pic{
    position: relative;
    width: 18rem;
    height: 18rem;
    overflow: hidden;
    border-radius: 4rem;
    > img{
      position: absolute;
      inset: 0;
      max-width: 100%;
      transition: 500ms ease all;
    }
    &:hover{
      > img:last-child{
        opacity: 0;
      }
    }
  }
}

feather.replace()