ares/lib/ares_web/components/squiggly_effect.ex at 7f64bd7444e4aeb3572ae02ee2d1ea4d068add3c · cesium/ares · 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
defmodule AresWeb.Components.SquigglyEffect do
  @moduledoc """
  SVG filter component used to apply animated squiggly distortion effects.
  """
  use Phoenix.Component

  attr :id, :string, default: "squiggly-filters"
  attr :class, :string, default: "absolute"

  def squiggly_effect(assigns) do
    ~H"""
    <svg width="0" height="0" id={@id} class={@class}>
      <defs>
        <filter id="melt-flow-slow">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.008 0.012"
            numOctaves="5"
            result="turbulence"
          >
            <animate
              attributeName="seed"
              from="1"
              to="6000"
              dur="4220s"
              repeatCount="indefinite"
            />
          </feTurbulence>

          <feDisplacementMap
            in="SourceGraphic"
            in2="turbulence"
            scale="18"
            xChannelSelector="R"
            yChannelSelector="G"
          />

          <feGaussianBlur stdDeviation="0.4" />
        </filter>
        <filter id="melt-flow-medium">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.008 0.012"
            numOctaves="5"
            result="turbulence"
          >
            <animate
              attributeName="seed"
              from="1"
              to="6000"
              dur="1220s"
              repeatCount="indefinite"
            />
          </feTurbulence>

          <feDisplacementMap
            in="SourceGraphic"
            in2="turbulence"
            scale="18"
            xChannelSelector="R"
            yChannelSelector="G"
          />

          <feGaussianBlur stdDeviation="0.4" />
        </filter>
        <filter id="melt-flow-fast">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.008 0.012"
            numOctaves="5"
            result="turbulence"
          >
            <animate
              attributeName="seed"
              from="1"
              to="6000"
              dur="720s"
              repeatCount="indefinite"
            />
          </feTurbulence>

          <feDisplacementMap
            in="SourceGraphic"
            in2="turbulence"
            scale="18"
            xChannelSelector="R"
            yChannelSelector="G"
          />

          <feGaussianBlur stdDeviation="0.4" />
        </filter>
      </defs>
    </svg>
    """
  end
end