From de3df722edb6e214f700ba57d3b3e707f27b15d8 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 11 Jun 2019 13:57:44 +1000
Subject: [PATCH 1/2] end dleta

---
 client/src/components/svgs/trippy.triangle.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx
index 194cb4a3..d336e6b6 100644
--- a/client/src/components/svgs/trippy.triangle.jsx
+++ b/client/src/components/svgs/trippy.triangle.jsx
@@ -31,7 +31,9 @@ class TrippyTriangle extends Component {
     progress() {
         const delta = this.state.delta + 0.1;
         const pct = 50 - 50 * Math.sin(delta);
+
         this.setState({ pct, delta });
+        if (delta > 20) return false;
         requestAnimationFrame(this.progress);
     }
 

From 173a2c6cf798c9e999070d4782a562a0ca59ccc5 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 11 Jun 2019 14:09:23 +1000
Subject: [PATCH 2/2] amplify

---
 client/src/animations.test.js          |  2 +
 client/src/components/svgs/amplify.jsx | 51 ++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 client/src/components/svgs/amplify.jsx

diff --git a/client/src/animations.test.js b/client/src/animations.test.js
index 92a19996..6ea4ccec 100644
--- a/client/src/animations.test.js
+++ b/client/src/animations.test.js
@@ -1,10 +1,12 @@
 const preact = require('preact');
 
 const TrippyTriangle = require('./components/svgs/trippy.triangle');
+const Amplify = require('./components/svgs/amplify');
 
 const Animations = () => (
     <main>
         <TrippyTriangle />
+        <Amplify />
     </main>
 );
 
diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx
new file mode 100644
index 00000000..5b308ead
--- /dev/null
+++ b/client/src/components/svgs/amplify.jsx
@@ -0,0 +1,51 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+class TrippyTriangle extends Component {
+    constructor() {
+        super();
+        this.state = { delta: 0 };
+        this.progress = this.progress.bind(this);
+    }
+
+    render() {
+        const { delta } = this.state;
+
+        const curvePoint = 200 * Math.sin(delta);
+
+        const path = `
+            M0,100
+            C 100,${100 - curvePoint}
+              100,${100 + curvePoint}
+              200,100
+        `;
+
+        return (
+            <svg
+                class='skill-animation blue'
+                version="1.1"
+                id="Layer_1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 200 200">
+                <path d={path} />
+            </svg>
+        );
+    }
+
+    progress() {
+        const delta = this.state.delta + 0.1;
+        this.setState({ delta });
+        if (delta > 20) return false;
+        requestAnimationFrame(this.progress);
+    }
+
+    componentDidMount() {
+        requestAnimationFrame(this.progress);
+    }
+
+    componentWillUnmount() {
+        // clearAnimation(this.props.id);
+    }
+}
+
+module.exports = TrippyTriangle;