hex and decay

client/src/components/anims/decay.jsx

@@ -2,7 +2,7 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
-const { TIMES } = require('../../constants');
+const { TIMES, COLOURS } = require('../../constants');
 
 class Decay extends Component {
     constructor() {
@@ -18,16 +18,7 @@ class Decay extends Component {
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
-                <defs>
+                <g>
-                    <filter id="decayFilter">
-                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
-                        <feMerge>
-                            <feMergeNode />
-                            <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                    </filter>
-                </defs>
-                <g filter="url(#decayFilter)" >
                     <rect x="135" y="135" width="30" height="30" />
                     <rect x="135" y="135" width="30" height="30" />
                     <rect x="135" y="135" width="30" height="30" />
@@ -61,7 +52,10 @@ class Decay extends Component {
             targets: ['#decay rect'],
             x: () => anime.random(50, 250),
             y: () => anime.random(50, 250),
+            stroke: [COLOURS.WHITE, COLOURS.BLUE],
+            strokeWidth: [4, 2],
             transform: `rotate(${anime.random(-15, 15)})`,
+            filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
             easing: 'easeOutSine',
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.START_SKILL,

client/src/components/anims/hex.jsx

@@ -32,9 +32,14 @@ class Hex extends Component {
                     </filter>
                 </defs>
                 <polygon
+                    class='blue'
                     points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
                     filter="url(#hexFilter)">
                 </polygon>
+                <polygon
+                    class='white'
+                    points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100">
+                </polygon>
             </svg>
         );
     }
@@ -56,6 +61,17 @@ class Hex extends Component {
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));
+
+        this.animations.push(anime({
+            targets: ['#hex polygon.white'],
+            strokeWidth: [2, 1],
+            easing: 'easeInOutSine',
+            direction: 'alternate',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
         // this.animations.push(anime({
         //     targets: ['feTurbulence', 'feDisplacementMap'],
         //     baseFrequency: 0,

client/src/constants.jsx

@@ -17,6 +17,7 @@ module.exports = {
         GREEN: '#1FF01F',
         RED: '#a52a2a',
         BLUE: '#3498db',
+        WHITE: '#f5f5f5', // whitesmoke
     },
 
     INFO: {