<div class="container">
  <input class="hit-area" type="radio" name="hit-area" checked></input>
  <input class="hit-area" type="radio" name="hit-area"></input>
  <input class="hit-area" type="radio" name="hit-area"></input>
  <input class="hit-area" type="radio" name="hit-area"></input>
  <div class="options">
    <svg xmlns="http://www.w3.org/2000/svg" width="360" height="100" viewBox="0 0 360 100" enable-background="new">
          <g stroke="#0e232e" stroke-width="2">
            <path
              d="M129.56 61.85h2.4"
              fill="#fff"
              fill-rule="evenodd"
              stroke-linecap="round"
            />
            <circle
              r="3.186"
              cy="61.9"
              cx="135.6"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M139.915 50.36H129.56"
              fill="none"
              stroke-linecap="round"
            />
            <circle
              transform="scale(-1)"
              cx="-143.429"
              cy="-50.41"
              r="3.186"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M138.778 61.85h10.48"
              fill="#fff"
              fill-rule="evenodd"
              stroke-linecap="round"
            />
            <path d="M149.26 50.36h-2.527" fill="none" stroke-linecap="round" />
            <ellipse
              ry="7.265"
              rx="7.265"
              cy="54.661"
              cx="56.915"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M67.104 64.842l-4.672-4.672"
              fill="#005c94"
              fill-rule="evenodd"
              stroke-linecap="round"
            />
            <path
              d="M293.497 64.742c-.666 0-.947-.617-.947-1.325V54.01c0-.743.402-1.082 1.01-1.58 1.587-1.41 6.04-4.675 7.513-5.87.84-.648 1.55-.677 2.265-.112 1.895 1.507 5.787 4.754 7.52 6.046.567.504.822.597.822 1.39v9.975c0 .857-.18.882-1.01.882h-4.357c-.785 0-1.262-.273-1.262-.947v-4.798c0-.81-.116-.884-.883-.884h-3.725c-.632 0-1.01-.003-1.01.758v4.673c0 1.015-.19 1.2-.947 1.2z"
              fill="none"
            />
            <g fill="none">
              <path
                d="M213.432 64.084c-.78 0-1.136-.53-1.136-1.136V55.12c.268-.97 2.318-6.46 2.59-7.26.27-.8.507-.948 1.26-.948h11.934c.65 0 .793.4 1.01.947.523 1.315 1.754 5.008 2.462 7.575 0 2.568.063 5.975.063 7.64 0 .593-.54 1.01-1.073 1.01h-17.11z"
              />
              <path
                d="M212.643 55.877h3.85c.44 0 .886.307 1.17.758.376.598.657.96.978 1.515.245.422.478.726.853.726h4.546c.393 0 .922.018 1.2-.505.44-.834.71-1.282 1.103-1.956.29-.5.61-.505 1.105-.505h3.63"
              />
            </g>
          </g>
        </svg>
  </div>
  <div class="highlight">
    <svg xmlns="http://www.w3.org/2000/svg" width="360" height="100" viewBox="0 0 360 100" enable-background="new">
          <g>
            <path d="M0 20h360v80H0z" fill="#2552fe" />
            <path
              d="M129.56 61.85h2.4"
              fill="#fff"
              fill-rule="evenodd"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
            />
            <circle
              r="3.186"
              cy="61.9"
              cx="135.6"
              fill="#fff"
              stroke="#fff"
              stroke-width="1.428"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill-opacity=".08"
            />
            <path
              d="M139.915 50.36H129.56"
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
            />
            <circle
              transform="scale(-1)"
              cx="-143.429"
              cy="-50.41"
              r="3.186"
              fill="#fff"
              stroke="#fff"
              stroke-width="1.428"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill-opacity=".08"
            />
            <path
              d="M138.778 61.85h10.48"
              fill="#fff"
              fill-rule="evenodd"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
            />
            <path
              d="M149.26 50.36h-2.527"
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
            />
            <ellipse
              ry="7.265"
              rx="7.265"
              cy="54.661"
              cx="56.915"
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M67.104 64.842l-4.672-4.672"
              fill="#005c94"
              fill-rule="evenodd"
              stroke="#fff"
              stroke-width="1.5"
              stroke-linecap="round"
            />
            <path
              d="M293.497 64.742c-.666 0-.947-.617-.947-1.325V54.01c0-.743.402-1.082 1.01-1.58 1.587-1.41 6.04-4.675 7.513-5.87.84-.648 1.55-.677 2.265-.112 1.895 1.507 5.787 4.754 7.52 6.046.567.504.822.597.822 1.39v9.975c0 .855-.18.88-1.01.88h-4.357c-.785 0-1.262-.273-1.262-.947v-4.798c0-.81-.114-.884-.88-.884h-3.726c-.632 0-1.01-.002-1.01.76v4.672c0 1.015-.19 1.2-.947 1.2z"
              fill="#fff"
              fill-rule="evenodd"
              stroke="#fff"
              stroke-width="1.5"
              fill-opacity=".08"
            />
            <path
              d="M213.432 64.084c-.78 0-1.136-.53-1.136-1.136V55.12c.268-.97 2.318-6.46 2.59-7.26.27-.8.507-.948 1.26-.948h11.934c.65 0 .793.4 1.01.947.523 1.313 1.754 5.006 2.462 7.573 0 2.568.063 5.975.063 7.64 0 .593-.54 1.01-1.073 1.01h-17.11z"
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
            />
            <path
              d="M212.643 55.877h3.85c.44 0 .886.307 1.17.758.376.598.657.96.978 1.515.247.422.48.726.855.726h4.546c.394 0 .923.018 1.2-.505.44-.832.71-1.28 1.104-1.954.29-.5.61-.505 1.105-.505h3.63"
              fill="none"
              stroke="#fff"
              stroke-width="1.5"
            />
            <path
              d="M212.643 55.877l-.186 7.873 18.906.125-.284-7.966-4.438.09-1.75 2.72-6.094-.097-1.938-2.72z"
              fill="#fff"
              fill-rule="evenodd"
              fill-opacity=".08"
            />
          </g>
        </svg>
  </div>
  <div class="bar"></div>
