Happy Independence Day HTML & CSS Animation

Happy Independence Day HTML & CSS Animation

Introduction

Every year on August 15th, India celebrates Independence Day. It's a day for freedom and showing love for the country. To celebrate online, how about making a cool animated greeting with HTML and CSS? It could show the Indian flag colors, the Ashoka Chakra, and a well-known India map.

In this guide, I will show you how to create a Happy Independence Day animation. The code uses CSS clip-path for the India map shape, moving tri-color background stripes, and a spinning Ashoka Chakra.

Table of Contents

1. Project Overview

Your project uses the following visual elements and animation techniques:

  • The Indian flag colors (saffron/orange, white, and green) appear as sliding horizontal stripes.
  • The Ashoka Chakra (blue 24-spoke wheel) scales up and spins into place.
  • The entire animation is masked inside the shape of India’s map using CSS clip-path referencing an SVG clipPath.
  • Black background highlights the colors and animation elegantly.

2. Understanding the Project Structure

Your project consists mainly of:

  • index.html — contains the HTML markup and SVG clipPath
  • style.css — holds all styles and animations
  • ashoka-chakra.svg — an SVG image for the Ashoka Chakra

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Independence Day</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <svg xmlns="http://www.w3.org/2000/svg">
  <clipPath id="map-path">
    <path
      class="cls-1"
      d="M203.08,118.79c4-.37,4.3,5.95.2,6.21-1.16.07-3.62-1-4.51-.41-1.86,1.2-2.58,3.24-4.91,3.76-2.92.64-2.9,1.79-4.71,3.94s-1.83,2.11-.11,4.45c.94,1.32,1.36,4.13,1.43,5.74.11,2.46-3.43,2.81-2.08,5.91,1,2.34.42,1.38-1.64,2.46s-2.1,3.86-3.19,5.58c-2.19,3.45-7.19,5.09-8.23,9.29-.4,1.64,1.32,4.68-.31,5.9a17.38,17.38,0,0,1-5.28,2.95c-1.81.55-4.2.42-5.6,1.9-2.14,2.28-1.78,6-2.77,8.77-.91,2.56-2.11,3.56-3.71,5.67s-2.67,5-4.55,7.12c-.91,1-2.81,4.1-4,4.65-2,.93-5-1.68-6.64.87-1.35,2.11-2,3.47-3.88,5.26s-1.55,4.45-3,6.46-3.61,2.28-5.34,3.62c-2,1.51-1.15,3.54-2.12,5.45-1.37,2.68-8.61.67-11.15,1.13-2.16.38-5.5.22-7.41,1.33-1.14.67-4.1,3.27-4.89,1.78-1.08-2.08-1-3.48-.6-5.7.28-1.69,1-3.25-1.3-3.12-6.48.38-10.64,2.41-14.62,7.59-2.22,2.89-2.91,5.38-6.26,7.32-2.69,1.57-5.7,2.85-7.62,5.44-2.62,3.54-1.6,14.68,3.82,15.4,2.87.38,4.67,2.6,7.82,2.39,3.51-.23,1.46,3.35.32,5.36-1.51,2.67-2.81,5.05-1.74,8.13a23.41,23.41,0,0,0,5,8.46c1.56,1.59,3.47,1.29,5.53,1,4.26-.65,1,2.35,1.72,5.11,1.79,6.56,9.78,16.87,5.64,23.71-.86,1.42-1.68.82-2,2.85-.26,1.44-1.43,0-2.44.25.19-.05-.19-5.78-2.29-5.67-3.06.16-5.52,2.29-8.52,2.66-1.09.13-2.93-.65-3.71.4a5.46,5.46,0,0,0-.67,3.82c-1.92-.29-4.05-.21-5.87-.94-2.07-.82-2.79-3.42-4.89-4.23s-3.45,1.23-5.34,1.8c-2.21.67-6-1.34-8.25-1.86-1.65-.39-3.67-1.63-5.4-1s-2.46,3.54-2,5.06-.2,4.11-2.27,3.34c-1-.36-1.88,0-2.87-.14-1.32-.21-1.94-1.51-3.22-1.8-4.74-1-3.86,6.39-4.55,8.45-.56,1.64-3.53,2.58-1.21,4.54.61.51,1.53,1.75,2.32,1.93s1.39-.8,2,0c2,2.4,5,4.09,5.78,7.19.85,3.49,5,6.68,8,8.36,3.71,2.07,7.54,4.37,11.59,5.67,2.13.67,4.36.2,6.52.3,3,.14.33-4,3.74-2.7,1.9.71,4.74.78,6.33-.68,1.15-1.05,2.37-1.95,4-.79.66.47-3.28,3.77-3.58,4-2.15,1.83-4.32.69-6.58,2-1.77,1.05-4.27,1.22-5.81,2.4-2,1.56-3.62-.85-5.54.29-.86.51-3.53,2.3-4.24,1-1-1.91-1-3.36-3.55-3.43-3.77-.07-6,3.23-5.71,6.75.46,4.7,5.44,8.66,8.42,11.86,3.29,3.53,6.59,6.74,9.62,10.5,3.2,4,5.32,8.62,9.07,12.25,1.8,1.74,4.37,2.13,5.41,4.54,1.16,2.69,3.93,2.29,6.26,3.28,2,.85,3.51,3.51,6,1.87.73-.49,1.8-1.75,2.81-1.62,1.58.2,2.39.5,4-.07,1.9-.67,5.18-.65,6.68-1.95a9.94,9.94,0,0,1,6.13-2.79c2.26-.33,3.06-.81,4.28-2.45,1.33-1.79,4.88-.63,6.2-3.06.58-1.06.69-2.25,1.33-3.31.89-1.47,2.39-2.2,3.33-3.55,1.56-2.23,0-4.28-1.08-6.22-.4-.76.52-1.06.95-1.4,1.18-.9.38-2.22,0-3.32-1-2.54-.67-5.6,2.07-7-.61.33-.38,3.85-.36,4.45.08,3.26,1.46,1.57,3.52,2,.66.14-3.1,3-3.1,3.67,0,3.36,2.31,3.38,4.52,3.72-.95-.16-1.53,2.06-1.51,2.79,0,1.55,0,1.31-1.06,2.1-1.53,1.12-1.74,2.6-1.48,4.38.34,2.33,1.86,2.33,2.79,4,.64,1.17-1,1.9.41,3.4,1.82,1.94,1,3.41,1.94,5.65a8,8,0,0,1,.93,3.58c-.06,2.25-3.38,3.17-3.7,5.55-.41,2.93-.2,6.32-2.06,8.87-2.78,3.82,2.63,5.67,1.26,9-1,2.27.44,2.57.94,4.51.42,1.62-.45,3.74-.4,5.45.07,2.21,1.25,4.09,1.38,6.1.18,2.74-1.7,3,.35,5.48,1.08,1.3-.58,2.48-.87,3.7-.33,1.41,1.66,3.06,2.73,3.65,1.62.91-.43,2.85.45,4.36s2.36,1.41,2.6,3.21c.37,3,2.29,5.18,2.44,8.51,0,.63-1,3.66-.65,4,2.2,1.74,1.14,1.75,1.75,4.38a6.15,6.15,0,0,1,1,.88c.18,1-.51,2.47-.47,3.53.1,2.27.57,4.5.76,6.76.45,5.29.64,8.87,3.07,13.62.91,1.78,1,3.85,1.89,5.67.4.78,1.68,4.61,2.4,4.81,1.2.32,1.36,2.61,1.66,3.7.21.78.17,2.21,1.08,2.63.63.3,2-.05,2.46.48-.45-.51-4.48,1.63-.76,3.86,2.48,1.48,2,5.06,3.72,7.19.86,1,2.12.31,2.31,1.82.06.54-.3,2.8.3,3.07.84.38,3.33.25,3.37,1.57s-.84,2,.14,3.32c1.76,2.27,3.33,4.08,3.83,7.26a10.23,10.23,0,0,0-.7,1.55,6.12,6.12,0,0,0,1.37,3.07c1.14,1.77,1.29,3.43,2.14,5.28s1.69,2.67,1.62,4.66a42.55,42.55,0,0,0,.31,6.38c.27,2.33.12,4.92.62,7.19.28,1.24,1.84,1.59,2.27,2.73.6,1.63-.66,3.37,1.11,4.31.77.42,1.27,2.42,1.48,3.14a74.92,74.92,0,0,0,3.12,9,10.88,10.88,0,0,0,2.28,3.53c1.06,1,3,.63,3.76,1.73a51.41,51.41,0,0,0,5.56,6.72c1,1,.76,3.06,1.45,4.31a21,21,0,0,0,2.51,4.15c1.23,1.48.45,3.38,1.69,4.76s1.39,3,1.56,4.87c.15,1.47,1.34,2.06,1.55,3.43s-.36,3.42.38,4.63,1.21,3.32,2.46,3.92.36,3.16,1.13,3.45c.47.18.8-.75,1.24-.76s1,1.45,1.28,1.8c-.13-.16,3.93,4.58,2.55,4.33-1.61-.29-2.06-2.94-3.83-3s-.13,3.87.31,4.75c1.93,3.92,2.18,7.65,3,12,.38,1.9,1.83,2.83,2.23,4.45.52,2.07-1,4,1,5.62,1.64,1.28,1.67,3.14,2.39,4.92,1,2.4,3.92,3.09,5.51,5,1.22,1.5,2.6,4.14,4.9,3.7s1.31,1.53,2.29,3.09c2.58,4.09,6.3,2.24,9.16,5.47,4,4.56,6.12.74,9.18-2A24,24,0,0,1,262.23,691c2.53-.64,2.73-6.86,2.44-8.94a11.13,11.13,0,0,1,.22-4.67c.46-1.19,3.72-3.78,5-3.4,3,.87,3.93-.33,6.57-1,1.86-.49,3.76-.18,5.62-.65,1-.25,4.17-.16,4.62-1.13.28-.58,1.66-1.07.91-1.81a28.11,28.11,0,0,0-2.5-2.66c-4.4-3.5-.76-7,1.88-10.16a23.29,23.29,0,0,1,4.52-4.62c.73-.5-2.15-2.18-.65-4,1.25-1.54,2.58-2.63,4.57-1.86a11.16,11.16,0,0,0,6.78.69c1.38-.21,5-.61,5.73-2,.44-.86-.47-1.12-1-1.55-.81-.72-.6-2.39-.62-3.34,0-1.71.55-4.2-.08-5.73a10.31,10.31,0,0,1-.76-6,8.61,8.61,0,0,0-.5-6.42c-.81-1.56-2.37-3.79-.6-5.15,2.51-1.92-.81-2.87-.44-4.76s1.17-3.71,1.75-5.53c.81-2.54.87-3.07,3-4.81.57-.47,4.56-4,4.56-4.81,0-1.45-3.11-2.69-3.09-3.94,0-.7,4.2-2,4.95-2.7,1.31-1.27,1.79-3.86,2.88-5.42,1.54-2.17.81-4.67.63-7.25a6.48,6.48,0,0,0-3.32-5.68c-.81-.46-3.32-1.37-2.9-2.69,1-3.23,6.55,4.74,4.65-1.18a64.84,64.84,0,0,0-3.19-8.36c-.78-1.61-2.9-4.11-1.36-5.94s3-2,2.57-4.44c-.72-4-2.82-7.35-3.65-11.36-.91-4.41.13-7.11,2.8-10.36a14.58,14.58,0,0,0,2.39-5.48c.09-.89,2.43-2,3.05-2.4a10.86,10.86,0,0,1,4.16-1.3c3-.54,2.72,2.11,4.7,3.34,2.63,1.63,5.73-4.56,6.78-6.14.8-1.21,1.17-2.95,2.73-3.4.39-.11,1.44-5.6,1.7-6.48.61-2,4.06-1,5.14,0,1.9,1.81,3.62,1.92,6.31.94,2.14-.78,4.3-2.07,6.5-2.95a22.25,22.25,0,0,0,6.62-3.89c1.3-1,.52-5.46.3-6.94-.17-1.17-1.38-1.94-1.56-3.18-.33-2.29,1.69-1.75,3.06-2.63,1.17-.76,2.41-1.41,3.57-2.17s2-2.34,3.3-3c2.5-1.29,5.29-1.09,7.79-2.63s6.5-4.13,6.69-7.35c.22-3.85.76-6,4.34-7.94,3.21-1.74,7.14-2.46,10.11-4.55,3.23-2.28,4.73-6.56,7.19-9.53,1.17-1.41,2.15-3,3.7-4.06,1.28-.86,2.79-1.74,2.62-3.53-.36-3.69,3.5-3.65,4.57-7,.71-2.27,3.82-3.05,5.55-4.65.48-.44,1.54-.59,1.81-.87s1.76-3.85,1.45-3.94c1,.3,1.58,1.29,2.78,1.27s1.93-.92,3-1.17c1.81-.44,2.93-2.22,4.66-2.95,4.24-1.78,9.95-2.79,13-6.48s8.69-6.49,7.35-12.15c-.29-1.2,2.18-2.65,2.87-3.46,1.55-1.83,1.84-4.63,1.57-6.94-.31-2.64-2.69-3.17-3.93-5.28-1.05-1.79,1.54-4.31,2.72-5.48,1.82-1.81,5.21-.8,6.78-2.67,1.24-1.48,4.65-1,6.51-1.36,1.54-.29,3.43-.09,3.8-1.89.44-2.13.47-2.13,2.64-2.86,1.31-.45.1-4.54,1.51-4.54s.81,4.15,1.29,5c.25.44,4.41-.91,5.11-.91,2.47,0,3.19-.94,4.43-3,1.11-1.87,7.54,3.05,9.15-.91a10.22,10.22,0,0,0-1.07-10.49,13.9,13.9,0,0,1-1.36-4.61c-.12-1.88-.4-2.32-1.49-4.31-1-1.8.35-3.76.05-5.68-.44-2.93-1.09-3.24.59-5.85,1.25-1.94-.73-4.25-2.56-4.81-2.14-.65-2.41.26-2.2-2.74a5.4,5.4,0,0,0-2.7-5.54c-2.31-1.56-2.48-3.33-.67-5.36s1.52-3.14,1.38-5.57c-.11-1.82.72-4.2.08-6-1.24-3.51-7.64-.19-9.92-2.1-1.92-1.62-6.06-7.77-1.54-8.35,2.61-.34,3.22-2.48,3.46-4.79.27-2.64,1.1-2,2.83-3.16,2.27-1.52,10.26.48,9.14-4.75-.57-2.77-.31-3.4-3.12-4.17-2.23-.61-.82-3.5-2.9-4.33-1.48-.6-4.23,1.83-5.21.2s-2.78-2.42-3.88-4c-.67-1-1.89-1-2.93-1.39-2-.74,0-3.75.12-4.74.19-2.89,2.79-3.12,4.24-5.2,1.11-1.59,2.62,2.78,3.16,3.54,1,1.43,3.31,3.37,5,2,1.18-1,.08-3.47,1.22-4,1.9-1,4.84,2.41,6,3.49,1.39,1.35,2.45,1.36,4,2.25,2.26,1.32,4.25,0,6.16-1.52,2.6-2.06,1.67,2.15,1,3.25-1.3,2.26-.23,3.67,1.55,4.88.31.21-1.55,5.39-1.71,6.51-.37,2.4,1.46,3.18,3.49,3.82a30.69,30.69,0,0,0,6,1.38,19.65,19.65,0,0,1,6.15,1c3.66,1.28,5.16-2.56,8.43-1.64s4.09-.06,7.06-.62c2.41-.45,4.81.95,7.38.59,2.89-.41,4.58,1.05,7.48-.3,2.37-1.11,5.41-1.45,7.43.68a10.67,10.67,0,0,0-1.56,1.8c-.41,1.17.75,1.76.74,2.85s-.56,1.32-.92,2.14c-.44,1,0,2.35-.37,3.43s-1.59,1.32-2.49,1.44c-2.39.33-1.31,3.24-1.46,4.89-4.21-1.71-6.63,3.24-9.93,4.55-4,1.59-5.17,6.74-5.52,10.67-.47,5.21,4.58,8.83,3.81,13.61-.13.78-.56,6.6,1.45,5.62s2.22.51,3.72-1.77c-1.59,2.42,3.86,4.56,5.62,3.52,1-.58,3-1.52,3.61-2.44s0-2.93,0-4.07c0-1.72-.35-3.82.49-5.4.62-1.15,1.66-2,1.82-3.37.13-1.15-.12-2.15.48-3.21,1.79-3.13,1.31.11,2.55.83,2.75,1.6,1.71,2.45,1.8,5.34.06,2.05,2.12,2.73,3,4.39.73,1.36-.49,4.45-1.08,5.73-1.12,2.41,1,3.36,2.35,5,2.12,2.54,1.08,3.46,1.17,6.22,0,1.15,1.08,1.64,1.08,2.82s-.48,2.24-.39,3.37c.15,1.74,1.73,3.57,1.91,5.62.23,2.53-.71,3.8,1.29,5.66,2.27,2.1,2.72-.6,3.48-2,0,0,4,2,4.6,2.13,2.53.43,2.29-3.21,2.79-4.6.58-1.55,2-2.88,2.71-4.41,1.23-2.72-.86-3.9-.61-6.11.49-4.28-1.06-7.81-1.77-11.94-.32-1.82-.77-4.12,1.9-4.38,3-.31,3.11-1.81,3.87-4.62.7-2.57-1.63-3.61-1.46-5.88s2.18-3.09,1.62-5.95c-.46-2.28-1.78-5.07-.58-7.36,1.56-3,3.76,1,5.53.87.9-.06,1.06-1.05,1.84-1.19,1-.18,2.1.51,3.12.6,1.79.16,4.25-.26,5.11-2.09.74-1.57-.47-2.94-.2-4.53s.74-5.16,1.51-6.53c.57-1,1.88-1.07,2.52-2s.27-2.35.55-3.5c.55-2.31,2.71-3.64,3.08-6.1.34-2.25.3-4.56.59-6.81.16-1.3-3.38-2.06-3.58-3.77s3.43-4.38,4.53-5.41c1.66-1.53,2-3.9,3.19-5.74,1.37-2,.85-4.93,1.58-7.19,1-3,.12-5.47-.81-8.48-.57-1.82-2.27-4.81,0-6.29,1.51-1,3.46-.33,5-1.58a14.43,14.43,0,0,0,3.47-5.07,15,15,0,0,1,4.33-5.47c1.75-1.51,2.16-4,3.9-5.49,1.5-1.3,3.05-1.1,4.56-2.38,1.3-1.09,2.37,0,3.91-.76,2.77-1.44,3.44-2.07,5.27.4a6.37,6.37,0,0,0,5.22,2.92c2.68.22,2.76.13,2.86-2.52.13-3.39-5.29-4.62-6.2-8.34-.76-3.12.86-2.86,2.86-4.16,1.64-1.06,2.83-3.3,4.24-4.69,1.79-1.77,2.37-2.53,1-4.67-.41-.62-1.5-.95-1.69-1.67-.29-1,1.47-2.26,1-3.2-.25-.48-3.2-.73-3.94-1.06-1.7-.74-3.33-1.11-5,0-1.9,1.23-3.88-1.81-5.59-2.34s-4.49,1.49-6.15,2c-2.62.77-.87-1.92-.08-2.73a25.07,25.07,0,0,0,4-4.66c.71-1.23,1.29-3.09-.75-3.36s-1.58-2.77-1.77-4.35-3.81-1.34-3.87.37c0,1,.5,1.27-.57,1.86-.61.35-2.14.42-2-.74.28-2.35.77-2.4,2.68-4.29,1.72-1.7,1.12-4-1.17-4.28s-1.34,0-2.55-1.56c-2.27-2.88-3.55-2-5.79-.21a56,56,0,0,0-5.55,5c-1.05,1.12-1.31,4.64-3,4.85-2.85.38-3.57-.48-5.95-1.61-1.72-.82-3.14.28-5-.81-1.24-.71-4-1.24-4.09-2.85-.22-3-2.63,1.31-3.08,1.9-1.33,1.72-3.28,2.26-4.92,3.56-1.19.94-.8,3.36-1.78,4.62-1.56,2-3,3.44-4.06,5.7-.63,1.33-4.11,1.2-5.3,1.45s-1.27,1.63-2.19,1.5c-1.71-.25-3.57-1.15-5.2,0-1.1.78-1.75,3.42-2.47,4.6-.59,1,1.06,3-.11,3.84s-3.44.55-4.86,1.25a10.81,10.81,0,0,0-3.22,3c-.8,1.19-2.72,1.52-2.9,2.93s1.84,3.05.78,4.11A18.22,18.22,0,0,1,563,217c-1,.58-2-.88-3.16-.77-2.55.25-6.87,1.53-8.86,3.37-1.65,1.51-4.61-4.81-6.68-2.17-.83,1,.45,3.43.06,4.93s1.08,2.73,1,4.23c-.06,1.14,7.18,1.64,8.49,2s3.36,1.55,2.41,3.32c-1.16,2.19-.61,3.4-.75,5.76-.21,3.79-4.93-.08-6.69,3.18-.6,1.12-3.4"
    />
  </clipPath>
