From a35ea182e5a442b189cfe1852cf0a3a8c140b912 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 2 Jul 2019 23:57:21 +1000
Subject: [PATCH] double hybrid

---
 client/src/components/anims/hybrid.jsx | 54 +++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/client/src/components/anims/hybrid.jsx b/client/src/components/anims/hybrid.jsx
index 6fc77d39..2787b6a3 100644
--- a/client/src/components/anims/hybrid.jsx
+++ b/client/src/components/anims/hybrid.jsx
@@ -30,7 +30,7 @@ class Hybrid extends Component {
                 </defs>
                 <g filter="url(#hybridFilter)">
                     <circle
-                        class="green"
+                        class="green-one"
                         cx='50'
                         cy='150'
                         r='10'
@@ -38,7 +38,15 @@ class Hybrid extends Component {
                         stroke="none"
                     />
                     <circle
-                        class="bluewhite"
+                        class="green-two"
+                        cx='250'
+                        cy='150'
+                        r='10'
+                        fill={COLOURS.GREEN}
+                        stroke="none"
+                    />
+                    <circle
+                        class="bluewhite-one"
                         cx='150'
                         cy='50'
                         r='10'
@@ -46,13 +54,30 @@ class Hybrid extends Component {
                         stroke="none"
                     />
                     <circle
-                        class="bluewhite"
+                        class="bluewhite-one"
                         cx='150'
                         cy='50'
                         r='7'
                         fill={COLOURS.WHITE}
                         stroke="none"
                     />
+                    <circle
+                        class="bluewhite-two"
+                        cx='150'
+                        cy='250'
+                        r='10'
+                        fill={COLOURS.BLUE}
+                        stroke="none"
+                    />
+                    <circle
+                        class="bluewhite-two"
+                        cx='150'
+                        cy='250'
+                        r='7'
+                        fill={COLOURS.WHITE}
+                        stroke="none"
+                    />
+
                 </g>
             </svg>
         );
@@ -75,7 +100,7 @@ class Hybrid extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#hybrid circle.green'],
+            targets: ['#hybrid circle.green-one'],
             cx: [50, 250, 50, 250],
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
@@ -84,7 +109,16 @@ class Hybrid extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#hybrid circle.bluewhite'],
+            targets: ['#hybrid circle.green-two'],
+            cy: [250, 50, 250, 50],
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+            easing: 'easeInOutSine',
+            loop: true,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#hybrid circle.bluewhite-one'],
             cy: [50, 250, 50, 250],
             delay: TIMES.TARGET_DELAY_MS,
             duration: TIMES.TARGET_DURATION_MS,
@@ -92,6 +126,16 @@ class Hybrid extends Component {
             loop: true,
         }));
 
+        this.animations.push(anime({
+            targets: ['#hybrid circle.bluewhite-two'],
+            cx: [250, 50, 250, 50],
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+            easing: 'easeInOutSine',
+            loop: true,
+        }));
+
+
     }
 }