diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index ea580f56..f4b1e76c 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -143,14 +143,14 @@ function animations(props) {
 
         // Block Base
         case 'Block': return <Block />;
+        case 'Clutch': return false;
         case 'Electrify': return <Electrify />;
         case 'Electrocute': return <Electrocute />;
         case 'ElectrocuteTick': return false;
         case 'Parry': return <Parry team={player} />;
+        case 'Purify': return <Purify team={player} />;
         case 'Recharge': return <Recharge team={player} />;
         case 'Reflect': return <Reflect team={player} />;
-        case 'Purify': return <Purify team={player} />;
-        case 'Clutch': return false;
 
         default: return false;
         }
diff --git a/client/src/components/anims/purify.jsx b/client/src/components/anims/purify.jsx
index 33424399..578224b1 100644
--- a/client/src/components/anims/purify.jsx
+++ b/client/src/components/anims/purify.jsx
@@ -2,39 +2,72 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
-const { TIMES } = require('../../constants');
+const { TIMES, COLOURS } = require('../../constants');
+
+function projectile(x, y, radius, colour) {
+    return (
+        <circle
+            cx={x}
+            cy={y}
+            r={radius}
+            fill={colour}
+            stroke="none"
+            id="charges"
+            opacity="0"
+        />
+    );
+}
 
 class Purify extends Component {
     constructor() {
         super();
         this.animations = [];
+        const points = [
+            [128, 168],
+            [80, 240],
+            [176, 240],
+            [212, 216],
+            [128, 96],
+            [44, 216],
+            [80, 240],
+            [248, 192],
+            [128, 24],
+            [8, 192],
+        ];
+        this.charges = points.map(coord => projectile(coord[0], coord[1], 12, COLOURS.GREEN));
     }
 
     render({ team }) {
         return (
             <svg
-                class='skill-animation red'
+                class='skill-animation green'
                 version="1.1"
                 id="purify"
                 xmlns="http://www.w3.org/2000/svg"
                 style={{ transform: team ? 'rotate3d(1, 0, 0, 180deg)' : '' }}
                 viewBox="0 0 256 256">
                 <filter id='purifyFilter'>
-                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                    <feGaussianBlur stdDeviation="3"/>
+                    <feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="cutoff"/>
+                    <feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
                 </filter>
-                <polyline
-                    points='128,168 80,240 176,240 128,168'
-                    style={{ filter: 'url("#purifyFilter")' }}
-                />
-                <polyline
-                    points='176,240 212,216 128,96 44,216 80,240'
-                    style={{ filter: 'url("#purifyFilter")' }}
-                />
-                <polyline
-                    points='212,216 248,192 128,24 8,192 44,216'
-                    style={{ filter: 'url("#purifyFilter")' }}
-                />
+                <g id="block">
+                    <polyline
+                        points='128,168 80,240 176,240 128,168'
+                        style={{ filter: 'url("#purifyFilter")' }}
+                    />
+                    <polyline
+                        points='176,240 212,216 128,96 44,216 80,240'
+                        style={{ filter: 'url("#purifyFilter")' }}
+                    />
+                    <polyline
+                        points='212,216 248,192 128,24 8,192 44,216'
+                        style={{ filter: 'url("#purifyFilter")' }}
+                    />
+                </g>
+                <g filter="url(#purifyFilter)">
+                    {this.charges}
+                </g>
             </svg>
         );
     }
@@ -44,19 +77,27 @@ class Purify extends Component {
             targets: ['#purify'],
             opacity: [
                 { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.3 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
         }));
 
+        this.animations.push(anime({
+            targets: ['#block'],
+            opacity: [
+                { value: 0, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS },
+            ],
+            easing: 'easeInOutSine',
+        }));
 
         this.animations.push(anime({
-            targets: ['#purifyFilter feTurbulence', ' #purifyFilter feDisplacementMap'],
-            baseFrequency: 2,
-            scale: 10,
-            numOctaves: 5,
-            easing: 'easeOutSine',
-
+            targets: ['#charges'],
+            opacity: [
+                { value: 1, duration: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
+            easing: 'easeInOutSine',
+            cx: 128,
+            cy: 24,
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
         }));