diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx
index 9a1df5e0..16f5f66b 100644
--- a/client/src/components/svgs/amplify.jsx
+++ b/client/src/components/svgs/amplify.jsx
@@ -10,24 +10,28 @@ class Amplify extends Component {
}
render() {
- const path = 'M0,100 C100,-100 100,300 200,100';
+ const path = 'M0,100 C100,-200 100,400 200,100';
return (
);
}
componentDidMount() {
- const altPath = 'M0,100 C100,300 100,-100 200,100';
+ const altPath = 'M0,100 C100,400 100,-200 200,100';
anime({
- targets: '#hex path',
+ targets: '#amplify path',
d: [{ value: altPath }],
stroke: ['#a52a2a', '#3498db'],
duration: 1000,
@@ -35,6 +39,16 @@ class Amplify extends Component {
direction: 'alternate',
easing: 'easeInOutSine',
});
+
+ anime({
+ targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
+ baseFrequency: 0.15,
+ scale: 4,
+ loop: true,
+ direction: 'alternate',
+ easing: 'easeInOutExpo',
+ });
+
}
componentWillUnmount() {
diff --git a/client/src/components/svgs/hex.jsx b/client/src/components/svgs/hex.jsx
index ec1c0ae0..f914595a 100644
--- a/client/src/components/svgs/hex.jsx
+++ b/client/src/components/svgs/hex.jsx
@@ -15,16 +15,27 @@ class Hex extends Component {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
-
+
-
+
);
}
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',
@@ -34,8 +45,7 @@ class Hex extends Component {
});
anime({
- 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',
+ targets: ['#hexFilter feTurbulence', '#hexFilter feDisplacementMap'],
baseFrequency: 0.05,
scale: 15,
loop: true,