body {
  padding: 0;
  margin: 0;
  background-color: #000000;
  overflow: hidden;
}
.container {
  height: 700px;
  width: 700px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  clip-path: url(#map-path);
}
svg {
  height: 0;
  width: 0;
}
.color-orange,
.color-green {
  position: absolute;
  width: 100%;
  height: 39%;
  left: 0;
  animation: slide-right 6s;
}
.color-orange {
  top: 0;
  background: linear-gradient(#fec200, #ff8a00);
}
.color-green {
  bottom: 0;
  background: linear-gradient(#4cc701, #0a8d03);
}
@keyframes slide-right {
  0% {
    left: -100%;
  }
}
.color-white {
  position: absolute;
  width: 100%;
  height: 22%;
  top: 39%;
  background-color: #ffffff;
  right: 0;
  animation: slide-left 6s;
}
@keyframes slide-left {
  0% {
    right: -100%;
  }
}
#ashoka-chakra {
  height: 120px;
  width: 120px;
  position: absolute;
  margin: auto;
  left: -150px;
  right: 0;
  top: 0;
  bottom: 0;
  animation: spin 3s 4.2s forwards;
  transform: scale(0);
}
@keyframes spin {
  80% {
    transform: scale(1.6) rotate(360deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}