hex

client/src/animations.test.js

@@ -2,11 +2,13 @@ const preact = require('preact');
 
 const TrippyTriangle = require('./components/svgs/trippy.triangle');
 const Amplify = require('./components/svgs/amplify');
+const Hex = require('./components/svgs/hex');
 
 const Animations = () => (
     <main>
         <TrippyTriangle />
         <Amplify />
+        <Hex />
     </main>
 );
 

client/src/components/svgs/hex.jsx

@@ -0,0 +1,61 @@
+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 curve = min => min * 2 + (min / 2) * Math.sin(delta);
+
+        return (
+            <svg
+                class='skill-animation blue'
+                version="1.1"
+                id="Layer_1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256">
+              <filter id="displacementFilter">
+                <feTurbulence type="turbulence" baseFrequency={0.5 * Math.abs(Math.sin(delta))} numOctaves="2" result="turbulence"
+                    style={ {
+                        transform: `scale(${100 * Math.abs(Math.sin(delta))})`,
+                    }}
+                ></feTurbulence>
+                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale={curve(16)} xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+              </filter>
+                    <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);
+    }
+
+    componentWillUnmount() {
+        // clearAnimation(this.props.id);
+    }
+}
+
+module.exports = TrippyTriangle;