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 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.
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!