Cute animal - eleftheria batsou

My journey with pure CSS images

I was almost in the middle of my #100DaysOfCode challenge when I started noticing on my twitter feed several cute images with the hashtag #dailyCssImages. When I would click on them I could see the code, all the beauty of CSS/SCSS and just a few lines of HTML. I started digging on images and codes, I followed several developers on Codepen who created either simple and cute or complicated and detailed images. I was fascinated. Some days past and I found an article on Medium with the title A Beginner’s Guide to Pure CSS Images, written by the creator of Daily CSS Images challenge, named Michael Mangialardi. It was a tutorial on how to start creating CSS Images. I decided for my 44th day of #100DaysOfCode to give it a try. The result can be seen below. My pen’s description was:


Day: 44 of 100

I am planning on taking the challenge #dailycssimages. This is my first time trying to do a "koala" using only CSS. I followed this guide here

I am sure I will learn so many new things with the challenge, I love cute little things and that's what I am planning to make. I have to admit I am awful at drawing by hand but I will challenge myself to get better with code and design.



After finished reading the article I was hooked. I subscribed to the 10-week challenge and the next day I received my first email. The theme was “Bear Cub”.

Honestly, my first image sucked.



Strange enough, although I didn’t like the result, I was happy with my creation!


The next day I changed my approach to designing images. I first made a simple sketch with pen and paper.



And then I tried to code it.

Ok, once again the result wasn’t great, but it was better than the firsts’ day.


Code | Video-tutorial


On the 3rd and 4th day I tried to add more details in my images and I google for some animal-inspiration.

I finally created these images:


Code | Video-tutorial


tiger - eleftheria

Code | Video-tutorial


On day 5, I designed a cute creature and people seemed to really like it.




This boosted my confidence and I was ready for the 2nd week. I won’t get into a lot of detail… but I learned a couple of new tools and I tried to apply my recent knowledge into the images.

The tools were about: Gradient colors and Quick shapes.


The 3rd week must be on of my favorites for two reasons:

  1. The theme was FOOD!

  2. I started animating



That week I made a pizza, a hamburger, a taco, a cheesecake and a pie!

pizza - pure css -eleftheria



Code |  Video-tutorial 

The hamburger until today has 1019 views on codepen


Code |  Video-tutorial


Code |  Video-tutorial




The 4th week started... with a detailed Frankenstein





… and ended with a monster!

Well, I gave my monster a twist, and I decided to make it cute.


You can clearly witness how I got better at coding but not at drawing.




Code | Video-tutorial 

This pen has 1098 view on Codepen, and I have to admit, at this point I was quite proud of my work.


The 5th week was all about superheroes

As I like to be playful I combined three things:

  1. Superheroes

  2. Animation



Et voila the results:



Code | Video-tutorial




Code | Video-tutorial


On weeks 6 and 7 I designed icons and logos


The left image is how I found an apple app store icon on google images, and the right one is how I recreated it:

Code | Video-tutorial


As for the logos:


Code | Video-tutorial


Code | Video-tutorial


Code | Video-tutorial


Code | Video-tutorial


The elm logo was a bit tricky, so I took advantage of the Clippy tool:


Code | Video-tutorial


On my 40th day, I made a Nintendo 2DS


I got inspired by this image:


I quickly sketched a draw:


And after applying some CSS I had my own Nitendo 2DS:

code | video-tutorial


The 9th week I felt really inspired

I created five different images based on the same color palette.

The three of them were minimalistic and quite abstract.



code | video-tutorial

code | video-tutorial

code | video-tutorial


On day 44 I created a robot. First I google some images, when I found the one I liked most, I drew it, and then I code it.


code | video-tutorial


On day 45, I decided to do something similar, a space inspired mascot-robot!




I finished the challenge with a delicious cake



Here are all my pure CSS images for the #dailyCssImages challenge

This pen has 2.523 views and that makes me extremely happy as I spent numerous hours searching and coding.



This challenge helped me in so many different ways:

  • I got better at CSS/SCSS, I also learned about animations.

  • I learned new tools about colors, shapes, and animations.

  • I connected with people all around the world on Codepen, Twitter, and Youtube.

  • I shared my knowledge on Codepen and Youtube and I hope I helped and inspired other developers.

  • I learned to be more patient and focused on my image and my code rather than get distracted by little things.

  • I got better at time management.

  • I did not get better at drawing!


Thank you for taking the time to read my story.