Advertisement
Guest User

svg filter fun

a guest
Oct 2nd, 2021
482
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.72 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>play with svg filter courtesy of maya.land</title>
  6.       <style>
  7.          body, main, article { width: 100%; height: 100%; }
  8.          .dithercolor > ::after {
  9.          content: '';
  10.          width: 100%;
  11.          height: 100%;
  12.          opacity: 0.5;
  13.          pointer-events: none;
  14.          position: fixed;
  15.          display: block;
  16.          z-index: 2;
  17.          top: 0;
  18.          left: 0;
  19.          background-image: url(< PATH TO YOUR BLUE NOISE ASSET >);
  20.          background-repeat: repeat;
  21.          background-size: 128px 128px;
  22.          }
  23.          svg { height: 0; width: 0;}
  24.          .dithercolor {
  25.          width: max-content;
  26.          height: max-content;
  27.          filter: url(#gen);
  28.          }
  29.       </style>
  30.    </head>
  31.    <body>
  32.       <main>
  33.          <article>
  34.             <script>
  35.                function setSize(e) {
  36.                e.setAttribute("height", "100%");
  37.                        e.setAttribute("width", "100%");
  38.                      }
  39.                
  40.                function makeFlood(resultName, hex) {
  41.                
  42.                  var flood = document.createElementNS("http://www.w3.org/2000/svg", 'feFlood');
  43.                        flood.setAttribute("flood-color", hex);
  44.                        setSize(flood);
  45.                        flood.setAttribute("result", resultName);
  46.                        return flood;
  47.                      }
  48.                
  49.                function makeDifference(resultName, inputName){
  50.                var blend = document.createElementNS("http://www.w3.org/2000/svg", 'feBlend');
  51.                blend.setAttribute("mode", "difference");
  52.                        setSize(blend);
  53.                        blend.setAttribute("in", "SourceGraphic");
  54.                        blend.setAttribute("in2", inputName);
  55.                        blend.setAttribute("result", resultName);
  56.                        return blend;
  57.                      }
  58.                
  59.                function makeDesaturate(resultName, inputName) {
  60.                var matrix = document.createElementNS("http://www.w3.org/2000/svg", 'feColorMatrix');
  61.                        setSize(matrix);
  62.                        matrix.setAttribute("type", "saturate");
  63.                        matrix.setAttribute("values", "00");
  64.                        matrix.setAttribute("in", inputName);
  65.                        matrix.setAttribute("result", resultName);
  66.                        return matrix;
  67.                      } 
  68.                function makeThresholded(resultName, inputName, offset) {
  69.                var matrix = document.createElementNS("http://www.w3.org/2000/svg", 'feColorMatrix');
  70.                        setSize(matrix);
  71.                        matrix.setAttribute("type", "matrix");
  72.                        matrix.setAttribute("values",  `500 0 0 0 ${offset}
  73.                0 500 0 0 ${offset}
  74.                0 0 500 0 ${offset}
  75.                0 0 0 1 0`);
  76.                        matrix.setAttribute("in", inputName);
  77.                        matrix.setAttribute("result", resultName);
  78.                        return matrix;
  79.                      } 
  80.                function makeTransparent(resultName, inputName) {
  81.                var matrix = document.createElementNS("http://www.w3.org/2000/svg", 'feColorMatrix');
  82.                        setSize(matrix);
  83.                        matrix.setAttribute("type", "matrix");
  84.                        matrix.setAttribute("values",  `1 0 0 0 0
  85.                0 1 0 0 0
  86.                0 0 1 0 0
  87.                -0.4 -0.4 -0.4 1 0`);
  88.                        matrix.setAttribute("in", inputName);
  89.                        matrix.setAttribute("result", resultName);
  90.                        return matrix;
  91.                      }
  92.                
  93.                function makeRecolored(resultName, inputName, floodName) {
  94.                var composite = document.createElementNS("http://www.w3.org/2000/svg", 'feComposite');
  95.                        setSize(composite);
  96.                        composite.setAttribute("in", inputName);
  97.                        composite.setAttribute("in2", floodName);
  98.                        composite.setAttribute("operator", "lighter");
  99.                        composite.setAttribute("result", resultName);
  100.                        return composite;
  101.                      }
  102.                function makeMergeNode(inputName) {
  103.                var node = document.createElementNS("http://www.w3.org/2000/svg", 'feMergeNode');
  104.                        node.setAttribute("in", inputName);
  105.                        return node;
  106.                      }
  107.                
  108.                window.addColor = function(name, hex, offset) {
  109.                  var gen = document.getElementById("gen");
  110.                  var marge = document.getElementById("marge");
  111.                  var floodname = name + "flood";
  112.                  var diffname = name + "diff";
  113.                  var desatname = name + "desat";
  114.                  var thresholdname = name + "thresholded";
  115.                  var transparentname = name + "transparent";
  116.                  var recoloredname = name + "colored";
  117.                  gen.insertBefore(makeFlood(floodname, hex), marge);    
  118.                  gen.insertBefore(makeDifference(diffname, floodname), marge);    
  119.                  gen.insertBefore(makeDesaturate(desatname, diffname), marge);    
  120.                  gen.insertBefore(makeThresholded(thresholdname, desatname, offset), marge);    
  121.                  gen.insertBefore(makeTransparent(transparentname, thresholdname), marge);    
  122.                  gen.insertBefore(makeRecolored(recoloredname, transparentname, floodname), marge);    
  123.                  marge.appendChild(makeMergeNode(recoloredname));
  124.                }
  125.                
  126.             </script>
  127.             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
  128.                <filter id="gen" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
  129.                   <feFlood flood-color="#662d33" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="bg"/>
  130.                   <feMerge id="marge" x="0%" y="0%" width="100%" height="100%" result="merge">
  131.                      <feMergeNode in="bg"/>
  132.                   </feMerge>
  133.                </filter>
  134.             </svg>
  135.             <div class="ditherparent">
  136.                <div class="dithercolor">
  137.                   <img
  138.                     src="https://loremflickr.com/640/360"
  139.                     width="600">
  140.                   <div class="black overlay"></div>
  141.                </div>
  142.             </div>
  143.          </article>
  144.       </main>
  145.    </body>
  146. </html>
  147.  
  148.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement