Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>play with svg filter courtesy of maya.land</title>
- <style>
- body, main, article { width: 100%; height: 100%; }
- .dithercolor > ::after {
- content: '';
- width: 100%;
- height: 100%;
- opacity: 0.5;
- pointer-events: none;
- position: fixed;
- display: block;
- z-index: 2;
- top: 0;
- left: 0;
- background-image: url(< PATH TO YOUR BLUE NOISE ASSET >);
- background-repeat: repeat;
- background-size: 128px 128px;
- }
- svg { height: 0; width: 0;}
- .dithercolor {
- width: max-content;
- height: max-content;
- filter: url(#gen);
- }
- </style>
- </head>
- <body>
- <main>
- <article>
- <script>
- function setSize(e) {
- e.setAttribute("height", "100%");
- e.setAttribute("width", "100%");
- }
- function makeFlood(resultName, hex) {
- var flood = document.createElementNS("http://www.w3.org/2000/svg", 'feFlood');
- flood.setAttribute("flood-color", hex);
- setSize(flood);
- flood.setAttribute("result", resultName);
- return flood;
- }
- function makeDifference(resultName, inputName){
- var blend = document.createElementNS("http://www.w3.org/2000/svg", 'feBlend');
- blend.setAttribute("mode", "difference");
- setSize(blend);
- blend.setAttribute("in", "SourceGraphic");
- blend.setAttribute("in2", inputName);
- blend.setAttribute("result", resultName);
- return blend;
- }
- function makeDesaturate(resultName, inputName) {
- var matrix = document.createElementNS("http://www.w3.org/2000/svg", 'feColorMatrix');
- setSize(matrix);
- matrix.setAttribute("type", "saturate");
- matrix.setAttribute("values", "00");
- matrix.setAttribute("in", inputName);
- matrix.setAttribute("result", resultName);
- return matrix;
- }
- function makeThresholded(resultName, inputName, offset) {
- var matrix = document.createElementNS("http://www.w3.org/2000/svg", 'feColorMatrix');
- setSize(matrix);
- matrix.setAttribute("type", "matrix");
- matrix.setAttribute("values", `500 0 0 0 ${offset}
- 0 500 0 0 ${offset}
- 0 0 500 0 ${offset}
- 0 0 0 1 0`);
- matrix.setAttribute("in", inputName);
- matrix.setAttribute("result", resultName);
- return matrix;
- }
- function makeTransparent(resultName, inputName) {
- var matrix = document.createElementNS("http://www.w3.org/2000/svg", 'feColorMatrix');
- setSize(matrix);
- matrix.setAttribute("type", "matrix");
- matrix.setAttribute("values", `1 0 0 0 0
- 0 1 0 0 0
- 0 0 1 0 0
- -0.4 -0.4 -0.4 1 0`);
- matrix.setAttribute("in", inputName);
- matrix.setAttribute("result", resultName);
- return matrix;
- }
- function makeRecolored(resultName, inputName, floodName) {
- var composite = document.createElementNS("http://www.w3.org/2000/svg", 'feComposite');
- setSize(composite);
- composite.setAttribute("in", inputName);
- composite.setAttribute("in2", floodName);
- composite.setAttribute("operator", "lighter");
- composite.setAttribute("result", resultName);
- return composite;
- }
- function makeMergeNode(inputName) {
- var node = document.createElementNS("http://www.w3.org/2000/svg", 'feMergeNode');
- node.setAttribute("in", inputName);
- return node;
- }
- window.addColor = function(name, hex, offset) {
- var gen = document.getElementById("gen");
- var marge = document.getElementById("marge");
- var floodname = name + "flood";
- var diffname = name + "diff";
- var desatname = name + "desat";
- var thresholdname = name + "thresholded";
- var transparentname = name + "transparent";
- var recoloredname = name + "colored";
- gen.insertBefore(makeFlood(floodname, hex), marge);
- gen.insertBefore(makeDifference(diffname, floodname), marge);
- gen.insertBefore(makeDesaturate(desatname, diffname), marge);
- gen.insertBefore(makeThresholded(thresholdname, desatname, offset), marge);
- gen.insertBefore(makeTransparent(transparentname, thresholdname), marge);
- gen.insertBefore(makeRecolored(recoloredname, transparentname, floodname), marge);
- marge.appendChild(makeMergeNode(recoloredname));
- }
- </script>
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
- <filter id="gen" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
- <feFlood flood-color="#662d33" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="bg"/>
- <feMerge id="marge" x="0%" y="0%" width="100%" height="100%" result="merge">
- <feMergeNode in="bg"/>
- </feMerge>
- </filter>
- </svg>
- <div class="ditherparent">
- <div class="dithercolor">
- <img
- src="https://loremflickr.com/640/360"
- width="600">
- <div class="black overlay"></div>
- </div>
- </div>
- </article>
- </main>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement