amplify

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>
 );
 

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;