SVG滤镜自然河流倒影效果实例页面

CSS代码：

.container {
    width: -moz-fit-content;
    width: fit-content;
    clip-path: inset(10px);
    background-color: #0E6CAA;
}
.reflect {
    transform: scaleY(-1);
    filter: url(#displacementFilter);
}

HTML代码：

<svg width="0" height="0" style="posiotion:absolute;left:-999px;">
    <filter id="displacementFilter">
        <feTurbulence type="turbulence" baseFrequency="0.01 .1" numOctaves="1" result="turbulence" seed="53" />
        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="B" />
    </filter>
</svg>
<div class="container">
    <img src="./moon-night.jpg">
    <img src="./moon-night.jpg" class="reflect">
</div>
                

JS代码：

// 流动效果实现，通过改变baseFrequency属性值实现
var img = document.querySelector("#displacementFilter feTurbulence");
var frames = 0;
var rad = Math.PI / 180;

function AnimateBaseFrequency() {
    var bf = "0.01 .1";
    bfx = Number(bf.split(" ")[0]);
    bfy = Number(bf.split(" ")[1]);
    frames += .5
    bfx += 0.001 * Math.cos(frames * rad);
    bfy += 0.005 * Math.sin(frames * rad);

    bf = bfx.toString() + ' ' + bfy.toString();
    img.setAttributeNS(null, 'baseFrequency', bf);

    requestAnimationFrame(AnimateBaseFrequency);
}

window.requestAnimationFrame(AnimateBaseFrequency);