emomtimer/index.html at main · jac18281828/emomtimer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html lang="en">
    <head>
        <link data-trunk rel="css" href="style.css">
    </head>
    <body>
        <!-- SVG filter for liquid distortion effect -->
        <svg width="0" height="0" style="position: absolute;">
            <defs>
                <filter id="liquid-distortion">
                    <!-- Turbulence creates the organic liquid noise -->
                    <feTurbulence
                        type="fractalNoise"
                        baseFrequency="0.01 0.02"
                        numOctaves="3"
                        result="turbulence"
                        seed="2">
                        <animate
                            attributeName="baseFrequency"
                            dur="20s"
                            values="0.01 0.02;0.02 0.01;0.01 0.02"
                            repeatCount="indefinite"/>
                    </feTurbulence>

                    <!-- Displacement map creates the liquid distortion -->
                    <feDisplacementMap
                        in="SourceGraphic"
                        in2="turbulence"
                        scale="5"
                        xChannelSelector="R"
                        yChannelSelector="G"
                        result="displacement"/>

                    <!-- Subtle blur to smooth the effect -->
                    <feGaussianBlur in="displacement" stdDeviation="0.5" result="blur"/>

                    <!-- Blend original with distorted for subtle effect -->
                    <feBlend in="SourceGraphic" in2="blur" mode="normal"/>
                </filter>
            </defs>
        </svg>
    </body>
</html>