Skip to content

Commit 5efa262

Browse files
author
Ives van Hoorne
committed
Pride
1 parent 94c6917 commit 5efa262

File tree

5 files changed

+32
-61
lines changed

5 files changed

+32
-61
lines changed

packages/common/components/Logo.js

Lines changed: 7 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import Logo from './Logo.png';
23

34
export default ({
45
width = 35,
@@ -9,53 +10,11 @@ export default ({
910
height: number,
1011
className: ?string,
1112
}) => (
12-
<svg
13-
x="0px"
14-
y="0px"
13+
<img
1514
className={className}
16-
width={`${width}px`}
17-
height={`${height}px`}
18-
viewBox="0 0 1024 1024"
19-
>
20-
<g id="Layer_1">
21-
<polyline
22-
fill="#FFFFFF"
23-
points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851"
24-
/>
25-
<polyline
26-
fill="#FFFFFF"
27-
points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438"
28-
/>
29-
<polyline
30-
fill="#FFFFFF"
31-
points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795"
32-
/>
33-
</g>
34-
<g id="Layer_2">
35-
<polyline
36-
fill="none"
37-
stroke="#FFFFFF"
38-
strokeWidth="80"
39-
strokeMiterlimit="10"
40-
points="899,287.833 509,513 509,963"
41-
/>
42-
<line
43-
fill="none"
44-
stroke="#FFFFFF"
45-
strokeWidth="80"
46-
strokeMiterlimit="10"
47-
x1="122.167"
48-
y1="289"
49-
x2="511.5"
50-
y2="513"
51-
/>
52-
<polygon
53-
fill="none"
54-
stroke="#FFFFFF"
55-
strokeWidth="80"
56-
strokeMiterlimit="10"
57-
points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"
58-
/>
59-
</g>
60-
</svg>
15+
src={Logo}
16+
width={width}
17+
height={height}
18+
alt="Logo"
19+
/>
6120
);
7.47 KB
Loading

packages/homepage/src/screens/home/Animation/Background.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ export default class Background extends React.PureComponent {
4848
return (
4949
<Container
5050
style={{
51-
backgroundColor:
52-
this.colors[template.name] || template.color.clearer(0.97)(),
51+
background: `linear-gradient(rgba(228, 3, 3, 0.05), rgba(255, 140, 0, 0.05), rgba(255, 237, 0, 0.05), rgba(0, 128, 38, 0.05), rgba(0, 77, 255, 0.05), rgba(117, 7, 135, 0.05))`,
5352
}}
5453
>
5554
<canvas

packages/homepage/src/screens/home/Animation/canvas/Dot.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@ export default class Dot extends PositionedElement {
1717
this.color = color;
1818
this.alpha = alpha;
1919
const r = Math.random();
20-
this.minAlpha = 0.1 + r * 0.2;
20+
this.minAlpha = 0.4 + r * 0.2;
2121
this.minSize = 0.5 + r * 2;
2222
}
2323

2424
draw(ctx: CanvasRenderingContext2D) {
2525
ctx.beginPath();
2626
ctx.fillStyle = `rgba(${this.color.join(',')}, ${this.alpha})`;
27+
2728
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
2829
ctx.closePath();
2930
ctx.fill();

packages/homepage/src/screens/home/Animation/canvas/index.js

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -103,17 +103,31 @@ class Canvas {
103103
distY = Math.abs(this.dots[i].y - this.cubeY);
104104
const distance = Math.sqrt(distX * distX + distY * distY);
105105

106-
this.dots[i].setAlpha(Math.max(0.2, (1 - distance / 300) * 2));
107-
this.dots[i].setSize(Math.max(1.5, (1 - distance / 300) * 4));
108-
this.dots[i].update(delta);
106+
this.dots[i].setAlpha(Math.max(0.9, (1 - distance / 300) * 2));
109107

108+
this.dots[i].setSize(
109+
Math.min(2, Math.random() * (1 - distance / this.stage.width))
110+
);
111+
this.dots[i].update(delta);
110112
if (this.wave) {
111113
const dirX = this.dots[i].x - this.wave.x;
112114
const dirY = this.dots[i].y - this.wave.y;
113115
const waveDistance = Math.sqrt(dirX * dirX + dirY * dirY);
114116

115117
if (waveDistance < middle) {
116-
this.dots[i].setColor(this.wave.color);
118+
const RED = [228, 3, 3];
119+
const ORANGE = [255, 140, 0];
120+
const YELLOW = [255, 237, 0];
121+
const GREEN = [0, 128, 38];
122+
const BLUE = [0, 77, 255];
123+
const PURPLE = [117, 7, 135];
124+
const ALL = [RED, ORANGE, YELLOW, GREEN, BLUE, PURPLE];
125+
126+
const COLOR =
127+
ALL[Math.round((distance / this.stage.width) * ALL.length)];
128+
129+
this.dots[i].setColor(COLOR);
130+
// this.dots[i].setColor(this.wave.color);
117131
}
118132
if (waveDistance > startRadius && waveDistance < endRadius) {
119133
power = Math.max(
@@ -130,13 +144,11 @@ class Canvas {
130144
}
131145
}
132146
}
133-
} else {
134-
if (!this.lowPerf) {
135-
this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
147+
} else if (!this.lowPerf) {
148+
this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
136149

137-
for (let i = 0; i < this.dots.length; i++) {
138-
this.dots[i].draw(this.ctx);
139-
}
150+
for (let i = 0; i < this.dots.length; i++) {
151+
this.dots[i].draw(this.ctx);
140152
}
141153
}
142154

0 commit comments

Comments
 (0)