Glitching Logo

Apr 12 · 3 mins

You saw a glitch? Don’t worry, that’s just the new logo.

Original
New

Inspiration

I recently came across uilabs by mrncst. And the hero section of the website caught my attention and got me thinking about how I want something similar and rework the style of my logo.

Breakdown

So the two main changes was obvious:

  • The pixellated font style.
  • The glitch effect.

These two blends together to create a retro, cyberpunk-ish vibe, which can represent the "unhinged" theme that I’m going for in this website better than the original.

Pixellated Font Style

After a little digging, I found out that the font used in the hero section is Redaction by Jeremy Mickel / Forest Young. So I downloaded the font and made a "V" out of it.

Glitch Effect

For the glitch effect, after a while, I found out the site actually use a package named powerglitch by 7PH for the animation. At first I thought it might be a bit overkill, but after checking out the package myself, I saw that was a solid choice because:

  • It leverages CSS animations to glitch anything.
  • It does not use a canvas, which makes it lightweight and less resource-intensive.
  • It does not have any external dependencies.

So, powerglitch it is.

Hope you find this kind of style interesting. Maybe you can make one for yourself too.

> comment on threads / twitter
>
© 2021-2024 Vinh Pham. CC BY-NC-SA 4.0