Making the Awesome Logo

HMU for any design consultation

I think we can all agree that the front page of my blog at the time of writing looks somewhat lackluster. After all, seeing as I'm currently mostly doing frontend work, and my LinkedIn is pointing to this website, it is probably a good idea for it to have some more wow factor to it. What is then required? An awesome logo ofc.

Having few reuirements, other than the logo being super cool and preferably an SVG, I ventured onto Google to find me a nice logo making service for free. My first thought was using Midjourney or some other generative AI to be all trendy and stuff. Quickly discovering that Midjourney has no free tier, and assuming that any other readily avilable AI tool would also be paid, that idea was scrapped. Next in line were the less sophisticated logo making tools. After trying a few and finding nothing but a cheap corporate look as a result, I decided to dig into my own creativity.

Having never really created an SVG from scratch before I figured Figma would have some options for this. Lo and behold, without to much fuzz I was able to export my gorgeous hand drawing as an SVG. Look at this beast!

However, I thought it needed some more color to it. remembering a cool video I saw once about a linear gradient effect for text, I thought I'd give it a try. After all, who does not want their logo to look like the WordArt headings you used for your birthday invitations as a kid. Turns out, however, that the trick I saw only worked when using actual text. As my logo is an SVG the same kind of styling was not as easily applied. While there is support for setting the clip-path CSS property to a clipPath SVG tag, doing so from an external SVG has little browser support, and my late night experimenting did not yield the desired results.

Enter Stack Overflow! Luckily some SVG nerd, and I mean that in the most positive sense possible, had acutually bothered replying to a question that solved the same problem as I had. Namely, how to apply a linear gradient to a group of SVG paths. I found the answer here and am ever so grateful u/collapsar on SO.

With a quick copy/paste and some modification to have tweakable colors, I now have my new super cool logo! Customizable with different colors, I can now use this to invoke nostalgia for the 00s WordArt:

That would be all ✌️