-
-
Save gravataLonga/3689ac0afdf88e7b28d633e257061b72 to your computer and use it in GitHub Desktop.
glass effect test css/svg thing (messy) - demo: https://codepen.io/rebane2001/details/OPVQXMv
This file contains hidden or 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
| <div style="position:absolute;top:-999px;left:-999px"> | |
| <svg | |
| id="effectSvg" | |
| width="200" | |
| height="200" | |
| viewBox="0 0 200 200" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <filter id="displacementFilter4"> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%230001' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing9" id="thing9" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF1' style='filter:blur(15px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing0" id="thing0" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23000' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing1" id="thing1" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%2300F'/%3E%3C/linearGradient%3E%3ClinearGradient id='gradient2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%230F0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='200' height='200' rx='25' fill='%237F7F7F' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23000' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='url(%23gradient1)' style='mix-blend-mode: screen' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='url(%23gradient2)' style='mix-blend-mode: screen' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%237F7F7FBB' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing2" id="thing2" /> | |
| <feGaussianBlur stdDeviation="0.7" id="preblur" in="SourceGraphic" result="preblur" /> | |
| <feDisplacementMap | |
| id="dispR" | |
| in2="thing2" | |
| in="preblur" | |
| scale="-148" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="1 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 1 0" result="disp1" /> | |
| <feDisplacementMap | |
| id="dispG" | |
| in2="thing2" | |
| in="preblur" | |
| scale="-150" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="0 0 0 0 0 | |
| 0 1 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 1 0" result="disp2" /> | |
| <feDisplacementMap | |
| id="dispB" | |
| in2="thing2" | |
| in="preblur" | |
| scale="-152" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="0 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 1 0 0 | |
| 0 0 0 1 0" result="disp3" /> | |
| <feBlend in2="disp2" mode="screen"/> | |
| <feBlend in2="disp1" mode="screen"/> | |
| <feGaussianBlur stdDeviation="0.0" id="postblur" /> | |
| <feBlend in2="thing0" mode="screen"/> | |
| <feBlend in2="thing9" mode="multiply"/> | |
| <feComposite in2="thing1" operator="in"/> | |
| <feOffset dx="43" dy="43"/> | |
| </filter> | |
| </svg> | |
| </div> | |
| <div style="position:absolute;z-index:999999999;top:-1150px;left:-1150px;resize:both;min-width:1200px;min-height:1200px;overflow: hidden;display: flex;align-items: flex-end;justify-content: flex-end;clip-path: polygon(calc(100% - 120px) calc(100% - 120px), calc(100% - 120px) 100%, 100% 100%, 100% calc(100% - 120px));" id="draggable"><div id="preview" style="width:200px;height:200px;backdrop-filter:url(#displacementFilter4)/* brightness(0.95)*/;pointer-events: none;"></div></div> | |
| <style> | |
| body, html { | |
| background: #000; | |
| } | |
| #controls { | |
| background: #FFF; | |
| display:inline-flex; | |
| flex-direction: column; | |
| padding: 16px; | |
| border-radius: 16px; | |
| input[type=range] { | |
| width: 200px; | |
| } | |
| } | |
| </style> | |
| <div id="controls"> | |
| <label><input type="range" id="w" value="200" min="10" max="1000">Width</label> | |
| <label><input type="range" id="h" value="200" min="10" max="1000">Height</label> | |
| <label><input type="range" id="r" value="25" min="0" max="255">Corner Radius</label> | |
| <label><input type="range" id="d1" value="17" min="0" max="255">Darkness Opacity</label> | |
| <label><input type="range" id="d2" value="5" min="0" max="50">Darkness Blur</label> | |
| <label><input type="range" id="l1" value="17" min="0" max="255">Lightness Opacity</label> | |
| <label><input type="range" id="l2" value="15" min="0" max="50">Lightness Blur</label> | |
| <label><input type="range" id="c1" value="68" min="0" max="255">Center Distortion</label> | |
| <label><input type="range" id="c2" value="15" min="0" max="20">Center Size</label> | |
| <label><input type="range" id="b1" value="7" min="0" max="100">Pre-blur</label> | |
| <label><input type="range" id="b2" value="0" min="0" max="100">Post-blur</label> | |
| <label><input type="range" id="c4" value="20" min="0" max="50">Iridescence</label> | |
| </div> | |
| <script> | |
| const draggable = document.getElementById("draggable"); | |
| const preview = document.getElementById("preview"); | |
| const effectSvg = document.getElementById("effectSvg"); | |
| const thing9 = document.getElementById("thing9"); | |
| const thing0 = document.getElementById("thing0"); | |
| const thing1 = document.getElementById("thing1"); | |
| const thing2 = document.getElementById("thing2"); | |
| const preblur = document.getElementById("preblur"); | |
| const postblur = document.getElementById("postblur"); | |
| const dispR = document.getElementById("dispR"); | |
| const dispG = document.getElementById("dispG"); | |
| const dispB = document.getElementById("dispB"); | |
| function updateSettings() { | |
| const vals = {}; | |
| document.querySelectorAll("#controls input").forEach(e=>vals[e.id]=e.value); | |
| const w = vals.w; | |
| const h = vals.h; | |
| effectSvg.setAttribute("width", `${w}`); | |
| effectSvg.setAttribute("height", `${h}`); | |
| effectSvg.setAttribute("viewBox", `0 0 ${w} ${h}`); | |
| preview.style.width = `${parseFloat(w)+50}px`; | |
| preview.style.height = `${parseFloat(h)+50}px`; | |
| preview.style.translate = `${w/4}px ${h/4}px`; | |
| draggable.style.top = `${-1200+h/4}px`; | |
| draggable.style.left = `${-1200+w/4}px`; | |
| draggable.style.clipPath = `polygon(calc(100% - ${w/2+25}px) calc(100% - ${h/2+25}px), calc(100% - ${w/2+25}px) 100%, 100% 100%, 100% calc(100% - ${h/2+25}px))`; | |
| thing9.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 ${w} ${h}' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='rgb%280 0 0 %2F${vals.d1/2.55}%25%29' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='%23FFF' style='filter:blur(${vals.d2}px)' /%3E%3C/svg%3E`); | |
| thing0.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 ${w} ${h}' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='rgb%28255 255 255 %2F${vals.l1/2.55}%25%29' style='filter:blur(${vals.l2}px)' /%3E%3C/svg%3E`); | |
| thing1.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 ${w} ${h}' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='%23000' /%3E%3C/svg%3E`); | |
| thing2.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `data:image/svg+xml,%3Csvg width='${w}' height='${h}' viewBox='0 0 ${w} ${h}' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%2300F'/%3E%3C/linearGradient%3E%3ClinearGradient id='gradient2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%230F0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='${w}' height='${h}' rx='${vals.r}' fill='%237F7F7F' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='%23000' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='url(%23gradient1)' style='mix-blend-mode: screen' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='url(%23gradient2)' style='mix-blend-mode: screen' /%3E%3Crect x='${w/4}' y='${h/4}' width='${w/2}' height='${h/2}' rx='${vals.r}' fill='rgb%28127 127 127 %2F${(255-vals.c1)/2.55}%25%29' style='filter:blur(${20-vals.c2}px)' /%3E%3C/svg%3E`); | |
| preblur.setAttribute("stdDeviation", `${vals.b1/10}`); | |
| postblur.setAttribute("stdDeviation", `${vals.b2/10}`); | |
| dispR.setAttribute("scale", `${-150+vals.c4/10}`); | |
| dispG.setAttribute("scale", `${-150}`); | |
| dispB.setAttribute("scale", `${-150-vals.c4/10}`); | |
| } | |
| document.querySelectorAll("#controls input").forEach(e => e.oninput = updateSettings); | |
| </script> | |
This file contains hidden or 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
| <div style="position:absolute;top:-999px;left:-999px"> | |
| <svg | |
| width="200" | |
| height="200" | |
| viewBox="0 0 220 220" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <filter id="displacementFilter4"> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%230001' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing9" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23FFF1' style='filter:blur(15px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing0" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23000' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing1" /> | |
| <feImage xlink:href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%2300F'/%3E%3C/linearGradient%3E%3ClinearGradient id='gradient2' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%230F0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='200' height='200' rx='25' fill='%237F7F7F' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%23000' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='url(%23gradient1)' style='mix-blend-mode: screen' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='url(%23gradient2)' style='mix-blend-mode: screen' /%3E%3Crect x='50' y='50' width='100' height='100' rx='25' fill='%237F7F7FBB' style='filter:blur(5px)' /%3E%3C/svg%3E" x="0%" y="0%" width="100%" height="100%" result="thing2" /> | |
| <feDisplacementMap | |
| in2="thing2" | |
| in="SourceGraphic" | |
| scale="-148" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="1 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 1 0" result="disp1" /> | |
| <feDisplacementMap | |
| in2="thing2" | |
| in="SourceGraphic" | |
| scale="-150" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="0 0 0 0 0 | |
| 0 1 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 0 1 0" result="disp2" /> | |
| <feDisplacementMap | |
| in2="thing2" | |
| in="SourceGraphic" | |
| scale="-152" | |
| xChannelSelector="B" | |
| yChannelSelector="G" | |
| /> | |
| <feColorMatrix | |
| type="matrix" | |
| values="0 0 0 0 0 | |
| 0 0 0 0 0 | |
| 0 0 1 0 0 | |
| 0 0 0 1 0" result="disp3" /> | |
| <feBlend in2="disp2" mode="screen"/> | |
| <feBlend in2="disp1" mode="screen"/> | |
| <feGaussianBlur stdDeviation="0.7" /> | |
| <feBlend in2="thing0" mode="screen"/> | |
| <feBlend in2="thing9" mode="multiply"/> | |
| <feComposite in2="thing1" operator="in"/> | |
| <feOffset dx="43" dy="43"/> | |
| </filter> | |
| </svg> | |
| </div> | |
| <div style="position:absolute;z-index:999999999;top:-150px;left:-150px;resize:both;min-width:200px;min-height:200px;overflow: auto;display: flex;align-items: flex-end;justify-content: flex-end;"><div style="width:200px;height:200px;backdrop-filter:url(#displacementFilter4)/* brightness(0.95)*/;pointer-events: none;"></div></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment