Welcome to today’s tutorial. Today we are going to create an Independence day special animation.
To create this cool animation effect we only need CSS. Although we are going to use SVG in this effect, you don’t need to have any prior SVG knowledge. Let’s begin with the tutorial.
To create this cool animation effect we only need CSS. Although we are going to use SVG in this effect, you don’t need to have any prior SVG knowledge. Let’s begin with the tutorial.
Â
Project Structure:
Before moving to the code, we first create the project folder Independence Day Animation. In this project, we have two files. First one is the HTML document index.html and second is the stylesheet style.css. We also have 2 SVG images in this folder. One is the India map and the other one is the Ashoka chakra.
Video Tutorial:
I have posted the video tutorial on my youtube channel. You can watch it down below:
Â
HTML:
We start by coding the HTML section. We create a div with a class
container that wraps the three colours of the flag. Next, we add three divs, one for each colour. Lastly, we need to add the Ashoka chakra SVG in this div.We also need to copy-paste the Indian map SVG to our HTML. Even though the path consists of a lot of numbers and stuff, you don’t have to worry about it. They are just commands and coordinates that define the path. It’s okay to not understand them at all. Just wrap this path in clipPath. Set the id of this
clipPath to map-path.<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Independence Day Animation</title>
<!-- Stylesheet -->
<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.43.13-4.47.84-2.13,1.46-3.58.88-6,.94-4.56.11-7.75,4-12.31.75-3.2-2.31-4.93-2-8.24.4-.73.52-1.63,1.55-2.6,1.38s-2.73-.8-3.37.19.58,3.15-1.91,2.13a3.87,3.87,0,0,1-1.71-1.71c-.91-.68-2.51.06-3.45-.7-.47-.38-.06-.92-.83-1.48-2.08-1.49-4.54,2.51-5,2.32-1.37-.57-3.07-2.9-4.53-3.74s-2.39-2.46-3.29-3.94c-.77-1.29,2.17-3.07,1.41-4.87a3.8,3.8,0,0,0-2-1.69c-.81-.44-.33-1.54-1.07-2.09-.53-.4,2-4.26,2-5.32-.18-2.6,0-3.13-1.45-5.39-2.33-3.68-5-3.83-7.67-.71-1.64,1.89-1.77,1.43-4.13,1.57-.67,0-3.52.21-3.87.81a3.09,3.09,0,0,0,.3,4c2,2.34.19,2.77-.9,4.76s-1.24,3.71-1.53,6c-.25,1.89-1.44,3.26-1.63,5.17-.21,2.21,2.18,4.79,3.28,6.5,1.24,1.93,1.51,5.75,1,8-.05.23-.05,4.08-1.25,2.92s-2.8-.72-4.08-.29a27.48,27.48,0,0,1-9.66,1.24c-2.75-.1-4.42-2.78-7.11-3.18-1.76-.25-2.75,1.47-4.23,2.08a7.79,7.79,0,0,1-6.33-.78c-1.39-.83-2-3.3-3.95-3-1.06.14-1.4,1.18-2.53,1s-2-1.24-3.08-1.59c-1.92-.62-2.95,1.53-4.69-.34-1.28-1.37-1.3-3.26-3.45-3.72s-2.59,1.78-4.33,1.94c-2.34.23-2.82-.53-4.58-2.08-1.57-1.38-8.91-2-9.19-3.82-.4-2.62-.19-4.09-1.75-6.47s-3.13-1-5.71-1.24c-1.57-.16-1.55-2.1-2.62-2.84a9.26,9.26,0,0,0-4.86-.63,20.36,20.36,0,0,0-6.1,3c.39-.26-3.4-1.48-3.74-1.46-1.06.05-2.53.32-3.12,1.36-.22.39-.25,1.52-.65,1.78.2-.13-3.27-1.6-3.86-1.65-1.48-.13-4.41.19-5.71-.31s-.1-2.84-.46-3.77c-.85-2.15-4.05-2-5.87-1.45-1.22.35-2.8,2.26-3.91.41-.9-1.51-3.47-2.84-5.09-3.43-1.9-.7-3.09-1.49-5.12-.41-3.17,1.7-2.66-1.44-4.91-2.31-1.95-.76-4.09-.54-4.59-3.06-.17-.85-.17-2-.89-2.6-1.17-1-1.58.29-1.3,1.2-3.94-1.41-4.14-6.33-8.7-6.79-3.95-.39-6.36-.63-8.39-4.23-2.27-4-2.13-.21-4,.48-1.17.43-6.57-3.46-7.42-4.26-1.38-1.31-1.17-2.7.56-3.21,2.06-.62,1.29-1.9,1.48-3.5s1.69-2.13,1.87-3.82c.2-1.94-1.16-3.51-.08-5.43,1-1.76,2-2,2.19-4.2a3.62,3.62,0,0,1,1.09-2.55,10.73,10.73,0,0,0,2.73-3.24c1-1.6,3.22-1.14,4.12-3,1-2,5.14-5.6,2.26-7.05-1.93-1-1.94-2.77-3.14-4.3-1.66-2.08-2.41-.61-4.63-.83-2-.19-1.45-2.36-3.48-1.31-1.59.82-1.78-1.66-2-2.73-.44-2.4-3-6.4-6-5.85-1.69.3-2.27-1.66-3.81-2.06a22.26,22.26,0,0,0-3.82-.45c-2.42-.2-5.47-.67-5.76-3.63s-1.29-6.61-4.68-7.48c-2.71-.68-4.64,4.78-4.35,4.87-1.3-.43-1.66-1.58-1.86-2.79-.17-1-1.29-1.36-1.38-2.29-.17-2,4.26-2.95,1.71-5.33s-.32-4.91-.68-7.54c-.13-1-1.82-1.83-2.33-2.72-1-1.69-.34-1.43.23-2.56.31-.59-3.26-1-3.32-1.51-.19-1.69.09-3.51,0-5.23s.4-4.52,2.63-3.33c2.59,1.41,1.7,2.4,2.75,5.13.61,1.59,2.8,4,4.73,3.22,3-1.14,1.4-1.32,1.7-3.64.18-1.45,2.88-.78,3.34-2.24.41-1.28,3.75-.59,4.82-1.17,3-1.63,4.1-3.47,2.33-6.76s-6.9-4.18-4.23-8.63c2.35-3.88-3.7-5.38-6.8-5.24-2.85.13-3.11-.48-2.79-3.64a10.2,10.2,0,0,1,.63-3.42c.64-1.31,2.25-1.73,2.88-2.93.19-.37-1-2.32-1.1-2.71-.45-1.7-1.71,0-2.77-1s-1-1.68-.05-2.9c1.9-2.41,3.94-.5,6.49.5.91.36,4.35,1.94,4.44-.23.08-1.76,1.93-2,2.52-3.62a48.81,48.81,0,0,0,1.28-5.67c.23-1,3.33-1.49,4-1.68,2.59-.67-.28-3.06,1.38-4.27,1.42-1,3.17,0,4.42-1,1.94-1.64,1.3-2.49,1.18-4.66-.1-1.91,1.28-3.87,1.54-5.79s2.38-2.75,3.06-4.36a12.35,12.35,0,0,0,0-6.13c-.64-1.92-3.76-2.95-5.13-4.13-2.53-2.16-2.39-3.27-6.07-3.44a10.5,10.5,0,0,1-6-2.38c-.88-.91-1.24-3-2.89-2.23-2.15,1.06-3.81,2.78-6.23,3.39-1.16.3-5.74-1.44-6-.59-1.08,3.94-7.55,1-10.49,2.77-1.7,1-1.51,3.46-3.29,4.44a20.89,20.89,0,0,1-7.15,2,2.67,2.67,0,0,0-2,1.09c-.47.53-1.83.09-2.39.07-2.11-.09-1.62-2.21-2.19-3.83-1.54-4.33-4.43-4.68-8.57-4.16-4.93.62-5.34-2.76-6.49-7-.52-1.92-1.14-2.34-3-3.11-2.11-.86-2.27-3.87-4.4-4.26a20.86,20.86,0,0,1-6.16-1.8c-2.26-1.13-1.49-3.09-3.12-4.42-2.73-2.22-4.33-3.49-6-6.62-1-1.9-1-1.23-2.76-2.15-1.35-.73,0-3-1.56-3.47-2.53-.82-1.89.36-4.08,1.13-1.27.44-3-1.56-3.43.08-.55,1.85-3.13.48-3.68-.43-.79-1.31-1.87-2.41-3.14-1-.78.84-1.62,2.37-3,2.13-2.19-.38-1.89-2.3-4.23-.65-1.13.8-3.92,1.44-4.51,2.46-1.08,1.87-3.45-.36-4.86-.49-2.63-.26-.15,3.43-2.83,4.21-1.62.48-2.64-.54-4-1.07-2.53-.94-4.74,1.4-7.2.62-3.5-1.1-1.37,5.55-4.53,5.32a2.1,2.1,0,0,0-2.18,2.47c.77,2.93-1.91,1.28-3.5,2.87s-2.08,1.24-4.06,2c-1.38.56-.44,4.54.17,5.43,1.63,2.4-1.05,6.69,3.95,6.12a21.61,21.61,0,0,1,6.81,0,3.69,3.69,0,0,1,1.69,1.43c1.09,1.55,2.64,2.42,3.68,3.86.62.86,1.13,2.07,1.8,2.83,2.12,2.39,2.73-.57,4.3-1.08.31-.09,1,5.95,1.78,6.44A20.15,20.15,0,0,1,179,48.46c1,1,3,.3,4.07,1s.55,2.3-.3,2.74c-1.56.8-1.43,1.38-2.33,2.66-1.55,2.21-5.35.58-6.62,3.39-.53,1.16-6.15,4.4-6.13,4.53.16,1.12,1.08,1.75.89,3.22-.17,1.31-.79,2.9.08,4.1,1.16,1.6,2.22.94,1.5,3.32-.54,1.82-2.39,1.3-1.86,3.55s2.3,2,2.44,3.94c.16,2.28-.09,4.59,1.57,6.43-1.24-1.38-1.65,4.82-1.67,5.39-.11,2.88-2.54,5.46.14,8.06,3.69,3.59,8.4,2.39,12.21,5.12,1.29.92,2.45,3.93,4.19,3.77.68-.06,4.77-.5,5.28.2.26.37-.89,3.17-.52,4.14a5.35,5.35,0,0,0,3.32,2.79,25.93,25.93,0,0,0,5.19.56C201.82,117.36,201.44,118.9,203.08,118.79Z"
/>
</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:
Now coming to the CSS section. We remove the paddings and margins from the body and set the background colour to black. Also, set the overflow to hidden.
Next for the container div we add the dimensions of 700px x 700px. We centre the div with absolute position. We use the clip-path property with URL set to 'map-path'(same as the id of <clipPath>). This clips the container to the India map shape.
Next, we set dimensions and colours for each of the flag colours. For orange and green colours we add a slide right animation. While for colour white we add a slide left animation.
For the Ashoka chakra, we set the dimensions to 120px x 120px. We add a scale-up animation along with a bit of spin animation to it.
body {
padding: 0;
margin: 0;
background-color: #000000;
overflow: hidden;
}
.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);
}
}
Your Independence day special animation is now ready. You can download this code or the images used in this code by clicking the button below.
