Pride

Author: Ives van Hoorne

packages/common/components/Logo.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Logo from './Logo.png';
 
 export default ({
   width = 35,
@@ -9,53 +10,11 @@ export default ({
   height: number,
   className: ?string,
 }) => (
-  <svg
-    x="0px"
-    y="0px"
+  <img
     className={className}
-    width={`${width}px`}
-    height={`${height}px`}
-    viewBox="0 0 1024 1024"
-  >
-    <g id="Layer_1">
-      <polyline
-        fill="#FFFFFF"
-        points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851"
-      />
-      <polyline
-        fill="#FFFFFF"
-        points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438"
-      />
-      <polyline
-        fill="#FFFFFF"
-        points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795"
-      />
-    </g>
-    <g id="Layer_2">
-      <polyline
-        fill="none"
-        stroke="#FFFFFF"
-        strokeWidth="80"
-        strokeMiterlimit="10"
-        points="899,287.833 509,513 509,963"
-      />
-      <line
-        fill="none"
-        stroke="#FFFFFF"
-        strokeWidth="80"
-        strokeMiterlimit="10"
-        x1="122.167"
-        y1="289"
-        x2="511.5"
-        y2="513"
-      />
-      <polygon
-        fill="none"
-        stroke="#FFFFFF"
-        strokeWidth="80"
-        strokeMiterlimit="10"
-        points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"
-      />
-    </g>
-  </svg>
+    src={Logo}
+    width={width}
+    height={height}
+    alt="Logo"
+  />
 );

packages/common/components/Logo.png

@@ -48,8 +48,7 @@ export default class Background extends React.PureComponent {
     return (
       <Container
         style={{
-          backgroundColor:
-            this.colors[template.name] || template.color.clearer(0.97)(),
+          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))`,
         }}
       >
         <canvas

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

@@ -17,13 +17,14 @@ export default class Dot extends PositionedElement {
     this.color = color;
     this.alpha = alpha;
     const r = Math.random();
-    this.minAlpha = 0.1 + r * 0.2;
+    this.minAlpha = 0.4 + r * 0.2;
     this.minSize = 0.5 + r * 2;
   }
 
   draw(ctx: CanvasRenderingContext2D) {
     ctx.beginPath();
     ctx.fillStyle = `rgba(${this.color.join(',')}, ${this.alpha})`;
+
     ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
     ctx.closePath();
     ctx.fill();

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

@@ -103,17 +103,31 @@ class Canvas {
           distY = Math.abs(this.dots[i].y - this.cubeY);
           const distance = Math.sqrt(distX * distX + distY * distY);
 
-          this.dots[i].setAlpha(Math.max(0.2, (1 - distance / 300) * 2));
-          this.dots[i].setSize(Math.max(1.5, (1 - distance / 300) * 4));
-          this.dots[i].update(delta);
+          this.dots[i].setAlpha(Math.max(0.9, (1 - distance / 300) * 2));
 
+          this.dots[i].setSize(
+            Math.min(2, Math.random() * (1 - distance / this.stage.width))
+          );
+          this.dots[i].update(delta);
           if (this.wave) {
             const dirX = this.dots[i].x - this.wave.x;
             const dirY = this.dots[i].y - this.wave.y;
             const waveDistance = Math.sqrt(dirX * dirX + dirY * dirY);
 
             if (waveDistance < middle) {
-              this.dots[i].setColor(this.wave.color);
+              const RED = [228, 3, 3];
+              const ORANGE = [255, 140, 0];
+              const YELLOW = [255, 237, 0];
+              const GREEN = [0, 128, 38];
+              const BLUE = [0, 77, 255];
+              const PURPLE = [117, 7, 135];
+              const ALL = [RED, ORANGE, YELLOW, GREEN, BLUE, PURPLE];
+
+              const COLOR =
+                ALL[Math.round((distance / this.stage.width) * ALL.length)];
+
+              this.dots[i].setColor(COLOR);
+              // this.dots[i].setColor(this.wave.color);
             }
             if (waveDistance > startRadius && waveDistance < endRadius) {
               power = Math.max(
@@ -130,13 +144,11 @@ class Canvas {
             }
           }
         }
-      } else {
-        if (!this.lowPerf) {
-          this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
+      } else if (!this.lowPerf) {
+        this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
 
-          for (let i = 0; i < this.dots.length; i++) {
-            this.dots[i].draw(this.ctx);
-          }
+        for (let i = 0; i < this.dots.length; i++) {
+          this.dots[i].draw(this.ctx);
         }
       }