hex

2019-06-29 15:38:56 +10:00
parent 214214e838
commit b3cae863d1
5 changed files with 70 additions and 60 deletions
@@ -1,58 +0,0 @@
-const preact = require('preact');
-const { Component } = require('preact');
-
-const anime = require('animejs').default;
-
-// shamelessly lifted from teh anime docs
-// https://animejs.com/documentation/#svgAttr
-
-class Hex extends Component {
-    render() {
-        return (
-            <svg
-                class='hex-anim skill-animation blue'
-                version="1.1"
-                id="Layer_1"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 128 128">
-                <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 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>
-        );
-    }
-
-    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',
-            loop: true,
-            direction: 'alternate',
-            easing: 'easeInOutExpo',
-        });
-
-        anime({
-            targets: ['#hexFilter feTurbulence', '#hexFilter feDisplacementMap'],
-            baseFrequency: 0.05,
-            scale: 15,
-            loop: true,
-            direction: 'alternate',
-            easing: 'easeInOutExpo',
-        });
-    }
-}
-
-module.exports = Hex;