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.
Participated in the
Pi Day Speed Challenge