Happy Independence Day - Animated Pure CSS & JS Indian Flag with Tricolor Text
<!-- Happy Independence Day -->
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS YT CHANNEL ------>
<!-- single-file HTML, CSS and JavaScript web page that creates an Indian Flag with wave. ------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Happy Independence Day - Pure CSS Flag</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #0d1117;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* Web-safe system fonts (No external font link needed) */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
overflow: hidden;
}
/* ======= MAIN CONTAINER ======= */
.main-container {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
}
/* ======= FLAG & POLE WRAPPER ======= */
.flag-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.pole-and-flag {
display: flex;
align-items: flex-start;
}
/* ======= FLAGPOLE ======= */
.flag-pole {
position: relative;
width: 12px;
height: 420px;
background: linear-gradient(90deg, #3a3a3a 0%, #a8a8a8 50%, #222222 100%);
border-radius: 6px 6px 0 0;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
z-index: 2;
}
/* Gold knob on top of pole */
.flag-pole::before {
content: '';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 22px;
background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
border-radius: 50%;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
/* ======= 3-TIER STAIR BASE ======= */
.stairs-base {
display: flex;
flex-direction: column;
align-items: center;
margin-left: -300px;
}
.stair {
height: 16px;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
border: 1px solid #777;
}
.stair-1 {
width: 80px;
background: linear-gradient(180deg, #e0e0e0 0%, #9e9e9e 100%);
}
.stair-2 {
width: 140px;
background: linear-gradient(180deg, #d6d6d6 0%, #8d8d8d 100%);
}
.stair-3 {
width: 200px;
background: linear-gradient(180deg, #cccccc 0%, #7c7c7c 100%);
}
/* ======= FLAG CONTAINER ======= */
.flag {
position: relative;
width: 300px;
height: 200px;
margin-top: 5px;
box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
white-space: nowrap;
}
.flag-element {
position: relative;
width: 1px;
height: 100%;
display: inline-block;
animation: wave 1.2s ease-in-out infinite alternate;
/* CSS Tricolor Stripes */
background: linear-gradient(180deg,
#FF9933 0%, #FF9933 33.33%,
#FFFFFF 33.33%, #FFFFFF 66.66%,
#138808 66.66%, #138808 100%
);
}
/* Ashoka Chakra Overlay */
.chakra {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
z-index: 10;
pointer-events: none;
}
/* ======= WAVING ANIMATION ======= */
@keyframes wave {
0% {
top: 4px;
}
100% {
top: -8px;
}
}
/* ======= RIGHT SIDE TRICOLOR TITLE ======= */
.title-text {
text-transform: uppercase;
font-size: 3.2rem;
font-weight: 900;
line-height: 1.15;
letter-spacing: 2px;
background: linear-gradient(180deg, #FF9933 0%, #FF9933 33%, #FFFFFF 34%, #FFFFFF 66%, #138808 67%, #138808 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.8));
text-align: left;
}
</style>
</head>
<body>
<div class="main-container">
<!-- LEFT SIDE: FLAG ASSEMBLY -->
<div class="flag-wrapper">
<div class="pole-and-flag">
<div class="flag-pole"></div>
<div class="flag">
<!-- Inline SVG Ashoka Chakra (No external assets required) -->
<svg class="chakra" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#000080" stroke-width="4" fill="none"/>
<circle cx="50" cy="50" r="6" fill="#000080"/>
<!-- 24 Spokes -->
<g stroke="#000080" stroke-width="2">
<line x1="50" y1="50" x2="50" y2="5"/><line x1="50" y1="50" x2="50" y2="95"/>
<line x1="50" y1="50" x2="5" y2="50"/><line x1="50" y1="50" x2="95" y2="50"/>
<line x1="50" y1="50" x2="18.18" y2="18.18"/><line x1="50" y1="50" x2="81.82" y2="81.82"/>
<line x1="50" y1="50" x2="81.82" y2="18.18"/><line x1="50" y1="50" x2="18.18" y2="81.82"/>
<line x1="50" y1="50" x2="10.87" y2="32.64"/><line x1="50" y1="50" x2="89.13" y2="67.36"/>
<line x1="50" y1="50" x2="32.64" y2="10.87"/><line x1="50" y1="50" x2="67.36" y2="89.13"/>
<line x1="50" y1="50" x2="67.36" y2="10.87"/><line x1="50" y1="50" x2="32.64" y2="89.13"/>
<line x1="50" y1="50" x2="89.13" y2="32.64"/><line x1="50" y1="50" x2="10.87" y2="67.36"/>
<line x1="50" y1="50" x2="6.7" y2="41.32"/><line x1="50" y1="50" x2="93.3" y2="58.68"/>
<line x1="50" y1="50" x2="41.32" y2="6.7"/><line x1="50" y1="50" x2="58.68" y2="93.3"/>
<line x1="50" y1="50" x2="58.68" y2="6.7"/><line x1="50" y1="50" x2="41.32" y2="93.3"/>
<line x1="50" y1="50" x2="93.3" y2="41.32"/><line x1="50" y1="50" x2="6.7" y2="58.68"/>
</g>
</svg>
</div>
</div>
<!-- 3 Stairs Base -->
<div class="stairs-base">
<div class="stair stair-1"></div>
<div class="stair stair-2"></div>
<div class="stair stair-3"></div>
</div>
</div>
<!-- RIGHT SIDE: TRICOLOR HEADING -->
<div class="title-text">
HAPPY<br>
INDEPENDENCE<br>
DAY
</div>
</div>
<!-- Inline Pure JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var flag = document.querySelector('.flag');
var flagWidth = flag.offsetWidth;
for (var i = 0; i < flagWidth; i++) {
var flagElement = document.createElement('div');
flagElement.className = 'flag-element';
// Animation Delay per strip to create wave movement
flagElement.style.animationDelay = (i * 8) + 'ms';
flag.appendChild(flagElement);
}
});
</script>
</body>
</html>
No comments:
Post a Comment