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

spirals

Browse Source
This commit is contained in:
ntr 2019-06-30 16:20:09 +10:00
parent 773da33f0e
commit 75c5e6cafb
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/anims/amplify.jsx
View File

@ -20,11 +20,11 @@ class Amplify extends Component {
id="amplify"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200">
<filter id="ampFilter">
<filter id="amplifyFilter">
<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} />
<path filter='url("#amplifyFilter")' d={path} />
</svg>
);
}
@ -50,7 +50,7 @@ class Amplify extends Component {
}));
this.animations.push(anime({
targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
targets: ['#amplifyFilter feTurbulence', '#amplifyFilter feDisplacementMap'],
baseFrequency: 0.15,
scale: 4,
easing: 'easeInOutExpo',

2
client/src/components/anims/block.jsx
View File

@ -52,7 +52,7 @@ class Block extends Component {
targets: ['feTurbulence', 'feDisplacementMap'],
baseFrequency: 0.02,
scale: 1,
easing: 'easeOutSine',
easing: 'easeInOutElastic',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,

24
client/src/components/anims/stun.jsx
View File

@ -20,14 +20,24 @@ class Stun extends Component {
id="stun"
xmlns="http://www.w3.org/2000/svg"
viewBox="-291 -291 582 582">
<filter id="ampFilter">
<feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<filter id="stunFilter">
<feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="8" result="turbulence" style="transform: scale(1);"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g>
<path
<path filter='url("#stunFilter")'
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
/>
<path filter='url("#stunFilter")'
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
transform="scale(0.75)"
style="opacity: 0.75"
/>
<path filter='url("#stunFilter")'
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
transform="scale(0.5)"
style="opacity: 0.5"
/>
</g>
</svg>
);
@ -43,7 +53,7 @@ class Stun extends Component {
this.animations.push(anime({
targets: ['#stun'],
rotate: 360,
rotate: 180,
easing: 'easeInSine',
duration: TIMES.TARGET_DURATION_MS,
@ -51,9 +61,9 @@ class Stun extends Component {
}));
this.animations.push(anime({
targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
baseFrequency: 0.15,
scale: 4,
targets: ['#stunFilter feTurbulence', '#stunFilter feDisplacementMap'],
baseFrequency: 0.4,
scale: 5,
easing: 'easeInOutExpo',
duration: TIMES.TARGET_DURATION_MS,