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,