I Created More Logos With CSS

This article was originally posted on my personal blog

In my last post, I created famous logos with CSS. It was a nice challenge as I haven't practiced CSS this way in a while.

After posting it and asking for the reader's suggestions for my next challenge, I received a few that definitely were on the next level of difficulty. Although the number of logos is less this time, the challenge was definitely bigger for me. I also was able to use a lot of the concepts I practiced last time in this one, which helped immensely.

Just like last time, these logos are sorted from least difficult to most difficult.

VS Code

This was suggested by MeherabSamir. I actually was thinking of doing this one before it was suggested, but since it was suggested it encouraged me more to do it.

When I did this one, I expected it to be much harder than it actually was:

This was actually the first one I worked on in this list, and through it, I got to practice and understand perspective more, which I haven't used in a long time.

Red Hat

This was suggested by luxzg, and this was definitely the hardest. So why am I putting it this early? Well, because I couldn't do it the way I was supposed to. luxzg challenged me to do the logo not just the hat, with the face as well. After trying for hours to achieve that, I was not satisfied with the result and I opted to do just the hat, which wasn't easy either.

Although it's not perfect and I wasn't exactly able to fulfil the challenge fully, I still wanted to include it in the hopes I can do a better job another time.

GitHub

This was also suggested by MeherabSamir. This one I was so confused on how I can actually do it, but I think it turned out well. The only thing bothering me about it is the ears as for some reason they look off, but other than that I'm proud of the result.

I experienced a problem with this, however, that is also visible in the next logo, which is when I added overflow: hidden to the container, you can see a black outline around the circle (it's visible in the white areas). I tried looking up a solution for it, however, I couldn't find anything.

If anyone knows a fix for this, please let me know in the comments!

UPDATE: Temani Afif helped me resolve this so thank you!

Hitchhiker's Guide to The Galaxy

This was suggested by tq-bit. tq-bit said that this one is basically not "humanly possible." As I Googled the logo, there were different versions of it, so I picked the first one. I'm not sure if this is the one they meant, but if it is then I would like to tell them that what seems impossible is possible! (And if that's not the one, please play along as it makes me happy)

I experienced the same problem with this as the one previously which is the black outline. The hardest part about this one was the hand shape and making it as similar as possible. Took me a few hours to do it, but it was worth it as the result was satisfying (to me at least).

Conclusion

Although this list is shorter than the one before, but I have learned so much through this one and was able to challenge myself on a higher level.

I'm hoping to do next something more 3D or that has an animation in it. Let me know if you have any suggestions!