more dynamic noise

client/assets/styles/styles.less

@@ -151,6 +151,7 @@ button, input {
     &:hover {
         color: whitesmoke;
         border-color: @gray-hover;
+        // filter: url("#noiseFilter");
     }
 
     &:focus {

client/src/components/mnml.jsx

@@ -5,6 +5,7 @@ const Main = require('./main');
 // const Nav = require('./nav');
 const Controls = require('./controls');
 const FrontPage = require('./front.page');
+const NoiseLogo = require('./noise.logo');
 
 const addState = connect(
     ({ game, instance, authenticated }) => ({ game, instance, authenticated })

client/src/components/noise.logo.jsx

@@ -17,8 +17,8 @@ class Logo extends Component {
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 400 400">
                     <filter id='noiseFilter'>
-                        <feTurbulence type="turbulence" baseFrequency="0.5" numOctaves="1" result="turbulence"></feTurbulence>
-                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                        <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"></feTurbulence>
+                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                     </filter>
                 </svg>
             </div>
@@ -28,11 +28,30 @@ class Logo extends Component {
     componentDidMount() {
         this.animations.push(anime({
             targets: ['#noiseFilter feTurbulence', '#noiseFilter feDisplacementMap'],
-            baseFrequency: 1,
             easing: 'linear',
-            duration: () => anime.random(2000, 5000),
             loop: true,
-            direction: 'alternate',
+            keyframes: [
+                {
+                    baseFrequency: 0.5,
+                    duration: () => anime.random(1000, 2000),
+                },
+            ],
+        }));
+
+        this.animations.push(anime({
+            targets: ['#noiseFilter feDisplacementMap'],
+            easing: 'linear',
+            loop: true,
+            keyframes: [
+                {
+                    scale: 2,
+                    duration: () => anime.random(2000, 5000),
+                },
+                {
+                    scale: 4,
+                    duration: 200,
+                },
+            ],
         }));
     }