flag.css

*{
    box-sizing: border-box;
    margin: 0;
}
body{
    width: 100%;
    height: 100vh;
    display: grid;
    /* place-items: center; */
    justify-content: center;
    align-items: center;
}
.container{
    display: flex;
}
.pole{
    height: 450px;
    width: 10px;
    background-color: black;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.flag{
    position: relative;
    width: 300px;
    height: 200px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transform-origin: left center;
}
.tricolor{
    background: linear-gradient(#ff9933 33%, 
    #fff 33%, #fff 66%, green 0);;
    display: grid;
    place-items: center;
}
.wheel{
    height: 50px;
    width: 50px;
    border: 1px solid darkblue;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
}
.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);
}

.wheel{
    animation-name: chakra;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes chakra {
    0%{
        transform: rotate(0deg);
    }
   100%{
        transform: rotate(360deg);
    }
}
.flag{
    animation-name: wave;
    animation-timing-function: ease-in-out;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes wave {
    0%{
        transform: perspective(600px) rotateY(0deg);
    }
    25%{
        transform: perspective(600px) rotateY(10deg);
    }
    50%{
        transform: perspective(600px) rotateY(-10deg);
    }
    75%{
        transform: perspective(600px) rotateY(10deg);
    }
    100%{
        transform: perspective(600px) rotateY(0deg);
    }
}
.wave {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg, 
    rgba(89, 72, 21, 0) 39%,
    rgba(250, 245, 245, 0.8474025974025974) 46%,
    rgba(89, 72, 21, 0) 53%);
    animation-name: waves;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes waves {
    0% {
        background-position: -400px 0px,-400px 0px, 
        -400px 0px, -400px 0px;
    }
    100% {
        background-position: 800px 0px,800px 0px,
                             800px 0px, 800px 0px;
    }
    
}

.text {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h2 {
    font-size: 5em;
    font-family: serif;
    color: transparent;
    text-align: center;
    animation: effect 2s linear infinite;
}

@keyframes effect {
    0% {
        background: linear-gradient(#ff9933, #14e609cb);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#000FFF,#fff );
        -webkit-background-clip: text;
    }
}