ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/animations-test' into animations-test

Browse Source
This commit is contained in:
Mashy 2019-06-12 18:56:21 +10:00
commit ee40f82f24
2 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/svgs/amplify.jsx
View File

@ -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 (
<svg
class='skill-animation blue'
version="1.1"
id="hex"
id="amplify"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200">
<path d={path} />
<filter id="ampFilter">
<feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<path filter='url("#ampFilter")' d={path} />
</svg>
);
}
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() {

18
client/src/components/svgs/hex.jsx
View File

@ -15,16 +15,27 @@ class Hex extends Component {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<filter id="displacementFilter">
<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 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>
<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',
@ -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,