ARTICLE AD BOX
I have a button in my code that I applied an SVG displacement filter to. I want the backdrop of this button to also distort stuff behind it, as it's meant to look like water. The issue with this is that while the border and background of button changes shape fine, the backdrop filter holds its original shape. I was thinking of trying to use a mask or something.
<!doctype html>
<html>
<head>
<style>
body {
background-image: url('https://hips.hearstapps.com/hmg-prod/images/alpe-di-siusi-sunrise-with-sassolungo-or-langkofel-royalty-free-image-1623254127.jpg');
}
.exampleButton {
width: 200px;
height: 125px;
border-radius: 115px;
margin: -100px auto 0 auto;
/* background distortion thing but I made it a blur in this so that it's easier to see the problem */
backdrop-filter: blur(20px);
background-color: rgba(255, 255, 255, .1);
border: 2px solid rgba(255, 255, 255, 1);
transition: all 0.4s;
filter: url(#myFilter);
}
</style>
</head>
<body>
<svg>
<defs>
<filter id="myFilter" x="-100%" y="-100%" width="300%" height="300%">
<!-- turbulence filter -->
<feTurbulence id="turbulence" result="turbulence" numOctaves="3" baseFrequency="0">
<animate id="ripple" attributeName="baseFrequency" values="0.02; 0" dur="1s" repeatCount="1"
begin="indefinite" />
</feTurbulence>
<!-- displacement map -->
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="0" xChannelSelector="R"
yChannelSelector="G" result="displaced">
<animate id="scale" attributeName="scale" values="0; 20; 0" keyTimes="0; 0.2; 1" dur="1s"
repeatCount="1" begin="ripple.begin" />
</feDisplacementMap>
<!-- offset is because the button moves when the scale is changed so this makes it stay in place -->
<feOffset in="displaced" dx="0" dy="0" result="offsetted">
<animate attributeName="dx" values="0; -7; 0" keyTimes="0; 0.2; 1" dur="1s" repeatCount="1"
begin="ripple.begin" />
<animate attributeName="dy" values="0; -7; 0" keyTimes="0; 0.2; 1" dur="1s" repeatCount="1"
begin="ripple.begin" />
</feOffset>
</filter>
</defs>
</svg>
<div class="exampleButton" onclick="ripples()"></div>
<script>
function ripples() {
const ripple = document.getElementById('ripple')
const scale = document.getElementById('scale')
// add slight randomness
ripple.setAttribute('values', `${0.005 + Math.random() / 100}; 0`)
scale.setAttribute('values', `0; ${17.5 + Math.random() * 3}; 0`)
ripple.beginElement()
}
</script>
</body>
</html>