</svg>

  <div class="container">
    <div class="color-orange"></div>
    <div class="color-green"></div>
    <div class="color-white"></div>
    <img src="ashoka-chakra.svg" id="ashoka-chakra" />
  </div>

</body>
</html>

Key Points:

  • The <svg> tag defines an empty clipPath with id map-path — this is critical to clipping the .container content to the India map shape.
  • The .container div holds the three colored stripes as absolutely positioned divs (.color-orange, .color-white, .color-green).
  • The Ashoka Chakra is an image absolutely positioned inside the container.
  • The entire .container is clipped by the SVG clipPath (clip-path: url(#map-path)) in CSS, so only the India map shape area is visible.

4. Detailed CSS Styling and Animation Breakdown

Below is the CSS styling code:

/* Reset & global styles */
body {
  padding: 0;
  margin: 0;
  background-color: black;
}

.container {
  height: 700px;
  width: 700px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  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);
  }
}

Global Styles

  • We reset default padding and margin.
  • Black background makes the Indian flag colors pop visually.

Container Styling

  • .container is a square block centered perfectly on screen using absolute positioning + translate trick.
  • clip-path: url(#map-path) applies the SVG clipping path to .container, showing only the India map shape.
  • Height and width fixed to 700px — you can adjust based on screen size.

SVG Element

The SVG tag is hidden (0 height and width) because it only provides the clipPath definition and should not be visible.

Tri-Color Divs (Flag Stripes)

  • .color-orange and .color-green represent top and bottom stripes respectively.
  • .color-white is the middle stripe.
  • The stripes use absolute positioning to stack vertically.
  • The stripes animate horizontally, sliding in from the left or right.

Animations for Sliding Colors

  • slide-right: starts the div off-screen to the left (left: -100%) and animates it into position (left: 0 implied by CSS).
  • slide-left: starts off-screen to the right (right: -100%) and slides it in.
  • Animation duration is 6 seconds, creating a smooth, slow reveal effect.

Ashoka Chakra Styling and Animation

  • The Ashoka Chakra is absolutely positioned roughly centered vertically but shifted left by 150px.
  • Initial scale is 0 (hidden).
  • Animation runs over 3 seconds with a delay of 4.2 seconds to start after the color stripes finish sliding.
  • During animation, it scales up beyond normal size (1.6) and rotates fully 360°, then settles back to scale 1.

5. How Clip-Path Works with SVG in This Project

The magic behind the India-shaped animation is the use of SVG clip-path:

  • The SVG <clipPath> element contains a vector path defining the shape of India.
  • The CSS property clip-path: url(#map-path) on .container references this SVG clipPath.
  • All child elements of .container (color stripes and chakra image) are masked inside the India shape.
  • Only parts visible inside the India shape show; everything else is hidden.

6. Animation Keyframes Explanation

  1. slide-right
    Starts elements offscreen left (left: -100%) and animates them sliding in to position.
  2. slide-left
    Starts elements offscreen right (right: -100%) and slides them left into view.
  3. spin
    Ashoka Chakra scales up to 1.6 times size and rotates 360°, then shrinks to normal scale with rotation completion.

7. Adding Extra Enhancements and Tips

Consider these for improving the project:

  • Add sound effects or music for more engagement.
  • Make the container responsive for smaller screens by using relative units and media queries.
  • Include fallback for clip-path in unsupported browsers.
  • Use SVG directly for the Indian map shape path for sharper visuals.

8. How to Run and Customize Your Animation

To run the animation, open index.html in any modern browser.
Customize the colors, animation timing, or map shape by editing style.css or the SVG clipPath.

9. Conclusion

Your Independence Day animation project creatively uses HTML, CSS, and SVG clipPath to combine the Indian flag colors, the Ashoka Chakra, and the India map — all animated smoothly with CSS keyframes.

10. Project Download

⬇ Download Project

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Independence Day</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <svg xmlns="http://www.w3.org/2000/svg">
  <clipPath id="map-path">
    <path
      class="cls-1"
      d="M203.08,118.79c4-.37,4.3,5.95.2,6.21-1.16.07-3.62-1-4.51-.41-1.86,1.2-2.58,3.24-4.91,3.76-2.92.64-2.9,1.79-4.71,3.94s-1.83,2.11-.11,4.45c.94,1.32,1.36,4.13,1.43,5.74.11,2.46-3.43,2.81-2.08,5.91,1,2.34.42,1.38-1.64,2.46s-2.1,3.86-3.19,5.58c-2.19,3.45-7.19,5.09-8.23,9.29-.4,1.64,1.32,4.68-.31,5.9a17.38,17.38,0,0,1-5.28,2.95c-1.81.55-4.2.42-5.6,1.9-2.14,2.28-1.78,6-2.77,8.77-.91,2.56-2.11,3.56-3.71,5.67s-2.67,5-4.55,7.12c-.91,1-2.81,4.1-4,4.65-2,.93-5-1.68-6.64.87-1.35,2.11-2,3.47-3.88,5.26s-1.55,4.45-3,6.46-3.61,2.28-5.34,3.62c-2,1.51-1.15,3.54-2.12,5.45-1.37,2.68-8.61.67-11.15,1.13-2.16.38-5.5.22-7.41,1.33-1.14.67-4.1,3.27-4.89,1.78-1.08-2.08-1-3.48-.6-5.7.28-1.69,1-3.25-1.3-3.12-6.48.38-10.64,2.41-14.62,7.59-2.22,2.89-2.91,5.38-6.26,7.32-2.69,1.57-5.7,2.85-7.62,5.44-2.62,3.54-1.6,14.68,3.82,15.4,2.87.38,4.67,2.6,7.82,2.39,3.51-.23,1.46,3.35.32,5.36-1.51,2.67-2.81,5.05-1.74,8.13a23.41,23.41,0,0,0,5,8.46c1.56,1.59,3.47,1.29,5.53,1,4.26-.65,1,2.35,1.72,5.11,1.79,6.56,9.78,16.87,5.64,23.71-.86,1.42-1.68.82-2,2.85-.26,1.44-1.43,0-2.44.25.19-.05-.19-5.78-2.29-5.67-3.06.16-5.52,2.29-8.52,2.66-1.09.13-2.93-.65-3.71.4a5.46,5.46,0,0,0-.67,3.82c-1.92-.29-4.05-.21-5.87-.94-2.07-.82-2.79-3.42-4.89-4.23s-3.45,1.23-5.34,1.8c-2.21.67-6-1.34-8.25-1.86-1.65-.39-3.67-1.63-5.4-1s-2.46,3.54-2,5.06-.2,4.11-2.27,3.34c-1-.36-1.88,0-2.87-.14-1.32-.21-1.94-1.51-3.22-1.8-4.74-1-3.86,6.39-4.55,8.45-.56,1.64-3.53,2.58-1.21,4.54.61.51,1.53,1.75,2.32,1.93s1.39-.8,2,0c2,2.4,5,4.09,5.78,7.19.85,3.49,5,6.68,8,8.36,3.71,2.07,7.54,4.37,11.59,5.67,2.13.67,4.36.2,6.52.3,3,.14.33-4,3.74-2.7,1.9.71,4.74.78,6.33-.68,1.15-1.05,2.37-1.95,4-.79.66.47-3.28,3.77-3.58,4-2.15,1.83-4.32.69-6.58,2-1.77,1.05-4.27,1.22-5.81,2.4-2,1.56-3.62-.85-5.54.29-.86.51-3.53,2.3-4.24,1-1-1.91-1-3.36-3.55-3.43-3.77-.07-6,3.23-5.71,6.75.46,4.7,5.44,8.66,8.42,11.86,3.29,3.53,6.59,6.74,9.62,10.5,3.2,4,5.32,8.62,9.07,12.25,1.8,1.74,4.37,2.13,5.41,4.54,1.16,2.69,3.93,2.29,6.26,3.28,2,.85,3.51,3.51,6,1.87.73-.49,1.8-1.75,2.81-1.62,1.58.2,2.39.5,4-.07,1.9-.67,5.18-.65,6.68-1.95a9.94,9.94,0,0,1,6.13-2.79c2.26-.33,3.06-.81,4.28-2.45,1.33-1.79,4.88-.63,6.2-3.06.58-1.06.69-2.25,1.33-3.31.89-1.47,2.39-2.2,3.33-3.55,1.56-2.23,0-4.28-1.08-6.22-.4-.76.52-1.06.95-1.4,1.18-.9.38-2.22,0-3.32-1-2.54-.67-5.6,2.07-7-.61.33-.38,3.85-.36,4.45.08,3.26,1.46,1.57,3.52,2,.66.14-3.1,3-3.1,3.67,0,3.36,2.31,3.38,4.52,3.72-.95-.16-1.53,2.06-1.51,2.79,0,1.55,0,1.31-1.06,2.1-1.53,1.12-1.74,2.6-1.48,4.38.34,2.33,1.86,2.33,2.79,4,.64,1.17-1,1.9.41,3.4,1.82,1.94,1,3.41,1.94,5.65a8,8,0,0,1,.93,3.58c-.06,2.25-3.38,3.17-3.7,5.55-.41,2.93-.2,6.32-2.06,8.87-2.78,3.82,2.63,5.67,1.26,9-1,2.27.44,2.57.94,4.51.42,1.62-.45,3.74-.4,5.45.07,2.21,1.25,4.09,1.38,6.1.18,2.74-1.7,3,.35,5.48,1.08,1.3-.58,2.48-.87,3.7-.33,1.41,1.66,3.06,2.73,3.65,1.62.91-.43,2.85.45,4.36s2.36,1.41,2.6,3.21c.37,3,2.29,5.18,2.44,8.51,0,.63-1,3.66-.65,4,2.2,1.74,1.14,1.75,1.75,4.38a6.15,6.15,0,0,1,1,.88c.18,1-.51,2.47-.47,3.53.1,2.27.57,4.5.76,6.76.45,5.29.64,8.87,3.07,13.62.91,1.78,1,3.85,1.89,5.67.4.78,1.68,4.61,2.4,4.81,1.2.32,1.36,2.61,1.66,3.7.21.78.17,2.21,1.08,2.63.63.3,2-.05,2.46.48-.45-.51-4.48,1.63-.76,3.86,2.48,1.48,2,5.06,3.72,7.19.86,1,2.12.31,2.31,1.82.06.54-.3,2.8.3,3.07.84.38,3.33.25,3.37,1.57s-.84,2,.14,3.32c1.76,2.27,3.33,4.08,3.83,7.26a10.23,10.23,0,0,0-.7,1.55,6.12,6.12,0,0,0,1.37,3.07c1.14,1.77,1.29,3.43,2.14,5.28s1.69,2.67,1.62,4.66a42.55,42.55,0,0,0,.31,6.38c.27,2.33.12,4.92.62,7.19.28,1.24,1.84,1.59,2.27,2.73.6,1.63-.66,3.37,1.11,4.31.77.42,1.27,2.42,1.48,3.14a74.92,74.92,0,0,0,3.12,9,10.88,10.88,0,0,0,2.28,3.53c1.06,1,3,.63,3.76,1.73a51.41,51.41,0,0,0,5.56,6.72c1,1,.76,3.06,1.45,4.31a21,21,0,0,0,2.51,4.15c1.23,1.48.45,3.38,1.69,4.76s1.39,3,1.56,4.87c.15,1.47,1.34,2.06,1.55,3.43s-.36,3.42.38,4.63,1.21,3.32,2.46,3.92.36,3.16,1.13,3.45c.47.18.8-.75,1.24-.76s1,1.45,1.28,1.8c-.13-.16,3.93,4.58,2.55,4.33-1.61-.29-2.06-2.94-3.83-3s-.13,3.87.31,4.75c1.93,3.92,2.18,7.65,3,12,.38,1.9,1.83,2.83,2.23,4.45.52,2.07-1,4,1,5.62,1.64,1.28,1.67,3.14,2.39,4.92,1,2.4,3.92,3.09,5.51,5,1.22,1.5,2.6,4.14,4.9,3.7s1.31,1.53,2.29,3.09c2.58,4.09,6.3,2.24,9.16,5.47,4,4.56,6.12.74,9.18-2A24,24,0,0,1,262.23,691c2.53-.64,2.73-6.86,2.44-8.94a11.13,11.13,0,0,1,.22-4.67c.46-1.19,3.72-3.78,5-3.4,3,.87,3.93-.33,6.57-1,1.86-.49,3.76-.18,5.62-.65,1-.25,4.17-.16,4.62-1.13.28-.58,1.66-1.07.91-1.81a28.11,28.11,0,0,0-2.5-2.66c-4.4-3.5-.76-7,1.88-10.16a23.29,23.29,0,0,1,4.52-4.62c.73-.5-2.15-2.18-.65-4,1.25-1.54,2.58-2.63,4.57-1.86a11.16,11.16,0,0,0,6.78.69c1.38-.21,5-.61,5.73-2,.44-.86-.47-1.12-1-1.55-.81-.72-.6-2.39-.62-3.34,0-1.71.55-4.2-.08-5.73a10.31,10.31,0,0,1-.76-6,8.61,8.61,0,0,0-.5-6.42c-.81-1.56-2.37-3.79-.6-5.15,2.51-1.92-.81-2.87-.44-4.76s1.17-3.71,1.75-5.53c.81-2.54.87-3.07,3-4.81.57-.47,4.56-4,4.56-4.81,0-1.45-3.11-2.69-3.09-3.94,0-.7,4.2-2,4.95-2.7,1.31-1.27,1.79-3.86,2.88-5.42,1.54-2.17.81-4.67.63-7.25a6.48,6.48,0,0,0-3.32-5.68c-.81-.46-3.32-1.37-2.9-2.69,1-3.23,6.55,4.74,4.65-1.18a64.84,64.84,0,0,0-3.19-8.36c-.78-1.61-2.9-4.11-1.36-5.94s3-2,2.57-4.44c-.72-4-2.82-7.35-3.65-11.36-.91-4.41.13-7.11,2.8-10.36a14.58,14.58,0,0,0,2.39-5.48c.09-.89,2.43-2,3.05-2.4a10.86,10.86,0,0,1,4.16-1.3c3-.54,2.72,2.11,4.7,3.34,2.63,1.63,5.73-4.56,6.78-6.14.8-1.21,1.17-2.95,2.73-3.4.39-.11,1.44-5.6,1.7-6.48.61-2,4.06-1,5.14,0,1.9,1.81,3.62,1.92,6.31.94,2.14-.78,4.3-2.07,6.5-2.95a22.25,22.25,0,0,0,6.62-3.89c1.3-1,.52-5.46.3-6.94-.17-1.17-1.38-1.94-1.56-3.18-.33-2.29,1.69-1.75,3.06-2.63,1.17-.76,2.41-1.41,3.57-2.17s2-2.34,3.3-3c2.5-1.29,5.29-1.09,7.79-2.63s6.5-4.13,6.69-7.35c.22-3.85.76-6,4.34-7.94,3.21-1.74,7.14-2.46,10.11-4.55,3.23-2.28,4.73-6.56,7.19-9.53,1.17-1.41,2.15-3,3.7-4.06,1.28-.86,2.79-1.74,2.62-3.53-.36-3.69,3.5-3.65,4.57-7,.71-2.27,3.82-3.05,5.55-4.65.48-.44,1.54-.59,1.81-.87s1.76-3.85,1.45-3.94c1,.3,1.58,1.29,2.78,1.27s1.93-.92,3-1.17c1.81-.44,2.93-2.22,4.66-2.95,4.24-1.78,9.95-2.79,13-6.48s8.69-6.49,7.35-12.15c-.29-1.2,2.18-2.65,2.87-3.46,1.55-1.83,1.84-4.63,1.57-6.94-.31-2.64-2.69-3.17-3.93-5.28-1.05-1.79,1.54-4.31,2.72-5.48,1.82-1.81,5.21-.8,6.78-2.67,1.24-1.48,4.65-1,6.51-1.36,1.54-.29,3.43-.09,3.8-1.89.44-2.13.47-2.13,2.64-2.86,1.31-.45.1-4.54,1.51-4.54s.81,4.15,1.29,5c.25.44,4.41-.91,5.11-.91,2.47,0,3.19-.94,4.43-3,1.11-1.87,7.54,3.05,9.15-.91a10.22,10.22,0,0,0-1.07-10.49,13.9,13.9,0,0,1-1.36-4.61c-.12-1.88-.4-2.32-1.49-4.31-1-1.8.35-3.76.05-5.68-.44-2.93-1.09-3.24.59-5.85,1.25-1.94-.73-4.25-2.56-4.81-2.14-.65-2.41.26-2.2-2.74a5.4,5.4,0,0,0-2.7-5.54c-2.31-1.56-2.48-3.33-.67-5.36s1.52-3.14,1.38-5.57c-.11-1.82.72-4.2.08-6-1.24-3.51-7.64-.19-9.92-2.1-1.92-1.62-6.06-7.77-1.54-8.35,2.61-.34,3.22-2.48,3.46-4.79.27-2.64,1.1-2,2.83-3.16,2.27-1.52,10.26.48,9.14-4.75-.57-2.77-.31-3.4-3.12-4.17-2.23-.61-.82-3.5-2.9-4.33-1.48-.6-4.23,1.83-5.21.2s-2.78-2.42-3.88-4c-.67-1-1.89-1-2.93-1.39-2-.74,0-3.75.12-4.74.19-2.89,2.79-3.12,4.24-5.2,1.11-1.59,2.62,2.78,3.16,3.54,1,1.43,3.31,3.37,5,2,1.18-1,.08-3.47,1.22-4,1.9-1,4.84,2.41,6,3.49,1.39,1.35,2.45,1.36,4,2.25,2.26,1.32,4.25,0,6.16-1.52,2.6-2.06,1.67,2.15,1,3.25-1.3,2.26-.23,3.67,1.55,4.88.31.21-1.55,5.39-1.71,6.51-.37,2.4,1.46,3.18,3.49,3.82a30.69,30.69,0,0,0,6,1.38,19.65,19.65,0,0,1,6.15,1c3.66,1.28,5.16-2.56,8.43-1.64s4.09-.06,7.06-.62c2.41-.45,4.81.95,7.38.59,2.89-.41,4.58,1.05,7.48-.3,2.37-1.11,5.41-1.45,7.43.68a10.67,10.67,0,0,0-1.56,1.8c-.41,1.17.75,1.76.74,2.85s-.56,1.32-.92,2.14c-.44,1,0,2.35-.37,3.43s-1.59,1.32-2.49,1.44c-2.39.33-1.31,3.24-1.46,4.89-4.21-1.71-6.63,3.24-9.93,4.55-4,1.59-5.17,6.74-5.52,10.67-.47,5.21,4.58,8.83,3.81,13.61-.13.78-.56,6.6,1.45,5.62s2.22.51,3.72-1.77c-1.59,2.42,3.86,4.56,5.62,3.52,1-.58,3-1.52,3.61-2.44s0-2.93,0-4.07c0-1.72-.35-3.82.49-5.4.62-1.15,1.66-2,1.82-3.37.13-1.15-.12-2.15.48-3.21,1.79-3.13,1.31.11,2.55.83,2.75,1.6,1.71,2.45,1.8,5.34.06,2.05,2.12,2.73,3,4.39.73,1.36-.49,4.45-1.08,5.73-1.12,2.41,1,3.36,2.35,5,2.12,2.54,1.08,3.46,1.17,6.22,0,1.15,1.08,1.64,1.08,2.82s-.48,2.24-.39,3.37c.15,1.74,1.73,3.57,1.91,5.62.23,2.53-.71,3.8,1.29,5.66,2.27,2.1,2.72-.6,3.48-2,0,0,4,2,4.6,2.13,2.53.43,2.29-3.21,2.79-4.6.58-1.55,2-2.88,2.71-4.41,1.23-2.72-.86-3.9-.61-6.11.49-4.28-1.06-7.81-1.77-11.94-.32-1.82-.77-4.12,1.9-4.38,3-.31,3.11-1.81,3.87-4.62.7-2.57-1.63-3.61-1.46-5.88s2.18-3.09,1.62-5.95c-.46-2.28-1.78-5.07-.58-7.36,1.56-3,3.76,1,5.53.87.9-.06,1.06-1.05,1.84-1.19,1-.18,2.1.51,3.12.6,1.79.16,4.25-.26,5.11-2.09.74-1.57-.47-2.94-.2-4.53s.74-5.16,1.51-6.53c.57-1,1.88-1.07,2.52-2s.27-2.35.55-3.5c.55-2.31,2.71-3.64,3.08-6.1.34-2.25.3-4.56.59-6.81.16-1.3-3.38-2.06-3.58-3.77s3.43-4.38,4.53-5.41c1.66-1.53,2-3.9,3.19-5.74,1.37-2,.85-4.93,1.58-7.19,1-3,.12-5.47-.81-8.48-.57-1.82-2.27-4.81,0-6.29,1.51-1,3.46-.33,5-1.58a14.43,14.43,0,0,0,3.47-5.07,15,15,0,0,1,4.33-5.47c1.75-1.51,2.16-4,3.9-5.49,1.5-1.3,3.05-1.1,4.56-2.38,1.3-1.09,2.37,0,3.91-.76,2.77-1.44,3.44-2.07,5.27.4a6.37,6.37,0,0,0,5.22,2.92c2.68.22,2.76.13,2.86-2.52.13-3.39-5.29-4.62-6.2-8.34-.76-3.12.86-2.86,2.86-4.16,1.64-1.06,2.83-3.3,4.24-4.69,1.79-1.77,2.37-2.53,1-4.67-.41-.62-1.5-.95-1.69-1.67-.29-1,1.47-2.26,1-3.2-.25-.48-3.2-.73-3.94-1.06-1.7-.74-3.33-1.11-5,0-1.9,1.23-3.88-1.81-5.59-2.34s-4.49,1.49-6.15,2c-2.62.77-.87-1.92-.08-2.73a25.07,25.07,0,0,0,4-4.66c.71-1.23,1.29-3.09-.75-3.36s-1.58-2.77-1.77-4.35-3.81-1.34-3.87.37c0,1,.5,1.27-.57,1.86-.61.35-2.14.42-2-.74.28-2.35.77-2.4,2.68-4.29,1.72-1.7,1.12-4-1.17-4.28s-1.34,0-2.55-1.56c-2.27-2.88-3.55-2-5.79-.21a56,56,0,0,0-5.55,5c-1.05,1.12-1.31,4.64-3,4.85-2.85.38-3.57-.48-5.95-1.61-1.72-.82-3.14.28-5-.81-1.24-.71-4-1.24-4.09-2.85-.22-3-2.63,1.31-3.08,1.9-1.33,1.72-3.28,2.26-4.92,3.56-1.19.94-.8,3.36-1.78,4.62-1.56,2-3,3.44-4.06,5.7-.63,1.33-4.11,1.2-5.3,1.45s-1.27,1.63-2.19,1.5c-1.71-.25-3.57-1.15-5.2,0-1.1.78-1.75,3.42-2.47,4.6-.59,1,1.06,3-.11,3.84s-3.44.55-4.86,1.25a10.81,10.81,0,0,0-3.22,3c-.8,1.19-2.72,1.52-2.9,2.93s1.84,3.05.78,4.11A18.22,18.22,0,0,1,563,217c-1,.58-2-.88-3.16-.77-2.55.25-6.87,1.53-8.86,3.37-1.65,1.51-4.61-4.81-6.68-2.17-.83,1,.45,3.43.06,4.93s1.08,2.73,1,4.23c-.06,1.14,7.18,1.64,8.49,2s3.36,1.55,2.41,3.32c-1.16,2.19-.61,3.4-.75,5.76-.21,3.79-4.93-.08-6.69,3.18-.6,1.12-3.4"
    />
  </clipPath>
</svg>

  <div class="container">
    <div class="color-orange"></div>
    <div class="color-green"></div>
    <div class="color-white"></div>
    <img src="ashoka-chakra.svg" id="ashoka-chakra" />
  </div>

</body>
</html>

CSS Code

/* Reset & global styles */
body {
  padding: 0;
  margin: 0;
  background-color: black;
}

.container {
  height: 700px;
  width: 700px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  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);
  }
}

Output

Happy Independence Day HTML & CSS Animation