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

subtle amp filter

Browse Source
This commit is contained in:
ntr 2019-06-11 20:04:49 +10:00
parent a037d5e93b
commit c504cb8671
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,11 @@ class Amplify extends Component {
id="hex"
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>
);
}
@ -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() {

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

@ -15,11 +15,14 @@ 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>
);
}
@ -34,8 +37,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,