How to make Indian flag with css & html

<!DOCTYPE html>
<html>
  <head>
    <title>INDIAN FLAG</title>
    <meta name="viewport" content="width=device-width, initial-1" />
    <style>
      .wrapper {
        display: flex;
      }

      .stick {
        height: 450px;
        width: 10px;
        background: black;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }

      .flag {
        width: 270px;
        height: 180px;
        box-shadow: 0px 0px 90px 1px #989;
        background-color: transparent;
        position: relative;
      }

      .top {
        height: 60px;
        background-color: #ff9933;
      }

      .middle {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .bottom {
        height: 60px;
        background-color: green;
      }

      .wheel {
        height: 43px;
        width: 43px;
        border: 1px solid darkblue;
        border-radius: 45px;
        position: relative;
        margin: 0 auto;
        animation-name: wheel;
        animation-iteration-count: infinite;
        animation-duration: 5s;
        animation-timing-function: linear;
      }

      .wheel .line {
        height: 100%;
        width: 1px;
        display: inline-block;
        position: absolute;
        left: 50%;
        background: darkblue;
      }

      .line:nth-child(1) {
        transform: rotate(15deg);
      }

      .line:nth-child(2) {
        transform: rotate(30deg);
      }

      .line:nth-child(3) {
        transform: rotate(45deg);
      }

      .line:nth-child(4) {
        transform: rotate(60deg);
      }

      .line:nth-child(5) {
        transform: rotate(75deg);
      }

      .line:nth-child(6) {
        transform: rotate(90deg);
      }

      .line:nth-child(7) {
        transform: rotate(105deg);
      }

      .line:nth-child(8) {
        transform: rotate(120deg);
      }

      .line:nth-child(9) {
        transform: rotate(135deg);
      }

      .line:nth-child(10) {
        transform: rotate(150deg);
      }

      .line:nth-child(11) {
        transform: rotate(165deg);
      }

      .line:nth-child(12) {
        transform: rotate(180deg);
      }

      @keyframes wheel {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .wave {
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: linear-gradient(
          128deg,
          rgba(89, 72, 21, 0) 39%,
          rgba(250, 245, 245, 0.8474025974025974) 46%,
          rgba(89, 72, 21, 0) 53%
        );
        animation-name: wavy;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      @keyframes wavy {
        0% {
          background-position: -400px 0px, -400px 0px, -400px 0px, -400px 0px;
        }
        100% {
          background-position: 800px 0px, 800px 0px, 800px 0px, 800px 0px;
        }
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="stick"></div>
      <div class="flag">
        <div class="wave"></div>
        <div class="top"></div>
        <div class="middle">
          <div class="wheel">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </div>
        <div class="bottom"></div>
      </div>
    </div>
  </body>
</html>