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.
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.
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.
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).
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!
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.
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.
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
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
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
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
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
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
Moving on from the Daily CSS Challenge
I took a break from the daily CSS challenge because there were inspirations from other artists that I loved. One of the uber talented designers I follow is Scott Tusk. I coded a CSS version of an illustration of a shop by Mr. Tusk and recorded the live coding session here.
I followed this up with another one of Mr. Tusk’s masterpieces. A flat designed desk. These pieces were intricate with small details that were so satisfying to capture. Its in these subtle details that make an image truly unique.
What I learned
Even if I am not talented in hand illustrations, there is a way to express myself through other mediums. I found that medium to be in HTML and CSS. To level up and get to a point where I could create cute artwork, I focused on two things: the basics, and consistency. Working with basic CSS shapes like rectangles and basic properties like border-radius overtime gave me the muscle memory to progress into more intricate illustrations.
There’s a lot more to learn about CSS and this is just the start of a long journey I will continue to get inspiration on. Hopefully I can inspire others to start their journey too.
To be continued….
Thank you for taking the time to read about my journey. If you know someone who would find this post helpful or inspiring, please share it with them and give this post a green heart :)
Let’s connect: Twitter | YouTube | Codepen
