small-websites/offseteffekttest.html at master · Morplson/small-websites · 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115


<!--  Aesthetiv void  -->


    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none">
        <defs>

            <filter id="filter" color-interpolation-filters="sRGB" x="-40%" y="-40%" width="180%" height="180%" filterUnits="objectBoundingBox">


                <feGaussianBlur stdDeviation="10 0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" edgeMode="wrap" result="rt1"/>

                <feColorMatrix type="matrix" values="
                1 0 0 0 0
                0 0 0 0 0
                0 0 0 0 0
                0 0 0 1 0" in="rt1" result="red"/>

                <feColorMatrix type="matrix" values="
                0 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0" in="SourceGraphic" result="blue"/>

                <feBlend mode="screen" in="red" in2="blue" result="3d"/>

            </filter>
        </defs>
    </svg>


<!--  3dwaaves Filter (hover filter)  -->


    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none">
        <defs>

            <filter id="filter" color-interpolation-filters="sRGB" x="-40%" y="-40%" width="180%" height="180%" filterUnits="objectBoundingBox">

                <feTurbulence name="turbulence" type="fractalNoise" in="SourceGraphic" baseFrequency="0 0" numOctaves="1" seed="01" stitchTiles="stitch" result="turbulence"/>

                <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20"xChannelSelector="A" yChannelSelector="A" result="waves"/>


                <feOffset name="red" dx="0" dy="0" in="waves" result="rt1"/>

                <feColorMatrix type="matrix" values="
                1 0 0 0 0
                0 0 0 0 0
                0 0 0 0 0
                0 0 0 1 0" in="rt1" result="red"/>


                <feOffset name="blue" dx="-0" dy="-0" in="waves" result="bt1"/>

                <feColorMatrix type="matrix" values="
                0 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0" in="bt1" result="blue"/>

                <feBlend mode="screen" in="red" in2="blue" result="3d"/>

            </filter>
        </defs>
    </svg>


<!-- OLD 3d-filter (image filter)  -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none">
  <defs>
    <filter id="filter" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

        <feTurbulence name="turbulence" type="turbulence" in="SourceGraphic" baseFrequency="0 0.05" numOctaves="2" seed="01" stitchTiles="stitch" result="turbulence"/>

        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="A" yChannelSelector="A" result="waves"/>

        <feColorMatrix type="matrix" values="
        1 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 1 0" in="waves" result="rt1"/>

        <feOffset name="red" dx="20" dy="15" in="rt1" result="red"/>

        <feColorMatrix type="matrix" values="
        0 0 0 0 0
        0 0 0 0 0
        0 0 1 0 0
        0 0 0 1 0" in="waves" result="bt1"/>

        <feOffset name="blue" dx="-20" dy="-12" in="bt1" result="blue"/>

        <feBlend mode="lighten" in="red" in2="blue" result="3d"/>

        <feBlend mode="luminosity" in="waves" in2="3d" result="out1"/>

    </filter>
  </defs>
</svg>