diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx
index 571af765..680a5f27 100644
--- a/client/src/components/anims/decay.jsx
+++ b/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">
-
-
-
-
-
-
-
-
-
-
+
@@ -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,
diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx
index 3e2174d0..42932f3b 100644
--- a/client/src/components/anims/hex.jsx
+++ b/client/src/components/anims/hex.jsx
@@ -32,9 +32,14 @@ class Hex extends Component {
+
+
);
}
@@ -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,
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 87e415ed..6b0b46a7 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -17,6 +17,7 @@ module.exports = {
GREEN: '#1FF01F',
RED: '#a52a2a',
BLUE: '#3498db',
+ WHITE: '#f5f5f5', // whitesmoke
},
INFO: {