grep jason_

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!