</div>

body {
  align-items: center;
  background-color: #1f2330;
  display: flex;
  justify-content: center;
  height: 100vh;
}
.container {
  position: relative;
}
.hit-area {
  cursor: pointer;
  height: 48px;
  opacity: 0;
  position: absolute;
  width: 48px;
  z-index: 1;
}
.hit-area:first-child {
  left: 29px;
  top: 9px;
}
.hit-area:nth-child(2) {
  left: 110px;
  top: 9px;
}
.hit-area:nth-child(3) {
  left: 192px;
  top: 9px;
}
.hit-area:nth-child(4) {
  left: 274px;
  top: 9px;
}
.hit-area:first-child:checked ~ .highlight {
  clip-path: polygon(
    13.693249% 33.71399%,
    14.335499% 32.880625%,
    14.984479% 32.29759%,
    15.635919% 31.95841%,
    16.285489% 31.856609%,
    16.928919% 31.985711%,
    17.561899% 32.339241%,
    18.180139% 32.910723%,
    18.779329% 33.69368%,
    19.355189% 34.681637%,
    19.903409% 35.868118%,
    20.419699% 37.246648%,
    20.899769% 38.81075%,
    21.339299% 40.55395%,
    21.734019% 42.469769%,
    22.079609% 44.551735%,
    22.371789% 46.793368%,
    22.600839% 49.130152%,
    22.761079% 51.491459%,
    22.854299% 53.861658%,
    22.882279% 56.225113%,
    22.846799% 58.56619%,
    22.749629% 60.869255%,
    22.592559% 63.118674%,
    22.377369% 65.298814%,
    22.105839% 67.39404%,
    21.779749% 69.388719%,
    21.400869% 71.267214%,
    20.970979% 73.013895%,
    20.491879% 74.613126%,
    19.965329% 76.049273%,
    19.393119% 77.306702%,
    18.777019% 78.369779%,
    18.134769% 79.203144%,
    17.485789% 79.78618%,
    16.834349% 80.125359%,
    16.184779% 80.22716%,
    15.541349% 80.098058%,
    14.908369% 79.744528%,
    14.290129% 79.173046%,
    13.690939% 78.390089%,
    13.115079% 77.402133%,
    12.566859% 76.215651%,
    12.050569% 74.837121%,
    11.570499% 73.273019%,
    11.130969% 71.52982%,
    10.736249% 69.614%,
    10.390659% 67.532034%,
    10.098479% 65.290401%,
    9.8694286% 62.953617%,
    9.7091886% 60.59231%,
    9.6159686% 58.222111%,
    9.5879886% 55.858656%,
    9.6234686% 53.517579%,
    9.7206386% 51.214514%,
    9.8777086% 48.965095%,
    10.092899% 46.784955%,
    10.364429% 44.689729%,
    10.690529% 42.69505%,
    11.069399% 40.816554%,
    11.499289% 39.069873%,
    11.978389% 37.470643%,
    12.504939% 36.034496%,
    13.077149% 34.777067%
  );
}
.hit-area:nth-child(2):checked ~ .highlight {
  clip-path: polygon(
    35.61028% 32%,
    36.36049% 32%,
    37.11069% 32%,
    37.8609% 32%,
    38.61111% 32%,
    39.36132% 32%,
    40.11153% 32%,
    40.86174% 32%,
    41.61194% 32%,
    42.35245% 32.267193%,
    43.04137% 33.033922%,
    43.66417% 34.247908%,
    44.20632% 35.856875%,
    44.65329% 37.808545%,
    44.99054% 40.050641%,
    45.20355% 42.530885%,
    45.27778% 45.197%,
    45.27778% 47.89775%,
    45.27778% 50.5985%,
    45.27778% 53.29925%,
    45.27778% 56%,
    45.27778% 58.70075%,
    45.27778% 61.4015%,
    45.27778% 64.10225%,
    45.27778% 66.803%,
    45.20356% 69.468828%,
    44.99058% 71.948937%,
    44.65336% 74.191016%,
    44.20642% 76.14275%,
    43.66429% 77.751828%,
    43.04149% 78.965937%,
    42.35253% 79.732766%,
    41.61194% 80%,
    40.86174% 80%,
    40.11153% 80%,
    39.36132% 80%,
    38.61111% 80%,
    37.8609% 80%,
    37.11069% 80%,
    36.36049% 80%,
    35.61028% 80%,
    34.86977% 79.732807%,
    34.18085% 78.966078%,
    33.55805% 77.752092%,
    33.0159% 76.143125%,
    32.56894% 74.191455%,
    32.23168% 71.949359%,
    32.01868% 69.469115%,
    31.94444% 66.803%,
    31.94444% 64.10225%,
    31.94444% 61.4015%,
    31.94444% 58.70075%,
    31.94444% 56%,
    31.94444% 53.29925%,
    31.94444% 50.5985%,
    31.94444% 47.89775%,
    31.94444% 45.197%,
    32.01866% 42.531172%,
    32.23164% 40.051062%,
    32.56886% 37.808984%,
    33.0158% 35.85725%,
    33.55793% 34.248172%,
    34.18073% 33.034063%,
    34.86969% 32.267234%
  );
}
.hit-area:nth-child(3):checked ~ .highlight {
  clip-path: polygon(
    56.72139% 32%,
    57.92299% 32.1%,
    59.12458% 33%,
    60.32618% 34.5%,
    61.52778% 35.5%,
    62.72937% 34.5%,
    63.93097% 33%,
    65.13257% 32.1%,
    66.33417% 32%,
    66.70998% 32.135594%,
    67.0596% 32.524687%,
    67.37565% 33.14075%,
    67.65076% 33.95725%,
    67.87757% 34.947656%,
    68.0487% 36.085437%,
    68.15678% 37.344062%,
    68.19444% 38.697%,
    68.19444% 43.02275%,
    68.19444% 47.3485%,
    68.19444% 51.67425%,
    68.19444% 56%,
    68.19444% 60.32575%,
    68.19444% 64.6515%,
    68.19444% 68.97725%,
    68.19444% 73.303%,
    68.15678% 74.655937%,
    68.0487% 75.914563%,
    67.87757% 77.052344%,
    67.65076% 78.04275%,
    67.37565% 78.85925%,
    67.0596% 79.475312%,
    66.70998% 79.864406%,
    66.33417% 80%,
    65.13257% 80%,
    63.93097% 80%,
    62.72937% 80%,
    61.52778% 80%,
    60.32618% 80%,
    59.12458% 80%,
    57.92299% 80%,
    56.72139% 80%,
    56.34557% 79.864406%,
    55.99596% 79.475312%,
    55.67991% 78.85925%,
    55.40479% 78.04275%,
    55.17799% 77.052344%,
    55.00686% 75.914563%,
    54.89877% 74.655938%,
    54.86111% 73.303%,
    54.86111% 68.97725%,
    54.86111% 64.6515%,
    54.86111% 60.32575%,
    54.86111% 56%,
    54.86111% 51.67425%,
    54.86111% 47.3485%,
    54.86111% 43.02275%,
    54.86111% 38.697%,
    54.89877% 37.344063%,
    55.00686% 36.085437%,
    55.17799% 34.947656%,
    55.40479% 33.95725%,
    55.67991% 33.14075%,
    55.99596% 32.524687%,
    56.34557% 32.135594%
  );
}
.hit-area:nth-child(4):checked ~ .highlight {
  clip-path: polygon(
    81.32226% 33.71399%,
    81.96451% 32.880625%,
    82.61349% 32.29759%,
    83.26493% 31.95841%,
    83.9145% 31.856609%,
    84.55793% 31.985711%,
    85.19091% 32.339241%,
    85.80915% 32.910723%,
    86.40834% 33.69368%,
    86.9842% 34.681637%,
    87.53242% 35.868118%,
    88.04871% 37.246648%,
    88.52878% 38.81075%,
    88.96831% 40.55395%,
    89.36303% 42.469769%,
    89.70862% 44.551735%,
    90.0008% 46.793368%,
    90.22985% 49.130152%,
    90.39009% 51.491459%,
    90.48331% 53.861658%,
    90.51129% 56.225113%,
    90.47581% 58.56619%,
    90.37864% 60.869255%,
    90.22157% 63.118674%,
    90.00638% 65.298814%,
    89.73485% 67.39404%,
    89.40876% 69.388719%,
    89.02988% 71.267214%,
    88.59999% 73.013895%,
    88.12089% 74.613126%,
    87.59434% 76.049273%,
    87.02213% 77.306702%,
    86.40603% 78.369779%,
    85.76378% 79.203144%,
    85.1148% 79.78618%,
    84.46336% 80.125359%,
    83.81379% 80.22716%,
    83.17036% 80.098058%,
    82.53738% 79.744528%,
    81.91914% 79.173046%,
    81.31995% 78.390089%,
    80.74409% 77.402133%,
    80.19587% 76.215651%,
    79.67958% 74.837121%,
    79.19951% 73.273019%,
    78.75998% 71.52982%,
    78.36526% 69.614%,
    78.01967% 67.532034%,
    77.72749% 65.290401%,
    77.49844% 62.953617%,
    77.3382% 60.59231%,
    77.24498% 58.222111%,
    77.217% 55.858656%,
    77.25248% 53.517579%,
    77.34965% 51.214514%,
    77.50672% 48.965095%,
    77.72191% 46.784955%,
    77.99344% 44.689729%,
    78.31954% 42.69505%,
    78.69841% 40.816554%,
    79.1283% 39.069873%,
    79.6074% 37.470643%,
    80.13395% 36.034496%,
    80.70616% 34.777067%
  );
}
.options,
.highlight {
  height: 100px;
  position: absolute;
  top: -20px;
}
.highlight {
  transition: clip-path 500ms;
}
.bar {
  background-color: #fff;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  display: flex;
  justify-content: space-around;
  height: 80px;
  padding: 0 16px;
  width: 328px;
}

//   ____  ____  ____  ____ 
//  ||N | ||o | ||J | ||S ||
//  ||__| ||__| ||__| ||__||
//  |/__\ |/__\ |/__\ |/__\|