Pi Day Animation Using Css

Introduction: Pi Day Animation Using Css

Introduction: As Pi day is around the corner, I decided to to write a simple program that will create simple animation of pi using the knowledge of CSS and HTML.


1. personal computer

2. notepad ++ or any text editor of your choice

3. Figma software for SVG design and editing

Step 1: Design Your Pi Symbol

I use Figma software to design the pi symbol and export it as an SVG file. you can download Figma software online and it is free to use


Step 2: Create a Simple Html Template

create an HTML template, open the pi SVG file using notepad++ or any text editor, copy the SVG code and paste it inside the body element of your HTML template.

Step 3: Create the '14th of March Is Pi Day' Letters.

Inside the body element of my HTML template, I inserted the h1 element and wrote the '14th of March is pi day' using the span element embedded in my h1 element

Step 4: Animation of Pi Symbol

For the pi symbol, I used the CSS @ keyframe rules creating a kind of pulsing effect changing the scale of the pi symbol at a time interval of 1.5s.

Step 5: Animation of the '14th March Is Pi Day' Letter

I used the WebKit CSS extension to create the letter animation

Step 6: Finishing the Animation

finally, it was finished and we have jumping letters and a pulsing pi. Happy pi day in advance to you all.

Code is available down below. Just convert it from pie.txt to pie.html and run it in your browser to see the animation.


Pi Day Speed Challenge

Participated in the
Pi Day Speed Challenge

Be the First to Share


    • Arduino Contest

      Arduino Contest
    • Home Decor Challenge

      Home Decor Challenge
    • Explore Science Challenge

      Explore Science Challenge