remove stroke from chaos

client/src/animations.test.jsx

@@ -69,13 +69,31 @@ document.fonts.load('16pt "Jura"').then(() => {
 });
 
 const SKILLS = [
+    'Absorb',
+    'Absorption',
+    'Amplify',
+    'Attack',
+    'Banish',
+    'Bash',
+    'Blast',
+    'Block',
+    'Break',
+    'Buff',
+    'Chaos',
+    'Counter',
+    'CounterAttack',
+    'Curse',
+    'Debuff',
+    'Decay',
+    'DecayTick',
+    'Electrify',
     'Electrocute',
     'ElectrocuteTick',
     'Haste',
     'HasteStrike',
     'Heal',
-    'HybridBlast',
     'Hybrid',
+    'HybridBlast',
     'Intercept',
     'Invert',
     'Link',
@@ -95,22 +113,4 @@ const SKILLS = [
     'Sustain',
     'Triage',
     'TriageTick',
-    'Absorb',
-    'Absorption',
-    'Amplify',
-    'Attack',
-    'Banish',
-    'Bash',
-    'Blast',
-    'Block',
-    'Break',
-    'Buff',
-    'Chaos',
-    'CounterAttack',
-    'Counter',
-    'Curse',
-    'Debuff',
-    'Decay',
-    'DecayTick',
-    'Electrify',
 ];

client/src/components/anims/chaos.jsx

@@ -19,10 +19,7 @@ function projectile(x, y, radius, colour) {
             cx={x}
             cy={y}
             r={radius}
-            fill="url(#grad1)"
+            fill={colour}
-            stroke-width="2"
-            stroke={colour}
-            filter="url(#explosion)"
         />
     );
 }
@@ -31,8 +28,11 @@ class Chaos extends Component {
     constructor() {
         super();
         this.animations = [];
-        const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
+        const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
-        this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#A25AC1'));
+        this.charges = points.map(coord => {
+            const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
+            return projectile(coord[0], coord[1], 7, colour);
+        });
     }
 
     render() {
@@ -43,19 +43,6 @@ class Chaos extends Component {
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
-                // {this.charges}
-                <defs>
-                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
-                        <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
-                        <stop offset="100%" style={'stop-color:#A25AC1;stop-opacity:1'} />
-                    </radialGradient>
-                </defs>
-                <filter id="explosion">
-                    <feGaussianBlur stdDeviation="4"/>
-                    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
-
-                </filter>
                 {this.charges}
             </svg>
         );
@@ -63,20 +50,14 @@ class Chaos extends Component {
 
     componentDidMount() {
         const projectiles = document.querySelectorAll('.skill-anim circle');
-        projectiles.forEach(proj => {
-            const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
-            anime.set(proj, {
-                stroke: colour,
-            });
-        });
         anime.set('.skill-anim', {
             translateY: -(window.screen.height) * 0.35 * this.props.direction.y,
             translateX: -(window.screen.width) * 0.15 * this.props.direction.x,
             opacity: 0,
         });
-        anime.set('#explosion feDisplacementMap', {
+        // anime.set('#explosion feDisplacementMap', {
-            scale: 1,
+        //     scale: 1,
-        });
+        // });
 
         this.animations.push(anime({
             targets: '.skill-anim',
@@ -96,19 +77,19 @@ class Chaos extends Component {
             duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
             easing: 'easeInQuad',
         }));
-        this.animations.push(anime({
+        // this.animations.push(anime({
-            targets: '#explosion feDisplacementMap',
+        //     targets: '#explosion feDisplacementMap',
-            scale: 75,
+        //     scale: 75,
-            loop: false,
+        //     loop: false,
-            delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 2 / 3),
+        //     delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 2 / 3),
-            duration: (TIMES.TARGET_DURATION_MS * 1 / 3),
+        //     duration: (TIMES.TARGET_DURATION_MS * 1 / 3),
-            easing: 'easeInQuad',
+        //     easing: 'easeInQuad',
-        }));
+        // }));
 
         projectiles.forEach(proj => anime({
             targets: proj,
-            cx: Math.random() * 250 + 25,
+            cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
-            cy: Math.random() * 300 + 50,
+            cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
             delay: TIMES.TARGET_DELAY_MS,
             duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
             easing: 'easeInQuad',