Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

Creating Indian Flag with CSS- Independence Day Special ๐Ÿ‡ฎ๐Ÿ‡ณ

Creating Indian Flag with CSS- Independence Day Special ๐Ÿ‡ฎ๐Ÿ‡ณ

Dhairya Shah's photo
Dhairya Shah
ยทAug 15, 2022ยท

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Happy Independence day to every Indian and tribute to every Freedom Fighters who helped India get Independence ๐Ÿซก

India has completed 75 years of Independence and on this special day, I will be making the Indian Flag with the power of CSS.

I will be using Tailwind CSS to speed up the work.

Text

To make Indian flag style text,

<h2 class="text-center text-2xl font-bold"><span class="text-[#FF9933]">#Happy</span><span class="text-[#138808]">IndependenceDay</span></h2>

Now let's create the flag,

<div class="mt-4 flex items-center justify-center">
      <div>
        <div class="h-9 w-36 rounded-t-md bg-[#FF9933]"></div>
        <div class="flex h-9 w-36 justify-center duration-300 hover:rotate-180">
          <svg width="36" height="36" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle cx="250" cy="250" r="215" fill="none" stroke="#000080" stroke-width="30" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(7.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(22.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(37.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(52.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(67.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(82.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(97.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(112.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(127.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(142.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(157.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(172.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-172.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-157.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-142.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-127.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-112.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-97.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-82.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-67.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-52.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-37.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-22.5 250 250)" />
            <circle cx="450" cy="250" r="10" fill="#000080" transform="rotate(-7.5 250 250)" />
            <g>
              <path d="M250 230l-6.972-59.696L250 40l6.972 130.304zM255.176 230.681l8.716-59.466 40.46-124.06-26.99 127.67zM260 232.68l23.81-55.185L355 68.135l-59.114 116.333zM264.142 235.858l37.281-47.142 97.07-87.208-87.21 97.069zM267.32 240l48.212-35.886L431.865 145l-109.36 71.19zM269.319 244.824l55.856-22.186 127.67-26.99-124.06 40.46zM270 250l59.696-6.972L460 250l-130.304 6.972zM269.319 255.176l59.466 8.716 124.06 40.46-127.67-26.99zM267.32 260l55.185 23.81L431.865 355l-116.333-59.114zM264.142 264.142l47.142 37.281 87.208 97.07-97.069-87.21zM260 267.32l35.886 48.212L355 431.865l-71.19-109.36zM255.176 269.319l22.186 55.856 26.99 127.67-40.46-124.06zM250 270l6.972 59.696L250 460l-6.972-130.304zM244.824 269.319l-8.716 59.466-40.46 124.06 26.99-127.67zM240 267.32l-23.81 55.185L145 431.865l59.114-116.333zM235.858 264.142l-37.281 47.142-97.07 87.208 87.21-97.069zM232.68 260l-48.212 35.886L68.135 355l109.36-71.19zM230.681 255.176l-55.856 22.186-127.67 26.99 124.06-40.46zM230 250l-59.696 6.972L40 250l130.304-6.972zM230.681 244.824l-59.466-8.716-124.06-40.46 127.67 26.99zM232.68 240l-55.185-23.81L68.135 145l116.333 59.114zM235.858 235.858l-47.142-37.281-87.208-97.07 97.069 87.21zM240 232.68l-35.886-48.212L145 68.135l71.19 109.36zM244.824 230.681l-22.186-55.856-26.99-127.67 40.46 124.06z" fill="#000080" />
            </g>
            <circle cx="250" cy="250" r="40" fill="#000080" />
          </svg>
        </div>
        <div class="h-9 w-36 rounded-b-md bg-[#138808]"></div>
      </div>
    </div>

The SVG is for the Ashok Chakra which is in the center of the flag.

This is how the Indian flag will appear. Indian flag

Full version

Thanks for reading

Follow me on Twitter

Liked my content? Buy me a coffee to fuel my work. Thanks for reading!

ย 
Share this