flag.css

  .container {
    height: 700px;
    width: 700px;
    position: absolute;
    right: 0;
    /* 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);
    }
  }