From c504cb8671c70a612148a6158c0b5e5e17cce769 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 11 Jun 2019 20:04:49 +1000
Subject: [PATCH 1/3] subtle amp filter

---
 client/src/components/svgs/amplify.jsx | 16 +++++++++++++++-
 client/src/components/svgs/hex.jsx     | 10 ++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx
index 9a1df5e0..307666bd 100644
--- a/client/src/components/svgs/amplify.jsx
+++ b/client/src/components/svgs/amplify.jsx
@@ -19,7 +19,11 @@ class Amplify extends Component {
                 id="hex"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 200 200">
-                <path d={path} />
+                <filter id="ampFilter">
+                    <feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <path filter='url("#ampFilter")' d={path} />
             </svg>
         );
     }
@@ -35,6 +39,16 @@ class Amplify extends Component {
             direction: 'alternate',
             easing: 'easeInOutSine',
         });
+
+        anime({
+            targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
+            baseFrequency: 0.15,
+            scale: 4,
+            loop: true,
+            direction: 'alternate',
+            easing: 'easeInOutExpo',
+        });
+
     }
 
     componentWillUnmount() {
diff --git a/client/src/components/svgs/hex.jsx b/client/src/components/svgs/hex.jsx
index ec1c0ae0..62fe923f 100644
--- a/client/src/components/svgs/hex.jsx
+++ b/client/src/components/svgs/hex.jsx
@@ -15,11 +15,14 @@ class Hex extends Component {
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 128 128">
-                <filter id="displacementFilter">
+                <filter id="hexFilter">
                     <feTurbulence type="turbulence" baseFrequency="0" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
-              <polygon points="64 127.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 0.0035494461378826614 119.37730869788052 32.03166105954991 119.426 96.00354944613788 " style="filter: url(&quot;#displacementFilter&quot;); transform: scale(1);" fill="currentColor"></polygon>
+                <polygon
+                    points="64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788 " style="filter: url(&quot;#hexFilter&quot;); transform: scale(1);"
+                    fill="currentColor"
+                ></polygon>
             </svg>
         );
     }
@@ -34,8 +37,7 @@ class Hex extends Component {
         });
 
         anime({
-            targets: ['feTurbulence', 'feDisplacementMap'],
-            points: '64 69.88600002141976 8.574 99.91603773440568 62.29420564057706 66.93105659089863 64 3.916037734405676 65.70579435942294 66.93105659089863 119.426 99.91603773440568',
+            targets: ['#hexFilter feTurbulence', '#hexFilter feDisplacementMap'],
             baseFrequency: 0.05,
             scale: 15,
             loop: true,

From 76ff7ba43ff2386e9cc3a18cc1be529eb12f1db5 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 11 Jun 2019 21:26:53 +1000
Subject: [PATCH 2/3] scale

---
 client/src/components/svgs/amplify.jsx | 4 ++--
 client/src/components/svgs/hex.jsx     | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx
index 307666bd..eb113ae8 100644
--- a/client/src/components/svgs/amplify.jsx
+++ b/client/src/components/svgs/amplify.jsx
@@ -16,7 +16,7 @@ class Amplify extends Component {
             <svg
                 class='skill-animation blue'
                 version="1.1"
-                id="hex"
+                id="amplify"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 200 200">
                 <filter id="ampFilter">
@@ -31,7 +31,7 @@ class Amplify extends Component {
     componentDidMount() {
         const altPath = 'M0,100 C100,300 100,-100 200,100';
         anime({
-            targets: '#hex path',
+            targets: '#amplify path',
             d: [{ value: altPath }],
             stroke: ['#a52a2a', '#3498db'],
             duration: 1000,
diff --git a/client/src/components/svgs/hex.jsx b/client/src/components/svgs/hex.jsx
index 62fe923f..f914595a 100644
--- a/client/src/components/svgs/hex.jsx
+++ b/client/src/components/svgs/hex.jsx
@@ -28,6 +28,14 @@ class Hex extends Component {
     }
 
     componentDidMount() {
+        anime({
+            targets: ['.hex-anim'],
+            scale: [1, 2],
+            loop: true,
+            direction: 'alternate',
+            easing: 'easeInOutExpo',
+        });
+
         anime({
             targets: ['.hex-anim polygon'],
             points: '64 69.88600002141976 8.574 99.91603773440568 62.29420564057706 66.93105659089863 64 3.916037734405676 65.70579435942294 66.93105659089863 119.426 99.91603773440568',

From 3c4eac85f99b24018db6cafccffcc24d01f49ca8 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 11 Jun 2019 21:32:18 +1000
Subject: [PATCH 3/3] big amp

---
 client/src/components/svgs/amplify.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx
index eb113ae8..16f5f66b 100644
--- a/client/src/components/svgs/amplify.jsx
+++ b/client/src/components/svgs/amplify.jsx
@@ -10,7 +10,7 @@ class Amplify extends Component {
     }
 
     render() {
-        const path = 'M0,100 C100,-100 100,300 200,100';
+        const path = 'M0,100 C100,-200 100,400 200,100';
 
         return (
             <svg
@@ -29,7 +29,7 @@ class Amplify extends Component {
     }
 
     componentDidMount() {
-        const altPath = 'M0,100 C100,300 100,-100 200,100';
+        const altPath = 'M0,100 C100,400 100,-200 200,100';
         anime({
             targets: '#amplify path',
             d: [{ value: altPath }],