Check out the effects of the css-properties »mix-blend-mode« and »opacity« with RGB-colored rectangles.
Last active
February 23, 2016 16:11
-
-
Save exakte-aesthetik/fec95cd6e12cc05c059a to your computer and use it in GitHub Desktop.
mix-blend-modes and opacity
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Karo</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <!-- <script src="../d3/d3.js"> --> | |
| </script> | |
| <style> | |
| .single-rect{ | |
| mix-blend-mode: screen; | |
| } | |
| #setOpacity, #blendmodeSelect{ | |
| display: inline-block; | |
| font-family: sans-serif; | |
| } | |
| .form-text{ | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| text-transform: lowercase;; | |
| } | |
| #blendmodeSelect ~ .form-text{ | |
| margin-left: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="svgContainer"> | |
| </div> | |
| <div id="formContainer"> | |
| <span class="form-text">mix-blend-mode</span> | |
| <form id="blendmodeSelect" name="blendmodeSelect" onClick="return handleSelect()" > | |
| <select id="mySelection" name="blend-modes"> | |
| <option value="multiply">multiply</option> | |
| <option value="screen">screen</option> | |
| <option value="overlay">overlay</option> | |
| <option value="darken">darken</option> | |
| <option value="lighten">lighten</option> | |
| <option value="color-dodge">color-dodge</option> | |
| <option value="color-burn">color-burn</option> | |
| <option value="hard-light">hard-light</option> | |
| <option value="soft-light">soft-light</option> | |
| <option value="exclusion">exclusion</option> | |
| <option value="saturation">saturation</option> | |
| <option value="color">color</option> | |
| <option value="luminosity">luminosity</option> | |
| </select> | |
| </form> | |
| <span class="form-text">Opacity</span> | |
| <form id="setOpacity" name="setOpacity" onClick="return handleOpacity()"> | |
| <input id="myOpacity" type="number" value="100" min="0" max="100" step="10" name="opacity"> | |
| </form> | |
| </div> | |
| <script type="text/javascript"> | |
| var setupChart = { | |
| "margin": { | |
| "top": 12, | |
| "right": 12, | |
| "bottom": 6, | |
| "left": 12 | |
| }, | |
| width: function() {return 960 - this.margin.left - this.margin.right;}, | |
| height: function() {return 450 - this.margin.top - this.margin.bottom;}, | |
| "rectsPerX": 13, | |
| "rectsPerY": 6 | |
| }; | |
| function placeholderdata(){ | |
| var x = d3.range(0, setupChart.rectsPerX); | |
| var y = d3.range(0, setupChart.rectsPerY); | |
| var output = []; | |
| for(var i = 0; i < y.length; i++){ | |
| for(var j = 0; j < x.length; j++){ | |
| output.push([ x[j], y[i] ]); | |
| }; | |
| }; | |
| return output; | |
| }; | |
| function handleSelect(event){ | |
| changeBlendmode(document.getElementById("mySelection").value); | |
| return false; | |
| }; | |
| function handleOpacity(event){ | |
| changeOpacity(document.getElementById("myOpacity").value); | |
| return false; | |
| }; | |
| var color = d3.scale.ordinal() | |
| .range(["#ff0000","#00ff00", "#0000ff"]); | |
| var svg = d3.select("#svgContainer").append("svg") | |
| .attr("width", setupChart.width() + setupChart.margin.left + setupChart.margin.right) | |
| .attr("height", setupChart.height() + setupChart.margin.top + setupChart.margin.bottom) | |
| .append("g") | |
| .attr("class", "container") | |
| .attr("transform", "translate(" + setupChart.margin.left + "," + setupChart.margin.top + ")") | |
| .attr("clip-path", "url(#clip)"); | |
| var containerMask = svg.append("defs").append("svg:clipPath") | |
| .attr("id", "clip") | |
| .append("svg:rect") | |
| .attr("id", "clip-rect") | |
| .attr("x", "0") | |
| .attr("y", "0") | |
| .attr("width", setupChart.width()) | |
| .attr("height", setupChart.height()); | |
| var rectSize = setupChart.height() / setupChart.rectsPerY; | |
| var rect = svg.selectAll(".single-rect") | |
| .data(placeholderdata()) | |
| .enter() | |
| .append("rect") | |
| .attr("class", "single-rect") | |
| .attr("fill", function(d){return color(d);}) | |
| .attr("x", - rectSize / 2 ) | |
| .attr("y", - rectSize / 2 ) | |
| .attr("width", rectSize) | |
| .attr("height", rectSize) | |
| .attr("transform", function(d){return "translate(" + (d[0]*rectSize + rectSize/2) + "," + (d[1]*rectSize + rectSize/2) + ") rotate(0)";} ); | |
| var form = d3.select("#formContainer") | |
| .style("margin-left", "" + setupChart.margin.left + "px" ); | |
| function changeBlendmode(selection){ | |
| rect.style("mix-blend-mode", selection); | |
| }; | |
| function changeOpacity(opa){ | |
| rect.style("opacity", opa/100); | |
| console.log(opa); | |
| }; | |
| d3.timer(function(t){ | |
| var tRotate = parseInt((t/50) % 90); | |
| var tScale = Math.sin(t/750)/2; | |
| rect.attr("transform", function(d){ | |
| return "translate(" + (d[0]*rectSize + rectSize/2) + "," + (d[1]*rectSize + rectSize/2) + ")rotate(" + tRotate + ") scale(" + (1 + tScale) +")";}) | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment