Hype DuoTone (using SVG filter)

Benefit of this approach, it is a small generator rather than using a fixed lookup. Hence, the examples are only some samples possible. You can use an array with three values or a hex as a string for colors. Works in the IDE with an preview.

HypeDuoTone.hype.zip (586,2 KB)

Based on this code pen by Lentie Ward.


Lovely effect. Do you think it could easily be bound live to a rectangle's color? Then that could be animated live by hype? (The rectangle could have 0% opacity and just act as a lightweight "rig").

Alternatively maybe the tones are by default registered in additional HTML attributes?

Animated using Hype Data Decorator observing
Text Color and Text Shadow


HypeDuoTone-Animated.hype.zip (220,3 KB)


Setting fixed values using Hype Data Decorator observing
the data attributes data-duotone-color1 and data-duotone-color2

HypeDuoTone-Dataset.hype.zip (234,0 KB)


Amazing, I love it!!! I imagine there are some color combinations that don't animate well, but I think the example is a pretty nifty effect. Nice work :slight_smile:.

I'd love to see folks show off if they use this extension.

1 Like

Great! @MaxZieb