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

wip

Browse Source
This commit is contained in:
ntr
2019-06-11 13:56:24 +10:00
parent 440376e5c3
commit f8c1019411
7 changed files with 97 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/animations.test.js
+12
View File
@@ -0,0 +1,12 @@
const preact = require('preact');
const TrippyTriangle = require('./components/svgs/trippy.triangle');
const Animations = () => (
<main>
<TrippyTriangle />
</main>
);
// eslint-disable-next-line
preact.render(<Animations />, document.body);
client/src/components/svgs/trippy.triangle.jsx
+38 -27
View File
@@ -1,36 +1,47 @@
const preact = require('preact');
const { Component } = require('preact');
class TrippyTriangle extends Component {
constructor() {
super();
this.state = { pct: 0, delta: 0 };
this.progress = this.progress.bind(this);
}
render() {
const { pct, delta } = this.state;
module.exports = function triangle(colours) {
if (colours.length === 1) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" >
<polygon class={colours[0]} points="10,190 100,10 190,190"/>
<polygon class={colours[0]} points="40,160 100,10 190,190"/>
<polygon class={colours[0]} points="70,130 100,10 190,190"/>
<svg
style={ { transform: `rotate3d(0, 1, 0, ${pct * delta / 10}deg)` }}
class='skill-animation'
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200">
<g>
<polygon class='blue' points={`10,190 100,${pct} 190,190`}/>
<polygon class='blue' points={`40,170 100,${pct} 160,170`}/>
<polygon class='blue' points={`70,150 100,${pct} 130,150`}/>
</g>
</svg>
);
}
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
<clipPath id="firstColour">
<rect x="0" y="0" width="100" height="200" />
</clipPath>
<clipPath id="secondColour">
<rect x="100" y="0" width="100" height="200" />
</clipPath>
progress() {
const delta = this.state.delta + 0.1;
const pct = 50 - 50 * Math.sin(delta);
this.setState({ pct, delta });
requestAnimationFrame(this.progress);
}
<polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
componentDidMount() {
requestAnimationFrame(this.progress);
}
<polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon clip-path="url(#secondColour)" class={colours[1]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
</svg>
);
};
componentWillUnmount() {
// clearAnimation(this.props.id);
}
}
module.exports = TrippyTriangle;