Pure CSS Animated Indian Flag HTML Code

Namaste!

Pure CSS Animated Indian Flag

Hey, in this tutorial I am going to share with you the code for making an Indian Flag using CSS.

Just put the below code inside your code file and enjoy.

I have starred some elements or words that will be defined in the last OK.

CSS Animated Indian Flag Youtube Tutorial

CSS Animated Indian Flag Source Code

so, here is the .html file code just put it inside your html file and then go to the next step of replacing your style.css file code.

.html file code

<div class="main-container">
        <div class="pr">
            <div class="flag1">
                <div class="pr">
                    <div class="color1"></div>
                    <div class="color2"></div>
                    <div class="color3"></div>
                </div>
            </div>
            <div class="flag2">
                <div class="pr">
                    <div class="color1"></div>
                    <div class="color2"></div>
                    <div class="color3"></div>
                    <div class="circle">
                        <div class="inner-circle"></div>
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="line line3"></div>
                        <div class="line line4"></div>
                        <div class="line line5"></div>
                        <div class="line line6"></div>
                        <div class="line line7"></div>
                        <div class="line line8"></div>
                        <div class="line line9"></div>
                        <div class="line line10"></div>
                        <div class="line line11"></div>
                        <div class="line line12"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

.css file code

Put below code inside your <style></style> tags or into style.css file

body {
    padding: 0;
    margin: 0%;
    background: #3b3b3b;
    min-height: 100%;
    min-width: 100%;
}

.main-container {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 400px;
    width: 400px;
    position: absolute;
}

.pr {
    position: relative;
}

.main-container>.pr {
    height: 400px;
    height: 400px;
}

.flag1 {
    height: 275px;
    width: 210px;
    position: absolute;
    top: 25px;
    left: 35px;
    border-radius: 30px 0 0 30px;
    z-index: 2;
}

.flag1 .color1 {
    border-bottom: 91.66px solid #fc891d;
    border-right: 40px solid transparent;
    width: 90px;
    border-top-left-radius: 30px;
    box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.4);
}

.flag1 .color2 {
    border-bottom: 91.66px solid #efefef;
    border-right: 40px solid transparent;
    width: 130px;
}

.flag1 .color3 {
    border-bottom: 91.66px solid #009154;
    border-right: 40px solid transparent;
    width: 170px;
    border-bottom-left-radius: 30px;
    box-shadow: -3px 5px 5px -2px rgba(0, 0, 0, 0.4);
}

.flag2 {
    height: 275px;
    width: 232px;
    position: absolute;
    top: 75px;
    left: 145px;
    border-radius: 0 30px 30px 0;
    z-index: 1;
}

.flag2:after {
    content: "";
    position: absolute;
    height: 97px;
    width: 200px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1));
    top: 38px;
    left: -78px;
    transform: rotate(40deg);
}

.flag2 .color1 {
    border-bottom: 91px solid #fc891d;
    width: 100%;
    border-top-right-radius: 30px;
}

.flag2 .color2 {
    border-bottom: 91px solid #efefef;
    box-shadow: 5px 7px 21px rgba(0, 0, 0, 0.4);
    width: 100%;
}

.flag2 .color3 {
    border-bottom: 92px solid #009154;
    width: 192px;
    margin-left: 40px;
    border-bottom-right-radius: 30px;
    box-shadow: 5px 7px 21px rgba(0, 0, 0, 0.3);
}

.flag2 .color3:before {
    content: "";
    position: absolute;
    border-top: 50px solid #00562f;
    height: 50px;
    width: 0;
    bottom: -50px;
    left: 0;
    border-left: 40px solid transparent;
}

.flag2 .color3:after {
    content: "";
    position: absolute;
    border-top: 50px solid #00562f;
    height: 50px;
    width: 0;
    bottom: -50px;
    left: 40px;
    border-right: 60px solid transparent;
}

.flag2 .circle {
    height: 60px;
    width: 60px;
    position: absolute;
    border: 4px solid #4c3d99;
    border-radius: 50%;
    top: 100px;
    left: 50px;
}

.flag2 .inner-circle {
    background-color: #4c3d99;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

.circle .line {
    background-color: #4c3d99;
    width: 2px;
    height: 55px;
    border-radius: 2px;
    position: absolute;
    top: 2px;
    left: 29px;
}

.circle .line1 {
    transform: rotate(15deg);
}

.circle .line2 {
    transform: rotate(30deg);
}

.circle .line3 {
    transform: rotate(45deg);
}

.circle .line4 {
    transform: rotate(60deg);
}

.circle .line5 {
    transform: rotate(75deg);
}

.circle .line6 {
    transform: rotate(90deg);
}

.circle .line7 {
    transform: rotate(105deg);
}

.circle .line8 {
    transform: rotate(120deg);
}

.circle .line9 {
    transform: rotate(135deg);
}

.circle .line10 {
    transform: rotate(150deg);
}

.circle .line11 {
    transform: rotate(165deg);
}

.circle .line12 {
    transform: rotate(180deg);
}

.circle {
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Thank You!