amp and hex

client/package.json

@@ -14,6 +14,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
+    "anime": "^0.1.2",
     "animejs": "^3.0.1",
     "async": "^2.6.2",
     "borc": "^2.0.3",

client/src/components/svgs/amplify.jsx

@@ -1,30 +1,22 @@
 const preact = require('preact');
 const { Component } = require('preact');
 
-class TrippyTriangle extends Component {
+const anime = require('animejs').default;
+
+class Amplify extends Component {
     constructor() {
         super();
-        this.state = { delta: 0 };
+        this.id = Math.random();
-        this.progress = this.progress.bind(this);
     }
 
     render() {
-        const { delta } = this.state;
+        const path = 'M0,100 C100,-100 100,300 200,100';
-
-        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"
+                id="hex"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 200 200">
                 <path d={path} />
@@ -32,20 +24,21 @@ class TrippyTriangle extends Component {
         );
     }
 
-    progress() {
-        const delta = this.state.delta + 0.1;
-        this.setState({ delta });
-        if (delta > 20) return false;
-        requestAnimationFrame(this.progress);
-    }
-
     componentDidMount() {
-        requestAnimationFrame(this.progress);
+        const altPath = 'M0,100 C100,300 100,-100 200,100';
+        anime({
+            targets: '#hex path',
+            d: [{ value: altPath }],
+            stroke: ['#a52a2a', '#3498db'],
+            duration: 1000,
+            loop: true,
+            direction: 'alternate',
+            easing: 'easeInOutSine',
+        });
     }
 
     componentWillUnmount() {
-        // clearAnimation(this.props.id);
     }
 }
 
-module.exports = TrippyTriangle;
+module.exports = Amplify;

client/src/components/svgs/hex.jsx

@@ -1,61 +1,48 @@
 const preact = require('preact');
 const { Component } = require('preact');
 
-class TrippyTriangle extends Component {
+const anime = require('animejs').default;
-    constructor() {
-        super();
-        this.state = { delta: 0 };
-        this.progress = this.progress.bind(this);
-    }
 
+// shamelessly lifted from teh anime docs
+// https://animejs.com/documentation/#svgAttr
+
+class Hex extends Component {
     render() {
-        const { delta } = this.state;
-
-        const curvePoint = 200 * Math.sin(delta);
-
-        const curve = min => min * 2 + (min / 2) * Math.sin(delta);
-
         return (
             <svg
-                class='skill-animation blue'
+                class='hex-anim skill-animation blue'
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 256 256">
+                viewBox="0 0 128 128">
                 <filter id="displacementFilter">
-                <feTurbulence type="turbulence" baseFrequency={0.5 * Math.abs(Math.sin(delta))} numOctaves="2" result="turbulence"
+                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
-                    style={ {
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="0" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                        transform: `scale(${100 * Math.abs(Math.sin(delta))})`,
-                    }}
-                ></feTurbulence>
-                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale={curve(16)} xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
-                    <polygon
+              <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>
-                        points={`64 128 8.574 96 8 32 64 0 119 32 119 96`}
-                        style={ {
-                                filter: 'url("#displacementFilter")',
-                                transform: 'scale(1.7)',
-                            }
-                        }
-                        fill="currentColor">
-                    </polygon>
             </svg>
         );
     }
 
-    progress() {
-        const delta = this.state.delta + 0.1;
-        this.setState({ delta });
-        requestAnimationFrame(this.progress);
-    }
-
     componentDidMount() {
-        requestAnimationFrame(this.progress);
+        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',
+            loop: true,
+            direction: 'alternate',
+            easing: 'easeInOutExpo',
+        });
 
-    componentWillUnmount() {
+        anime({
-        // clearAnimation(this.props.id);
+            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',
+            baseFrequency: 0.05,
+            scale: 15,
+            loop: true,
+            direction: 'alternate',
+            easing: 'easeInOutExpo',
+        });
     }
 }
 
-module.exports = TrippyTriangle;
+module.exports = Hex;