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

tripping with triangles

Browse Source
This commit is contained in:
Mashy
2019-06-11 17:52:33 +10:00
parent f8c1019411
commit 09868b42d5
3 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/svgs/trippy.triangle.jsx
+16 -6
View File
@@ -13,14 +13,16 @@ class TrippyTriangle extends Component {
return (
<svg
style={ { transform: `rotate3d(0, 1, 0, ${pct * delta / 10}deg)` }}
style={{
transform: `rotate3d(0, 1, 0, ${delta * 0.2}rad) translate(0px, ${-7.5 * delta}px)`,
}}
class='skill-animation'
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200">
viewBox="0 0 300 300">
<g>
<polygon class='blue' points={`10,190 100,${pct} 190,190`}/>
<polygon class='blue' points={`0,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>
@@ -29,13 +31,21 @@ class TrippyTriangle extends Component {
}
progress() {
const delta = this.state.delta + 0.1;
const pct = 50 - 50 * Math.sin(delta);
this.setState({ pct, delta });
requestAnimationFrame(this.progress);
this.now = window.performance.now();
const elapsed = this.now - this.then;
if (elapsed > this.fpsInterval) {
this.then = this.now - (elapsed % this.fpsInterval);
const delta = this.state.delta + Math.PI * 0.04;
const pct = 75 + 15 * Math.sin(delta);
this.setState({ pct, delta });
}
}
componentDidMount() {
const fps = 30;
this.fpsInterval = 1000 / fps;
this.then = window.performance.now();
requestAnimationFrame(this.progress);
}