Hype Blendmodes (with full IDE support)

This is a full extension offering blendmodes. You can assign them by using the attribute data-blendmode (assigning MODENAME) or by class blendmode-MODENAME.

MODENAME are color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, overlay, saturation, screen, soft-light.

Demo:
HypeBlendModes.html

Example Download:
HypeBlendModes.hype.zip
PS: there is an older version of this project using an symbol but this take is much more versatile, in my opinion.

Code repository on GitHub

Version history
1.0 Initial release under MIT-license
1.2 Converted into full IDE plugin
1.3 Fixed IDE support, added dataset variation

Content Delivery Network (CDN)

Latest version can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeBlendModes/HypeBlendModes.min.js"></script>

Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeBlendModes

Learn how to use the latest extension version and how to combine extensions into one file at

6 Likes

Here is a simple trick using the blendmode multiply to color a chair.

Demo:
HypeBlendModes_Chair.html

Download:
HypeBlendModes_Chair.hype.zip

6 Likes

I just came across this article:

But I think your extension and Hype’s editor makes the process much easier!

I think this “extension” is so trivial that it should be part of Hype.

though, i like the idea of components loaded when needed and not one big library containing the whole thing.

1 Like

Yes, true. I am with you on this. I was just thinking that blend modes are so basic and only require a couple of lines of code.

edit: Moved thoughts to …

↑ look at project
1.3 Fixed IDE support, added dataset variation

1 Like

This would be neat to recreate in Hype using blendmodes
https://codepen.io/kyleshook/full/GRKVgeZ

Nice work!!

Easy to use :slight_smile:

I have been using something similar for a while:

Very cool! (In Chrome)

This pen doesn’t work as intended in Safari (13.0.2) or Firefox (70.0).

Playing around with Blendmode and Textstroke:

Mix-Blend-Mode-And-Text-Outline-Test.hype.zip (529,8 KB)

based on https://ishadeed.com/article/blending-modes-css/

3 Likes

I must admit this an amazing extension @MaxZieb really cool stuff, I was able to do an interesting loop animating 2 circular gradients and a letter zooming in and out Experimental.zip (41.4 KB)

3 Likes