So I did a bunch of work I donated to a political candidate and (at the time) frequent media guest commentator, and this is a product of that work.
The site I built isn't up anymore, and the new host is either not willing or not able to implement these features. I recreate them here to showcase the functionality and (hopefully) inspire your future projects.
The process began with converting the existing logos to SVG, which is a process someone else should describe. Creating the SVG graphics allowed giving each element of the image a different ID and sometimes CSS class name. This is critical to implementing this kind of style automation.
My own R logo is created and style using these methods. The logos at the site's top and bottom are the same graphic, styled using CSS.
Originally, each section of the site had a different class name applied to the body element, and that class name determined which style was applied to ALL of the SVG graphics on the site. There were hover listeners on the different section links which would cause the entire site style to shift to that section style when hovered, it was super cool. If you were hovering over the link to a section, you would get a preview of the style in that section.
I have re-created some of that coordinated styling with the Global Styling buttons below.
All of the changes are affected by using CSS variables. The javascript that applies styles on this page sets a CSS variable to a new color. The color change, the smooth transitions, it's all CSS. That's all it takes with SVG graphics designed to use CSS variables.
Remember, these are SVG images - and none contain animations. Everything is controllable externally.
SVGs
Global Styling
Logo 1
Logo 2
Feather
This Thing
