March 22, 2020

Animated Color Change Blog Logo

I have been wanting to swap the logo on my blog to my own logo (instead of the Animoji face I have been using) but I wanted it to be something more fun than just a static image of the logo. I landed on wanting a color changing animation that would randomly cycle through a set of colors. Now, how to do that..

I started down the path of using SVG or PNG transformation using filter because I wanted to do it without the need for javascript, and it worked ok. In the end it didn’t really create the look I wanted though. The biggest issue with filter is that you aren’t using standard #ff33cc values for colors, but rather a cluster of properties like this:

filter: invert(70%) sepia(80%) saturate(344%) hue-rotate(168deg) brightness(108%) contrast(98%)

You can get pretty close doing this, but it’s not perfect, and the transition was hard to make smooth. It also creates some unwanted shades of color as it transitions. You can see it working” here in this code pen.

See the Pen PNG logo Color Change w/filters by Jason Burk (@jasonburk) on CodePen.

Next I went down the road of using javascript to create the desired effect and ended with something I much preferred! Here is the code pen for this version.

See the Pen PNG Blog Logo Color Change w/js by Jason Burk (@jasonburk) on CodePen.

You can also just look at the top of this page to see it in action. 😉

So there you have it, a color changing logo! Do you have ideas of ways to do this with less code? Let me know for sure!


Design Theme Code


Previous post
Custom Post Type Indicator Another day, another self imposed challenge to add something cool to my blog theme! 😀 This time I set out to add a ‘post type indicator’ for each
Next post
My youtube-dl Setup The YouTube apps on the various platforms (iOS, Apple TV, web, and so on) are ok. I was looking for a better way to watch videos that I saved to
Jason Burk | 1999-2020
blot.im! | 🧛‍♂️
📦 Blog Archives 📦

#FreeAds
top