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.

6 Likes

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


Preview:
HypeDuoTone-Animated.html

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

4 Likes

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)

2 Likes

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