I am inspired by graphic, visual design, and cute things. But unfortunately, I am not talented in drawing by hand. I enjoy looking at other designers’ illustrations on Dribbble, and was envious that they could draw such cute and intricate illustrations that are so inviting at the same time.

Check out my first drawing on Paper app.

Story time. Grab some chips, this post is going to make you hungry.

I ran across Codepen while exploring interesting animations. Seeing many visually beautiful pens made me want to create something beautiful too.

I looked into how some developers were drawing cool, complex shapes with canvas. I decided to give canvas a try too. I was struggling with canvas, because it depended heavily on math and JavaScript. I wanted to focus on the visuals more so than a math intensive medium. No-go to canvas (at least for now).

Then there was the Codevember challenge, where you practiced coding something everyday in November. Day 1 and Day 2 was rough because I was still learning how to navigate through all the resources available online.

On Day 3, I decided to draw a full screen Pikachu face. Pokemon GO was still a thing at the time and I absolutely adore Pikachu. Annnd also because it was super simple and made up of only circles and CSS border-radius. I added some HTML5 audio element to it, to make it even cuter. I was really happy about the outcome. This was what motivated me to continue working harder to learn more about CSS.

Pikachu

By Day 8 of Codevember, I was able to make this battery charging pen which required some jQuery/JS. I worked diligently everyday and learned by creating new content to practice features I researched.

Battery Charging

I started to explore flat designs on Dribbble and wondered if I could make these flat images with CSS? Yes, that was my next challenge.

On Day 14 of Codevember, I made a simple cup of coffee with some help from JavaScript, where you could pick between different variations: Americano, Latte, Cappucino or Water (for caffeine diversity).

Coffee Cup

By Day 21 of Codevember, I experimented with CSS animations and used basic CSS shapes like rectangle and circle to make this monitor and coffee cup. Apparently I realized that many developers shared my same love for coffee!

http://codepen.io/sashatran/full/BQWNRe

On Day 25 of Codevember, I was really still using a lot of CSS circles in my drawings as seen by this breakfast themed drawing. It was time to venture into the realm of higher complexity shapes.

Egg and Pan

On Day 28 of Codevember, I decided to explore new CSS shapes, such as stars and triangles. So feeling merry, I worked on a digital Christmas Tree to complement my first real tree I bought for my home.

Christmas Tree

At the end of Codevember, I really enjoyed making these awesome cute CSS Images, I wanted to challenge myself to make much more complicated images with CSS properties like box-shadow to create images and etc. But I really liked the consistency and accountability I built with other developers who were participating in this event with me.

So I signed up for Daily CSS Images Challenge by Michael Mangialardi. Each day we were given a topic or theme, and we were challenged to use only CSS to illustrate it. This challenge gave me the structure and consistency to continue creating content everyday. It also helped me think creatively about new ways to express myself and learn more CSS tricks that you might never use in web design.

Day 1: Cub

The first challenge was pretty simple and you could make a bear cub with basic shapes like circle . But I like making cute things, I gave it a pacifier so it won’t cry too much. https://codepen.io/sashatran/full/BpoLeE

Day 2: Elephant

Oh nooo, how do I draw an elephant trunk? I was playing around with different CSS shapes, looked up references like CSS Tricks. After hours of research, I came up with this piece. https://codepen.io/sashatran/full/JEGJyz

Day 3: Beaver

PBJ? I couldn’t imagine how a beaver looked like. It took me awhile to draw this out. I searched beaver images online and took inspiration from multiple sources to put something together. The beaver was applying for jobs and I wanted to support its search, so gave it a tie for good measure! https://codepen.io/sashatran/full/NdNqPo

Day 4: Tiger

Rawr. Again with the simple shapes and border-radius, I made a tiger with stripes. I got inspired by how text and web layouts were represented in a flat design style so I made the tiger read a newspaper to keep up-to-date with the current events. https://codepen.io/sashatran/full/egZbKo

Day 5: Favorite Animated Animal

Mike Wazowski of course! I am a huge fan of Pixar. I experimented with more CSS tricks to make the horns and mouth. Pseudo-selectors like :before and :after are really useful in creating composite shapes with a single div. https://codepen.io/sashatran/full/YNWYQy

Day 6: Clock

