feat(web/tvl): Check in first version of new TVL logo

The exported SVG was hand-edited to make it as understandable as
possible, the components within it are grouped sensibly.

We noticed that it looks best with different fill colours for the
armchair, so some included Nix code generates a colour animation (e.g.
for the homepage) and differently coloured export PNGs (for different
places).

Thanks Varia <3

Change-Id: Ifdb5f4ff7827caf10d193b99e81b7c8498b35ce4

1 files changed, 70 insertions, 0 deletions

diff --git a/web/tvl/logo/default.nix b/web/tvl/logo/default.nix
new file mode 100644
index 000000000000..cb09dc28ecfa
--- /dev/null
+++ b/web/tvl/logo/default.nix
@@ -0,0 +1,70 @@
+# Creates an output containing the logo in SVG format (animated and
+# static, one for each background colour) and without animations in
+# PNG.
+{ depot, lib, pkgs, ... }:
+
+let
+  palette = {
+    purple = "#CC99C9";
+    blue = "#9EC1CF";
+    green = "#9EE09E";
+    yellow = "#FDFD97";
+    orange = "#FEB144";
+    red = "#FF6663";
+  };
+
+  logoShapes = builtins.readFile ./logo-shapes.svg;
+  logoSvg = style: ''
+    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 2480 3508">
+      <style>${style}</style>
+      ${logoShapes}
+    </svg>
+  '';
+
+  staticCss = colour: ''
+    #armchair-background {
+      fill: ${colour};
+    }
+  '';
+
+  # Create an animated CSS that equally spreads out the colours over
+  # the animation duration (1min).
+  animatedCss = colours: let
+    # Calculate at which percentage offset each colour should appear.
+    stepSize = 100 / ((builtins.length colours) - 1);
+    frames = lib.imap0 (idx: colour: { inherit colour; at = idx * stepSize; }) colours;
+    frameCss = frame: "${toString frame.at}% { fill: ${frame.colour}; }";
+  in ''
+    #armchair-background {
+      animation: 60s infinite alternate armchairPalette;
+    }
+
+    @keyframes armchairPalette {
+    ${lib.concatStringsSep "\n" (map frameCss frames)}
+    }
+  '';
+
+in depot.nix.utils.drvTargets(lib.fix (self: {
+  inherit palette;
+
+  # Create a TVL logo SVG with the specified static armchair colour.
+  staticLogoSvg = colour: pkgs.writeText "logo.svg" (logoSvg (staticCss colour));
+
+  # Create a TVL logo SVG with the specified animated armchair colour set.
+  animatedLogoSvg = colours: pkgs.writeText "logo.svg" (logoSvg (animatedCss colours));
+
+  # Create a PNG of the TVL logo with the specified static armchair colour and DPI.
+  logoPng = colour: dpi: pkgs.runCommandNoCC "logo.png" {} ''
+    ${pkgs.inkscape}/bin/inkscape \
+      --export-area-drawing \
+      --export-background-opacity 0 \
+      --export-dpi ${toString dpi} \
+      ${self.staticLogoSvg colour} -o $out
+  '';
+
+  # Animated SVG logo with all colours.
+  pastelRainbow = self.animatedLogoSvg (lib.attrValues palette);
+}
+
+# Add individual outputs for static logos of each colour.
+// (lib.mapAttrs' (k: v: lib.nameValuePair "${k}Png" (self.logoPng v 96)) palette)))