break

client/src/components/anims/break.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');
 
 // logarithmic spiral lifted from
 // https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
@@ -18,7 +18,7 @@ class Break extends Component {
 
         return (
             <svg
-                class='skill-animation red'
+                class='skill-animation green'
                 version="1.1"
                 id="break"
                 xmlns="http://www.w3.org/2000/svg"
@@ -43,6 +43,11 @@ class Break extends Component {
                         style="opacity: 0.5"
                     />
                 </g>
+                <g filter="url(#breakFilter)" stroke={COLOURS.RED}>
+                    <circle cx="0" cy="0" r="30" />
+                    <circle cx="0" cy="0" r="60" />
+                    <circle cx="0" cy="0" r="90" />
+                </g>
             </svg>
         );
     }
@@ -66,6 +71,15 @@ class Break extends Component {
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
+        this.animations.push(anime({
+            targets: ['#break circle'],
+            easing: 'easeInSine',
+            strokeWidth: [10, 2],
+            r: 300,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
         this.animations.push(anime({
             targets: ['#breakFilter feTurbulence', '#breakFilter feDisplacementMap'],
             baseFrequency: 2,