A simple clock. Tick tock. I cheated with some JavaScript with this image because I wanted the clock to represent the actual current time. I used vanilla JavaScript to get the current time and used a setInterval function to increment the angle of the hour, minute, and second hands. https://codepen.io/sashatran/full/OWbJzG/

Day 7: Ruler

I cheated a little bit again and used JavaScript to make the ruler’s cm lines, but quickly learned that you can actually make those lines easily with the box-shadow property. https://codepen.io/sashatran/full/jyVzXP/

Day 8: Notepad

Using more Javascript, I generated the notepad ring, holes, and used an SVG for the face :p. At this point, I was learning so much about CSS but I was still just beginning with SASS and didn’t realize the power SASS would give me until someone actually forked my pen on Codepen and rebuilt it with SASS. My mind was blown. SASS was my next challenge to master. https://codepen.io/sashatran/full/LxxWqq/

Day 9: Calendar

I stumbled upon a website call a.singlediv.com by Lynn Fisher, she makes really nice CSS images with only a single div. Up until this point, I had been creating separate div elements for every shape in my images. It inspired me to make today’s challenge a single div one. https://codepen.io/sashatran/full/BpWLbN

Day 10: Pencil Jar

Inspired to use more SASS in my CSS. This image of pencils were generated using the SASS @each function. https://codepen.io/sashatran/full/VPpqRV

Day 11: Pizza

I am a huge foodie. So it was only a matter of time until I channeled my love of food into the images I was creating. I got this chance when pizza became the next challenge! With just simple shapes like circle and triangle, you can make a pizza slice! I also added CSS animation for the melting cheese. I wish cooking was this easy. https://codepen.io/sashatran/full/QdgvLw

Day 12: Hamburger

I learnt about radial gradient for background-image, and how you could manipulate it! I used it to make the sesame seeds on the top bun. Keep the ingredients separated by a small amount of space highlighted each element of the burger. This challenge got me really hungry! https://codepen.io/sashatran/full/vgJNxE

Day 13: Taco

I used radial gradient again to make the gradient on the taco, I also started a YouTube channel to share my coding experience with others. https://codepen.io/sashatran/full/RKZdgw

Watch Me Practice — CSS Taco

Day 14: Cheesecake

I really liked the outcome for this one. I learnt about rotateX where you can rotate a shape on X axis! You can do with rotateY and rotateZ too. I used this property to rotate the top layer of the cheesecake. https://codepen.io/sashatran/full/ggGeZr

Watch Me Practice — CSS Cheesecake

Day 15: Pumpkin Pie

This one has simple CSS shapes and box-shadow to create shadows. To make the pie crust, I used three squares and rotated them to different angles, rounded the corners with border-radius. I am getting hungry writing this, are you? https://codepen.io/sashatran/full/vgWyWd

Watch Me Practice — Pumpkin Pie

Day 16: Frankenstein

I am not a fan of horror, but I needed to overcome my fears for the sake of keeping with the challenge. By now, I was getting used to combining many simple shapes to express what I wanted to draw. I focused on turning scary things into more cute representations using a flat design style. https://codepen.io/sashatran/full/bgajNZ

Watch Me Practice — CSS Frankenstein

Day 17: Zombie

Zombies are difficult to make cute so I covered it with some delicious cake. I do not think it enjoyed being buried in sweetness! https://codepen.io/sashatran/full/rjJYqy

Day 18: Vampire

I wanted to put a twist onto the vampire theme. I got some inspiration from a bandaid I had on (cooking is very dangerous). It dawned on me that these bandaids are little bloodsuckers. Mini vampires IRL! I added oozing blood for a dramatic effect (cue: dramatic sound effect). https://codepen.io/sashatran/full/OWvNKv

Watch Me Practice — Band Aid Vampire

Day 19: Monster of choice

This was tough for me because I had already drawn my monster of choice (Mike Wazowski). I decided to create my own cute little monster that cannot stop drooling. I named him Beebee. https://codepen.io/sashatran/full/zNjoje

Day 20: Superman

I decided to learn how to make CSS humans with simple shapes. I watched a tutorial for Adobe Illustrator on YouTube on how to draw people with simple shapes. This was my first attempt and since Valentine’s Day was coming up, I wanted to help Mr. Kent find a date. Swipe right ladies! https://codepen.io/sashatran/full/egjBar