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

amp and hex

Browse Source
This commit is contained in:
ntr 2019-06-11 19:50:59 +10:00
parent 962e9352ab
commit a037d5e93b
3 changed files with 47 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@ -14,6 +14,7 @@
"author": "",
"license": "UNLICENSED",
"dependencies": {
"anime": "^0.1.2",
"animejs": "^3.0.1",
"async": "^2.6.2",
"borc": "^2.0.3",

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

@ -1,30 +1,22 @@
const preact = require('preact');
const { Component } = require('preact');
class TrippyTriangle extends Component {
const anime = require('animejs').default;
class Amplify extends Component {
constructor() {
super();
this.state = { delta: 0 };
this.progress = this.progress.bind(this);
this.id = Math.random();
}
render() {
const { delta } = this.state;
const curvePoint = 200 * Math.sin(delta);
const path = `
M0,100
C 100,${100 - curvePoint}
100,${100 + curvePoint}
200,100
`;
const path = 'M0,100 C100,-100 100,300 200,100';
return (
<svg
class='skill-animation blue'
version="1.1"
id="Layer_1"
id="hex"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200">
<path d={path} />
@ -32,20 +24,21 @@ class TrippyTriangle extends Component {
);
}
progress() {
const delta = this.state.delta + 0.1;
this.setState({ delta });
if (delta > 20) return false;
requestAnimationFrame(this.progress);
}
componentDidMount() {
requestAnimationFrame(this.progress);
const altPath = 'M0,100 C100,300 100,-100 200,100';
anime({
targets: '#hex path',
d: [{ value: altPath }],
stroke: ['#a52a2a', '#3498db'],
duration: 1000,
loop: true,
direction: 'alternate',
easing: 'easeInOutSine',
});
}
componentWillUnmount() {
// clearAnimation(this.props.id);
}
}
module.exports = TrippyTriangle;
module.exports = Amplify;

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

@ -1,61 +1,48 @@
const preact = require('preact');
const { Component } = require('preact');
class TrippyTriangle extends Component {
constructor() {
super();
this.state = { delta: 0 };
this.progress = this.progress.bind(this);
}
const anime = require('animejs').default;
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
class Hex extends Component {
render() {
const { delta } = this.state;
const curvePoint = 200 * Math.sin(delta);
const curve = min => min * 2 + (min / 2) * Math.sin(delta);
return (
<svg
class='skill-animation blue'
class='hex-anim skill-animation blue'
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
viewBox="0 0 128 128">
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency={0.5 * Math.abs(Math.sin(delta))} numOctaves="2" result="turbulence"
style={ {
transform: `scale(${100 * Math.abs(Math.sin(delta))})`,
}}
></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale={curve(16)} xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
<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 128 8.574 96 8 32 64 0 119 32 119 96`}
style={ {
filter: 'url("#displacementFilter")',
transform: 'scale(1.7)',
}
}
fill="currentColor">
</polygon>
<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>
</svg>
);
}
progress() {
const delta = this.state.delta + 0.1;
this.setState({ delta });
requestAnimationFrame(this.progress);
}
componentDidMount() {
requestAnimationFrame(this.progress);
}
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',
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo',
});
componentWillUnmount() {
// clearAnimation(this.props.id);
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',
baseFrequency: 0.05,
scale: 15,
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo',
});
}
}
module.exports = TrippyTriangle;
module.exports = Hex;