trim slay anim

client/src/components/anims/slay.jsx

@@ -1,34 +1,17 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
+const times = require('lodash/times');
 
 const { TIMES } = require('../../constants');
 
-function projectile(x, y, radius, colour) {
+const GREEN = '#1FF01F';
-    return (
+const RED = '#a52a2a';
-        <circle
-            cx={x}
-            cy={y}
-            stroke="none"
-            r={radius}
-            fill={colour}
-        />
-    );
-}
-
-function sword(colour) {
-    return (
-        <polygon points='150,150 100,75, 150,300, 200,75' stroke="none" fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
-    );
-}
 
 class Slay extends Component {
     constructor() {
         super();
         this.animations = [];
-        this.colour = '#a52a2a';
-        const points = new Array(30).fill(0);
-        this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
     }
 
     render() {
@@ -39,13 +22,16 @@ class Slay extends Component {
                 id="slay"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 300">
-                <filter id="slayFilter">
+                {times(10, () => (
-                    <feGaussianBlur stdDeviation="4"/>
+                    <ellipse
-                    <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
+                        cx={anime.random(100, 200)}
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
+                        cy={anime.random(-50, -25)}
-                </filter>
+                        stroke="none"
-                {sword(this.colour)}
+                        rx={anime.random(3, 7)}
-                {this.charges}
+                        ry={7}
+                        fill={RED}
+                    />
+                ))}
             </svg>
         );
     }
@@ -67,58 +53,31 @@ class Slay extends Component {
             rotate,
         });
 
-        anime.set('#slay', {
+        anime.set('#slay ellipse',{
-            translateY: -1 * (window.innerHeight) * 0.35,
+            fill: RED,
-            translateX: 0,
+        })
-        });
-
-        anime.set('#slayFilter feDisplacementMap', {
-            scale: 0,
-        });
-
-        anime.set('#sword', {
-            fill: this.colour,
-            opacity: 1,
-        });
 
         this.animations.push(anime({
             targets: '#slay',
             opacity: [
                 { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
-            translateY: 0,
-            translateX: 0,
-            loop: false,
             easing: 'easeInQuad',
         }));
 
         this.animations.push(anime({
-            targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
+            targets: ['#slay ellipse'],
-            baseFrequency: 10,
+            cx: 150,
-            scale: 100,
+            cy: 325,
-            delay: TIMES.TARGET_DURATION_MS * 0.6,
+            delay: TIMES.TARGET_DURATION_MS * 0.2,
             duration: TIMES.TARGET_DURATION_MS * 0.3,
-            easing: 'easeInQuad',
+            easing: 'easeOutQuad',
+            direction: 'alternate',
         }));
 
-        this.animations.push(anime({
+        setTimeout(() => anime.set('#slay ellipse',{
-            targets: '#sword',
+            fill: GREEN,
-            opacity: 0,
+        }), TIMES.TARGET_DURATION_MS * 0.5);
-            delay: TIMES.TARGET_DURATION_MS * 0.9,
-        }));
-
-        const projectiles = document.querySelectorAll('#slay circle');
-        projectiles.forEach(proj => {
-            this.animations.push(anime({
-                targets: proj,
-                cx: Math.random() * 250 + 25,
-                cy: Math.random() * 200 - 100,
-                delay: TIMES.TARGET_DURATION_MS * 0.7,
-                duration: TIMES.TARGET_DURATION_MS * 0.3,
-                easing: 'easeInQuad',
-            }));
-        });
     }
 
     componentWillUnmount() {