body {
  align-items: center;
  background-color: #e1fee2;
  display: flex;
  font-family: sans-serif;
  font-weight: 900;
  height: 100vh;
  justify-content: center;
  margin: 0;
}

.box {
  --box-width: 300px;
  border-radius: 16px;
  box-shadow: 0 2.2px 2.2px rgba(0, 0, 0, 0.068),
    0 5.3px 5.3px rgba(0, 0, 0, 0.093), 0 10px 10px rgba(0, 0, 0, 0.103),
    0 17.9px 17.9px rgba(0, 0, 0, 0.11), 0 33.4px 33.4px rgba(0, 0, 0, 0.115),
    0 80px 80px rgba(0, 0, 0, 0.12);
  height: var(--box-width);
  overflow: hidden;
  position: relative;
  width: var(--box-width);
}

.drop {
  background: linear-gradient(#37854f, #173620);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
}

.activator {
  height: 100%;
  position: absolute;
  width: 100%;
}

.activator.northwest {
  /* background-color: #fff; */
  clip-path: polygon(50% 50%, 0% 25%, 0% 0%, 25% 0%);
}

.activator.north {
  /* background-color: #f9f; */
  clip-path: polygon(50% 50%, 25% 0%, 75% 0%);
}

.activator.northeast {
  /* background-color: #ff9; */
  clip-path: polygon(50% 50%, 75% 0%, 100% 0%, 100% 25%);
}

.activator.east {
  /* background-color: #9ff; */
  clip-path: polygon(50% 50%, 100% 25%, 100% 75%);
}

.activator.southeast {
  /* background-color: #99f; */
  clip-path: polygon(50% 50%, 100% 75%, 100% 100%, 75% 100%);
}

.activator.south {
  /* background-color: #f99; */
  clip-path: polygon(50% 50%, 25% 100%, 75% 100%);
}

.activator.southwest {
  /* background-color: #999; */
  clip-path: polygon(50% 50%, 0% 75%, 0% 100%, 25% 100%);
}

.activator.west {
  /* background-color: #9f9; */
  clip-path: polygon(50% 50%, 0% 25%, 0% 75%);
}

.activator:hover {
  left: 0;
  height: 100%;
  top: 0;
  clip-path: none;
  width: 100%;
  z-index: 1;
}

.overlay {
  align-items: center;
  display: flex;
  font-size: 52px;
  height: 100%;
  justify-content: center;
  position: absolute;
  transition: clip-path 500ms cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 100%;
  z-index: -1;
}

.overlay.northwest {
  background: conic-gradient(from -0.125turn, #ffe000, #799f0c 1turn);
}

.overlay.north {
  background: conic-gradient(from 0turn, #ffe000, #799f0c 1turn);
}

.overlay.northeast {
  background: conic-gradient(from 0.125turn, #ffe000, #799f0c 1turn);
}

.overlay.east {
  background: conic-gradient(from 0.25turn, #ffe000, #799f0c 1turn);
}

.overlay.southeast {
  background: conic-gradient(from 0.375turn, #ffe000, #799f0c 1turn);
}

.overlay.south {
  background: conic-gradient(from 0.5turn, #ffe000, #799f0c 1turn);
}

.overlay.southwest {
  background: conic-gradient(from 0.625turn, #ffe000, #799f0c 1turn);
}

.overlay.west {
  background: conic-gradient(from 0.75turn, #ffe000, #799f0c 1turn);
}

.activator.northwest:not(:hover) ~ .overlay.northwest {
  clip-path: path(
    "M -657.60889,-233.34482 -162.63415,261.62992 -91.923471,-91.923469 -70.710261,-70.71026 -141.42094,282.84313 -113.13667,311.1274 -42.425991,-42.42599 -10.606191,-10.60619 -81.316871,342.9472 -70.710261,353.5538 4.0845702e-4,4.0973178e-4 353.5538,-70.71026 342.9472,-81.316869 -10.606191,-10.60619 -42.425991,-42.42599 311.1274,-113.13667 282.84313,-141.42094 -70.710261,-70.71026 -91.923471,-91.923469 261.62992,-162.63415 -233.34483,-657.60889 Z"
  );
}

.activator.northwest:hover ~ .overlay.northwest {
  clip-path: path(
    "M -265.68589,158.57818 229.28885,653.55292 299.99953,299.99953 321.21274,321.21274 250.50206,674.76613 278.78633,703.0504 349.49701,349.49701 381.31681,381.31681 310.60613,734.8702 321.21274,745.4768 391.92341,391.92341 745.4768,321.21274 734.8702,310.60613 381.31681,381.31681 349.49701,349.49701 703.0504,278.78633 674.76613,250.50206 321.21274,321.21274 299.99953,299.99953 653.55292,229.28885 158.57817,-265.68589 Z"
  );
}

.activator.north:not(:hover) ~ .overlay.north {
  clip-path: path(
    "M 0,-530 V -130 L 150,-230 V -200 L 0,-100 V -60 L 150,-160 V -115 L 0,-15 V 0 L 150,-100 300,0 V -15 L 150,-115 V -160 L 300,-60 V -100 L 150,-200 V -230 L 300,-130 V -530 Z"
  );
}

.activator.north:hover ~ .overlay.north {
  clip-path: path(
    "M 0,0 V 400 L 150,300 V 330 L 0,430 V 470 L 150,370 V 415 L 0,515 V 530 L 150,430 300,530 V 515 L 150,415 V 370 L 300,470 V 430 L 150,330 V 300 L 300,400 V 0 Z"
  );
}

.activator.northeast:not(:hover) ~ .overlay.northeast {
  clip-path: path(
    "M 533.34481,-657.60889 38.370072,-162.63418 391.92348,-91.923523 370.71027,-70.710311 17.156862,-141.42097 -11.127417,-113.1367 342.42599,-42.426041 310.60619,-10.606244 -42.947227,-81.316921 -53.553827,-70.710311 299.99959,3.5836464e-4 370.71027,353.5538 381.31688,342.9472 310.60619,-10.606244 342.42599,-42.426041 413.13666,311.1274 441.42093,282.84313 370.71027,-70.710311 391.92348,-91.923523 462.63414,261.62992 957.60887,-233.34482 Z"
  );
}

.activator.northeast:hover ~ .overlay.northeast {
  clip-path: path(
    "M 141.4218,-265.68589 -353.55295,229.28884 4.7145283e-4,299.99951 -21.21274,321.21272 -374.76616,250.50205 -403.05043,278.78632 -49.497012,349.49699 -81.316812,381.31679 -434.87023,310.60611 -445.47683,321.21272 -91.923412,391.92339 -21.21274,745.4768 -10.606129,734.8702 -81.316812,381.31679 -49.497012,349.49699 21.21365,703.0504 49.49792,674.76613 -21.21274,321.21272 4.7145283e-4,299.99951 70.711135,653.55292 565.68586,158.57817 Z"
  );
}

.activator.east:not(:hover) ~ .overlay.east {
  clip-path: path(
    "M 830.00026,300 H 430.00026 L 530.00026,150 H 500.00026 L 400.00026,300 H 360.00026 L 460.00026,150 H 415.00027 L 315.00026,300 H 300.00026 L 400.00026,150 300.00026,-1.05e-6 H 315.00026 L 415.00027,150 H 460.00026 L 360.00026,-1.05e-6 H 400.00026 L 500.00026,150 H 530.00026 L 430.00026,-1.05e-6 H 830.00026 Z"
  );
}

.activator.east:hover ~ .overlay.east {
  clip-path: path(
    "M 300.00026,300 H -99.999742 L 2.5709591e-4,150 H -29.999742 L -129.99974,300 H -169.99974 L -69.999742,150 H -114.99973 L -214.99974,300 H -229.99974 L -129.99974,150 -229.99974,-1.05e-6 H -214.99974 L -114.99973,150 H -69.999742 L -169.99974,-1.05e-6 H -129.99974 L -29.999742,150 H 2.5709591e-4 L -99.999742,-1.05e-6 H 300.00026 Z"
  );
}

.activator.southeast:not(:hover) ~ .overlay.southeast {
  clip-path: path(
    "M 957.60886,533.34479 462.63412,38.370053 391.92344,391.92344 370.71023,370.71023 441.42091,17.156843 413.13664,-11.127426 342.42596,342.42597 310.60616,310.60617 381.31684,-42.947227 370.71023,-53.553827 299.99956,299.99957 -53.553827,370.71023 -42.947227,381.31684 310.60616,310.60617 342.42596,342.42597 -11.127426,413.13664 17.156844,441.42091 370.71023,370.71023 391.92344,391.92344 38.370054,462.63412 533.3448,957.60886 Z"
  );
}

.activator.southeast:hover ~ .overlay.southeast {
  clip-path: path(
    "M 565.68586,141.42179 70.711126,-353.55295 4.4388203e-4,4.4188117e-4 -21.212767,-21.212769 49.497913,-374.76616 21.213643,-403.05043 -49.497037,-49.497039 -81.316837,-81.316839 -10.606157,-434.87023 -21.212767,-445.47683 -91.923437,-91.923439 -445.47683,-21.212769 -434.87023,-10.606159 -81.316837,-81.316839 -49.497037,-49.497039 -403.05043,21.213641 -374.76616,49.497911 -21.212767,-21.212769 4.4388203e-4,4.4188117e-4 -353.55295,70.711126 141.4218,565.68586 Z"
  );
}

.activator.south:not(:hover) ~ .overlay.south {
  clip-path: path(
    "M 300,830.00026 V 430.00025 L 150,530.00024 V 500.00024 L 300,400.00026 V 360.00026 L 150,460.00025 V 415.00026 L 300,315.00026 V 300.00026 L 150,400.00026 0,300.00026 V 315.00026 L 150,415.00026 V 460.00025 L 0,360.00026 V 400.00026 L 150,500.00024 V 530.00024 L 0,430.00025 V 830.00026 Z"
  );
}

.activator.south:hover ~ .overlay.south {
  clip-path: path(
    "M 300,300.00026 V -99.999744 L 150,2.4619591e-4 V -29.999752 L 300,-129.99974 V -169.99974 L 150,-69.999748 V -114.99974 L 300,-214.99974 V -229.99974 L 150,-129.99974 0,-229.99974 V -214.99974 L 150,-114.99974 V -69.999748 L 0,-169.99974 V -129.99974 L 150,-29.999752 V 2.4619591e-4 L 0,-99.999744 V 300.00026 Z"
  );
}

.activator.southwest:not(:hover) ~ .overlay.southwest {
  clip-path: path(
    "M -232.88396,956.31126 261.11342,462.31387 -91.74186,391.74282 -70.570531,370.57149 282.28474,441.14255 310.51317,412.91413 -42.342125,342.34307 -10.585155,310.5861 342.27014,381.15716 352.85579,370.57149 4.952425e-4,300.00045 -70.570531,-52.85483 -81.156201,-42.269173 -10.585155,310.5861 -42.342125,342.34307 -112.91317,-10.512202 -141.14159,17.716219 -70.570531,370.57149 -91.74186,391.74282 -162.31291,38.887542 -656.31029,532.88493 Z"
  );
}

.activator.southwest:hover ~ .overlay.southwest {
  clip-path: path(
    "M 158.57818,565.68586 653.55292,70.71112 299.99953,4.3666483e-4 321.21274,-21.212773 674.76613,49.497907 703.0504,21.213637 349.49701,-49.497043 381.31681,-81.316843 734.8702,-10.606163 745.4768,-21.212773 391.92341,-91.923443 321.21274,-445.47683 310.60613,-434.87023 381.31681,-81.316843 349.49701,-49.497043 278.78633,-403.05043 250.50206,-374.76616 321.21274,-21.212773 299.99953,4.3666483e-4 229.28884,-353.55295 -265.68589,141.42179 Z"
  );
}

.activator.west:not(:hover) ~ .overlay.west {
  clip-path: path(
    "M -530,300 H -130 L -230,150 H -200 L -100,300 H -60 L -160,150 H -115 L -15,300 H 0 L -100,150 0,0 H -15 L -115,150 H -160 L -60,0 H -100 L -200,150 H -230 L -130,0 H -530 Z"
  );
}

.activator.west:hover ~ .overlay.west {
  clip-path: path(
    "M 0,300 H 400 L 300,150 H 330 L 430,300 H 470 L 370,150 H 415 L 515,300 H 530 L 430,150 530,0 H 515 L 415,150 H 370 L 470,0 H 430 L 330,150 H 300 L 400,0 H 0 Z"
  );
}