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

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

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.

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

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.

I used the WebKit CSS extension to create the letter 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.