7 days of CSS graphics and animations

See those graphics up there? I did those! The best part is they are all made 100% of code. Yup, it's possible to create fun graphic art with just code alone.

During the Christmas 2019 break from classes I decided to challenge myself to create one CSS graphic a day for 7 days. I did it as a way to practice my CSS positioning and animation skills and because I wanted to create some cute code art after being inspired by some really cool Pens on CodePen. Over the 7 days I learned a lot and had opportunities to play around with CSS using shapes to create some fun and cute graphics. Here is recap of the 7 days and what I did.

Day 1 - Mr Bear

On the first day I took some inspiration from another Pen and decided to make a bear. I used only circles by doing a border radius of 50% on all the shapes. It was fairly simple and straightforward and took me about 30 minutes to do. I used gradients for the bubble gum to make it look a bit more realistic. For my first graphic I don't think it was too bad and I did it all without having to Google anything to my surprise.

Day 2 - Bouncing Margaret

Margaret is a coworker of mine who is always interested in seeing what I'm learning and the projects I'm working on. As a small gift I decided to make her a CSS graphic and show her all the code that goes along with it. At first I was just going to use shapes to make a face but then I thought some animation would make it more interesting. I decided to add a shadow at the bottom and made her head bounce while the shadow expands to match the movement of her head. This was kind of challenging at first syncing the two different animations of the head and shadow but with some tweaking I made it work.

Day 3 - Eggs for Breakfast

So anyone who knows me knows that I love my eggs in the morning - especially an egg salad sandwich. I was obviously feeling hungry when I started this one and decided to create a frying pan with fried eggs moving. For this one I played around with different border radius percentages on the frying pan handle. This took me about 45 minutes to complete and was pretty straightforward overall.

Day 4 - Hearts and Likes

This is second fave - mostly because of the colour scheme. I love pink! When you hover over the heart it beats. I worked with the :before and :after pseudo class to create the heart which is something I have never worked with before. Basically using :before and :after allows you to flip the shape and gives you the two parts of the heart. This wasn't easy at first because when I added an animation to the heart it kept on rotating to the left but then I realized I could just join the scale and rotate properties together in the animation key frames to straighten it and it eventually worked.

Day 5 - Sunny with Clouds Weather Report

This was probably one of the longer ones to complete and I lost track of time. I animated the clouds and sun to work in sync. The sun slowly reveals the border around it to make it look like it's pulsing and the clouds move left to right with the opacity set to 90% so it appears transparent. I took inspiration from the iPhone weather app for the colour palette.

Day 6 - Janky Christmas Tree

Day 6 was Christmas Day and honestly doing a CSS graphic was the last thing on my mind. I decided to go ahead and make something because I had already missed a couple days and wanted to get it out the way. After my family left I got to work and decided to do what was probably the most appropriate fo the occasion - a Christmas tree. I worked with triangles for the first time to create the tree and used circles for the lights. I call it a Janky Christmas Tree because to me it feels kind of rushed and patched up - which is true. I completed everything in about 45 minutes.

Day 7 - My Self Portrait

On the last day of the challenge I did a self portrait of myself with a blinking eyes animation and it's my favourite one (although I'm probably a little bit biased hehe). I thought finishing off the challenge with something more personal was a good idea. I used a lot of circles to create my curly hair. To make my shoulder area appear in the yellow box and not "overflow" into the background I used overflow:hidden on it. I also did the same on the styling for my mouth so my tongue wouldn't appear outside my mouth lol.

In Conclusion...

This challenge was great and allowed me to really practice and brush up on my CSS skills and I’m glad I decided to do it. I still have a long way to go and so much to learn but I’m pretty happy with the fact that I stuck to it and completed the challenge - even if I missed a couple days in between. I plan to make more CSS graphics when I have some more free time from classes again over Reading Week to add to the collection.

To see the above graphics and animations and more of my work visit my CopePen.