Update gradients

static/js/src/generate-banner-canvas.js

@@ -2,9 +2,9 @@ import { setText } from "./text";
 import { addUbuntuLogo, addIllustration } from "./images";
 import {
   createColorGradient,
-  createWhiteGradient,
-  createLightGreyGradient,
-  createMidGreyGradient,
+  createSuruLayerOne,
+  createSuruLayerTwo,
+  createSuruLayerThree,
 } from "./gradients";
 
 function generateBannerCanvas(options) {
@@ -17,17 +17,20 @@ function generateBannerCanvas(options) {
     height: 628,
   });
 
-  createWhiteGradient(ctxfacebook, {
+  createSuruLayerOne(ctxfacebook, {
     width: 1200,
     height: 628,
   });
 
-  createLightGreyGradient(ctxfacebook, {
+  createSuruLayerTwo(ctxfacebook, {
     width: 1200,
     height: 628,
   });
 
-  // createMidGreyGradient(ctxfacebook);
+  createSuruLayerThree(ctxfacebook, {
+    width: 1200,
+    height: 628,
+  });
 
   addUbuntuLogo(ctxfacebook, {
     x: 70,
@@ -67,17 +70,20 @@ function generateBannerCanvas(options) {
     height: 1080,
   });
 
-  createWhiteGradient(ctxfacebookmobile, {
+  createSuruLayerOne(ctxfacebookmobile, {
     width: 1080,
     height: 1080,
   });
 
-  createLightGreyGradient(ctxfacebookmobile, {
+  createSuruLayerTwo(ctxfacebookmobile, {
     width: 1080,
     height: 1080,
   });
 
-  createMidGreyGradient(ctxfacebookmobile);
+  createSuruLayerThree(ctxfacebookmobile, {
+    width: 1080,
+    height: 1080,
+  });
 
   addUbuntuLogo(ctxfacebookmobile, {
     x: 70,
@@ -117,17 +123,20 @@ function generateBannerCanvas(options) {
     height: 500,
   });
 
-  createWhiteGradient(ctxfacebook916, {
+  createSuruLayerOne(ctxfacebook916, {
     width: 400,
     height: 500,
   });
 
-  createLightGreyGradient(ctxfacebook916, {
+  createSuruLayerTwo(ctxfacebook916, {
     width: 400,
     height: 500,
   });
 
-  createMidGreyGradient(ctxfacebook916);
+  createSuruLayerThree(ctxfacebook916, {
+    width: 400,
+    height: 500,
+  });
 
   addUbuntuLogo(ctxfacebook916, {
     x: 43,
@@ -167,17 +176,20 @@ function generateBannerCanvas(options) {
     height: 418,
   });
 
-  createWhiteGradient(ctxtwitter, {
+  createSuruLayerOne(ctxtwitter, {
     width: 800,
     height: 418,
   });
 
-  createLightGreyGradient(ctxtwitter, {
+  createSuruLayerTwo(ctxtwitter, {
     width: 800,
     height: 418,
   });
 
-  createMidGreyGradient(ctxtwitter);
+  createSuruLayerThree(ctxtwitter, {
+    width: 800,
+    height: 418,
+  });
 
   addUbuntuLogo(ctxtwitter, {
     x: 420,
@@ -217,17 +229,20 @@ function generateBannerCanvas(options) {
     height: 800,
   });
 
-  createWhiteGradient(ctxtwittersquare, {
+  createSuruLayerOne(ctxtwittersquare, {
     width: 800,
     height: 800,
   });
 
-  createLightGreyGradient(ctxtwittersquare, {
+  createSuruLayerTwo(ctxtwittersquare, {
     width: 800,
     height: 800,
   });
 
-  createMidGreyGradient(ctxtwittersquare);
+  createSuruLayerThree(ctxtwittersquare, {
+    width: 800,
+    height: 800,
+  });
 
   addUbuntuLogo(ctxtwittersquare, {
     x: 70,

static/js/src/gradients.js

@@ -3,7 +3,7 @@ function createColorGradient(context, background, dimensions) {
     grad: {
       start: "#2c001e",
       middle: "#772953",
-      end: "#e95420",
+      end: "#b9463c",
     },
     dark: {
       start: "#111111",
@@ -45,8 +45,8 @@ function createColorGradient(context, background, dimensions) {
   context.fillRect(0, 0, dimensions.width, dimensions.height);
 }
 
-function createWhiteGradient(context, dimensions) {
-  context.fillStyle = "rgba(255, 255, 255, 0.1)";
+function createSuruLayerOne(context, dimensions) {
+  context.fillStyle = "rgba(255, 255, 255, 0.03)";
   context.rotate((10 * Math.PI) / 180);
   context.fillRect(
     0,
@@ -58,36 +58,60 @@ function createWhiteGradient(context, dimensions) {
   context.fillRect(0, 0, dimensions.width, dimensions.height);
 }
 
-function createLightGreyGradient(context, dimensions) {
-  context.fillStyle = "rgba(0, 0, 0, 0.1)";
-  context.rotate((-10 * Math.PI) / 180);
+function createSuruLayerTwo(context, dimensions) {
+  context.fillStyle = "rgba(255, 255, 255, 0.05)";
+
+  let rotateAngle = 25;
+  let rectHeight = dimensions.height / 1.2;
+
+  if (dimensions.width > dimensions.height) {
+    rotateAngle = 10;
+  }
+
+  if (dimensions.height > dimensions.width) {
+    rectHeight = dimensions.height / 1.4;
+  }
+
+  context.rotate((-rotateAngle * Math.PI) / 180);
   context.fillRect(
     -dimensions.width,
-    dimensions.height / 1.4,
+    rectHeight,
     dimensions.width * 2,
     dimensions.height
   );
-  context.rotate((10 * Math.PI) / 180);
+  context.rotate((rotateAngle * Math.PI) / 180);
   context.fillRect(0, 0, dimensions.width, dimensions.height);
 }
 
-function createMidGreyGradient(context) {
-  const gradient = context.createLinearGradient(0, 0, 2000, 2000);
+function createSuruLayerThree(context, dimensions) {
+  context.fillStyle = "rgba(0, 0, 0, 0.05)";
 
-  gradient.addColorStop(0, "rgba(216, 216, 216, 0.54)");
-  gradient.addColorStop(0.5, "rgba(216, 216, 216, 0.54)");
+  let rotateAngle = 40;
+  let rectX = -dimensions.width;
+  let rectY = 0;
+  let rectWidth = dimensions.width * 2;
+  let rectHeight = dimensions.height;
 
-  context.globalAlpha = 0.05;
-  context.fillStyle = gradient;
-  context.rotate((50 * Math.PI) / 180);
-  context.fillRect(600, -1000, 2000, 2000);
-  context.rotate((-50 * Math.PI) / 180);
-  context.globalAlpha = 1;
+  if (dimensions.width === dimensions.height) {
+    rotateAngle = 55;
+    rectY = -dimensions.height / 2.5;
+  }
+
+  if (dimensions.height > dimensions.width) {
+    rotateAngle = 60;
+    rectX = -dimensions.width * 1.25;
+    rectY = -dimensions.width / 1.75;
+  }
+
+  context.rotate((-rotateAngle * Math.PI) / 180);
+  context.fillRect(rectX, rectY, rectWidth, rectHeight);
+  context.rotate((rotateAngle * Math.PI) / 180);
+  context.fillRect(0, 0, dimensions.width, dimensions.height);
 }
 
 export {
   createColorGradient,
-  createWhiteGradient,
-  createLightGreyGradient,
-  createMidGreyGradient,
+  createSuruLayerOne,
+  createSuruLayerTwo,
+  createSuruLayerThree,
 };