HNML
<menu class="menu">
<button class="menu__item active" style=" --bgColorItem: #2CB742;">
<svg class="icon" viewBox="0 0 32 32">
<path stroke="null" id="svg_1" d="m23.412,19.37916c-0.35087,-0.18397 -2.05975,-1.04762 -2.37912,-1.17087c-0.31937,-0.11781 -0.55125,-0.17944 -0.784,0.18397c-0.2275,0.35434 -0.89775,1.16544 -1.1025,1.40197s-0.406,0.25466 -0.75162,0.09425c-0.35087,-0.18397 -1.47175,-0.56187 -2.80262,-1.798c-1.0395,-0.95791 -1.73162,-2.13784 -1.93725,-2.50125c-0.20475,-0.35887 -0.02275,-0.56187 0.1505,-0.74131c0.15925,-0.16494 0.35087,-0.41506 0.5285,-0.63256c0.16887,-0.2175 0.22312,-0.36341 0.3465,-0.59903c0.11375,-0.25466 0.05512,-0.45312 -0.0315,-0.63256s-0.784,-1.95841 -1.07537,-2.66709c-0.27825,-0.70325 -0.56962,-0.61353 -0.784,-0.61353c-0.20037,-0.01903 -0.43312,-0.01903 -0.665,-0.01903s-0.61075,0.08972 -0.93012,0.43409c-0.31937,0.36341 -1.2215,1.23159 -1.2215,2.98791c0,1.76084 1.24862,3.46459 1.42187,3.71925c0.17762,0.23562 2.45612,3.86062 5.95175,5.41847c0.83387,0.36341 1.48137,0.58091 1.98712,0.76034c0.83387,0.27369 1.59512,0.23562 2.19625,0.14591c0.665,-0.11328 2.05975,-0.87362 2.352,-1.72278c0.29662,-0.85459 0.29662,-1.56237 0.21,-1.72278c-0.08662,-0.16494 -0.31412,-0.25466 -0.665,-0.41506l-0.01487,0.08972zm-6.33937,8.90209l-0.01837,0c-2.06937,0 -4.11512,-0.58091 -5.90187,-1.66659l-0.41912,-0.25919l-4.375,1.17994l1.176,-4.40891l-0.28262,-0.45312c-1.15325,-1.90222 -1.76837,-4.09716 -1.76837,-6.35281c0,-6.57937 5.20012,-11.94619 11.59812,-11.94619c3.09925,0 6.00687,1.25062 8.19437,3.51625c2.1875,2.24659 3.395,5.25806 3.395,8.44897c-0.00875,6.57484 -5.2045,11.94166 -11.59375,11.94166l-0.00437,0zm9.8665,-22.11341c-2.66175,-2.66256 -6.16175,-4.16784 -9.88487,-4.16784c-7.679,0 -13.93175,6.44797 -13.93612,14.37222c0,2.53025 0.63787,4.99887 1.85937,7.18384l-1.9775,7.44394l7.392,-1.99647c2.037,1.13734 4.3295,1.74634 6.66312,1.75087l0.00437,0c7.68337,0 13.93612,-6.44797 13.9405,-14.37766c0,-3.83706 -1.44462,-7.44847 -4.07837,-10.16269l0.0175,-0.04622z" />
</svg>
</button>
<button class="menu__item" style=" --bgColorItem: #7F4DA0;">
<svg class="icon" viewBox="0 0 32 32">
<path stroke="null" id="svg_1" d="m16.30328,2.00442c-2.22979,0.02712 -7.02365,0.39637 -9.70495,2.8752c-1.99448,1.99146 -2.69085,4.93579 -2.77247,8.5766c-0.06773,3.62769 -0.14935,10.44032 6.36722,12.29528l0,2.82533c0,0 -0.04081,1.13048 0.70072,1.36235c0.91345,0.29137 1.43356,-0.57836 2.30185,-1.51285l1.61937,-1.84534c4.4587,0.37362 7.87371,-0.48737 8.26705,-0.61511c0.90477,-0.29137 6.0008,-0.94761 6.83349,-7.76111c0.8544,-7.03663 -0.41591,-11.47017 -2.70909,-13.47564l-0.01389,0c-0.69203,-0.64224 -3.47319,-2.68445 -9.68672,-2.7072c0,0 -0.46107,-0.0315 -1.20259,-0.01837l0,0.00087zm0.07641,1.97834c0.63299,-0.00437 1.01764,0.02275 1.01764,0.02275c5.25927,0.014 7.76952,1.6091 8.3617,2.14634c1.93109,1.66772 2.92616,5.66465 2.19766,11.5393c-0.69203,5.69615 -4.82512,6.05664 -5.59009,6.30251c-0.32561,0.105 -3.33339,0.85224 -7.12264,0.60636c0,0 -2.82196,3.43169 -3.70415,4.31542c-0.1398,0.15487 -0.30304,0.20037 -0.40723,0.17762c-0.14935,-0.03675 -0.1945,-0.22312 -0.18582,-0.47862l0.02692,-4.68904c-5.52671,-1.53997 -5.2011,-7.35075 -5.14205,-10.38607c0.06773,-3.03532 0.63299,-5.51853 2.31575,-7.20025c2.26539,-2.06409 6.33596,-2.34233 8.23058,-2.35633l0.00174,0zm0.41678,3.03445c-0.19016,-0.00437 -0.34819,0.15487 -0.34819,0.34649c0,0.196 0.15803,0.35087 0.34819,0.35087c1.74093,-0.0315 3.41935,0.63349 4.66709,1.85497c1.26163,1.2346 1.87639,2.89357 1.89983,5.06266c0,0.19162 0.15369,0.35087 0.34819,0.35087l0,-0.014c0.19016,0 0.34819,-0.15487 0.34819,-0.34649c0.08596,-2.06409 -0.6738,-4.06955 -2.09867,-5.55528c-1.37451,-1.3536 -3.11632,-2.05096 -5.16463,-2.05096l0,0.00087zm-4.57679,0.80236c-0.24399,-0.03675 -0.49753,0.014 -0.71027,0.14087l-0.01823,0c-0.47062,0.27825 -0.90911,0.62911 -1.32502,1.09811c-0.31693,0.36924 -0.48885,0.74286 -0.534,1.10248c-0.02692,0.21437 -0.00868,0.42874 0.0547,0.63349l0.02258,0.014c0.35687,1.05698 0.82315,2.07371 1.39275,3.03095c0.73284,1.34398 1.63674,2.5882 2.68651,3.70031l0.03126,0.0455l0.04949,0.03675l0.03126,0.03675l0.03647,0.0315c1.10795,1.06223 2.34266,1.97309 3.68158,2.72033c1.5282,0.83824 2.45554,1.2346 3.01212,1.3991l0,0.00875c0.16324,0.04987 0.31172,0.07262 0.46107,0.07262c0.47496,-0.03675 0.923,-0.2275 1.27553,-0.55124c0.45238,-0.41037 0.80925,-0.86098 1.07669,-1.3396l0,-0.00875c0.26657,-0.50574 0.17626,-0.98436 -0.20839,-1.3081c-0.76844,-0.67899 -1.60548,-1.28098 -2.48767,-1.79984c-0.59218,-0.32374 -1.19391,-0.12775 -1.4379,0.20037l-0.52011,0.66061c-0.26657,0.32812 -0.75108,0.28262 -0.75108,0.28262l-0.01389,0.00875c-3.61298,-0.93011 -4.57679,-4.61642 -4.57679,-4.61642s-0.04515,-0.50137 0.28914,-0.75686l0.65122,-0.52849c0.31172,-0.2555 0.52879,-0.86098 0.1945,-1.4586c-0.51143,-0.89336 -1.10795,-1.73159 -1.78174,-2.50683c-0.14501,-0.182 -0.35253,-0.30537 -0.5835,-0.35087l0.00174,0.00175zm5.17765,1.03948c-0.46107,0 -0.46107,0.70174 0.00434,0.70174c1.15744,0.01837 2.26104,0.50137 3.06596,1.3396c0.73284,0.81549 1.11229,1.90047 1.04022,2.99857c0.00434,0.19162 0.15803,0.34649 0.34819,0.34649l0.01389,0.01837c0.19016,0 0.34819,-0.15925 0.34819,-0.35087c0.03126,-1.39035 -0.39768,-2.55671 -1.23906,-3.49119c-0.84572,-0.93448 -2.02574,-1.4586 -3.53223,-1.56272c-0.01823,0 -0.03126,0 -0.04949,0zm0.57047,1.88647c-0.47496,-0.014 -0.49319,0.70174 -0.02258,0.71574c1.14441,0.0595 1.70012,0.64224 1.77306,1.84097c0.00434,0.19162 0.15803,0.34212 0.34385,0.34212l0.01389,0c0.1945,-0.00875 0.34819,-0.17762 0.33429,-0.37362c-0.08162,-1.56272 -0.92734,-2.44296 -2.42863,-2.52433c-0.00434,0 -0.00868,0 -0.01389,0l0,-0.00087z" />
</svg>
</button>
<button class="menu__item" style=" --bgColorItem: #37AEE2;">
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" />
</svg>
</button>
<button class="menu__item" style=" --bgColorItem: #45668e;">
<svg class="icon" viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
<circle cx="10.5" cy="10.5" r="10" fill="none" stroke-width="1" stroke-linecap="round" stroke-miterlimit="1" stroke-linejoin="round" />
<path d="M4.5,6.5c0.2,2.08,2.76,8,6,8c0,-2.0449,0,-8,0,-8" fill="none" stroke-width="1" stroke-linecap="round" stroke-miterlimit="1" stroke-linejoin="round" />
<path d="M16.5,6.5c-0.3,1.98,-2.32,5,-6,5" fill="none" stroke-width="1" stroke-linecap="round" stroke-miterlimit="1" stroke-linejoin="round" />
<path d="M16.5,14.5c-0.3,-1.188,-2.32,-3,-6,-3" fill="none" stroke-width="1" stroke-linecap="round" stroke-miterlimit="1" stroke-linejoin="round" />
</svg>
</button>
<button class="menu__item" style=" --bgColorItem:#FF0000;">
<svg class="icon" viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
<path stroke="null" id="svg_1" stroke-linejoin="round" stroke-miterlimit="1" stroke-linecap="round" d="m9.40436,18.48302c-3.60365,-0.06978 -4.83449,-0.13267 -5.59108,-0.29673c-0.51185,-0.10898 -0.95666,-0.35099 -1.28279,-0.70198c-0.25202,-0.26569 -0.45251,-0.67094 -0.60803,-1.23336c-0.13345,-0.46849 -0.1854,-0.85833 -0.25941,-1.81048c-0.11339,-2.14887 -0.14042,-3.90579 0,-5.8689c0.11582,-1.08412 0.17199,-2.37092 0.94156,-3.12179c0.3633,-0.35134 0.78604,-0.57747 1.26062,-0.67094c0.74149,-0.14819 3.90032,-0.26534 7.17044,-0.26534c3.26283,0 6.42864,0.11715 7.17087,0.26534c0.59294,0.11715 1.14902,0.46814 1.47548,0.92076c0.7021,1.16242 0.71446,2.60779 0.78572,3.73847c0.02946,0.53873 0.02946,3.59763 0,4.13636c-0.11096,1.7868 -0.20007,2.41899 -0.4522,3.07441c-0.15584,0.41376 -0.28897,0.6322 -0.51924,0.8742c-0.36119,0.37246 -0.82162,0.62018 -1.31996,0.71014c-3.1184,0.24691 -5.76655,0.30046 -8.77198,0.24982l0,0zm4.7816,-7.00471c-1.73489,-0.97572 -3.08198,-1.88061 -4.77125,-2.81724l0,5.60356c1.68927,-1.02239 3.34772,-1.95902 4.77864,-2.79402l-0.00739,0.0077l0,0z" />
</svg>
</button>
<div class="menu__border"></div>
</menu>
<div class="svg-container">
<svg viewBox="0 0 202.9 45.5">
<clipPath id="menu" clipPathUnits="objectBoundingBox" transform="scale(0.0049285362247413 0.021978021978022)">
<path d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
c9.2,3.6,17.6,4.2,23.3,4H6.7z" />
</clipPath>
</svg>
</div>
CSS
.menu {
box-sizing: border-box;
--bgColorMenu: #1d1d27;
--duration: 0.7s;
}
.menu {
margin: 50px;
display: flex;
width: 32.05em;
font-size: 1.5em;
padding: 0 2.85em;
position: relative;
align-items: center;
justify-content: center;
background-color: var(--bgColorMenu);
}
.menu__item {
all: unset;
flex-grow: 1;
z-index: 100;
display: flex;
cursor: pointer;
position: relative;
align-items: center;
justify-content: center;
padding: 0.55em 0 0.85em;
transition: transform var(--duration);
}
.menu__item::before {
content: "";
z-index: -1;
width: 4.2em;
height: 4.2em;
border-radius: 50%;
position: absolute;
transform: scale(0);
transition: background-color var(--duration), transform var(--duration);
}
.menu__item.active {
transform: translate3d(0, -0.8em, 0);
}
.menu__item.active::before {
transform: scale(1);
background-color: var(--bgColorItem);
}
.icon {
width: 2.6em;
height: 2.6em;
stroke: white;
fill: transparent;
stroke-width: 1pt;
stroke-miterlimit: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 400;
}
.menu__item.active .icon {
animation: strok 1.5s reverse;
}
@keyframes strok {
100% {
stroke-dashoffset: 400;
}
}
.menu__border {
left: 0;
bottom: 99%;
width: 10.9em;
height: 2.4em;
position: absolute;
clip-path: url(#menu);
will-change: transform;
background-color: var(--bgColorMenu);
transition: transform var(--duration);
}
.svg-container {
width: 0;
height: 0;
}
@media screen and (max-width: 50em) {
.menu {
font-size: 0.8em;
}
}
JS
"use strict";
let body = document.body;
let menu = document.querySelectorAll(".menu__item");
let menuBorder = document.querySelector(".menu__border");
let active;
function clickItem() {
active = document.querySelector("button.active");
if (active) {
active.classList.remove("active");
}
this.classList.add("active");
let box = this.getBoundingClientRect();
active = this;
body.style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
offsetMenuBorder(box, menuBorder);
}
function offsetMenuBorder(box, menuBorder) {
let left =
Math.floor(
box.left -
menuBorder.closest("menu").offsetLeft -
(menuBorder.offsetWidth - box.width) / 2
) + "px";
menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;
}
menu.forEach((item) => {
item.addEventListener("click", clickItem);
});
Смотрим что получилось