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

2 files changed, 95 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)))
diff --git a/web/tvl/logo/logo-shapes.svg b/web/tvl/logo/logo-shapes.svg
new file mode 100644
index 000000000000..fd45e9bbc745
--- /dev/null
+++ b/web/tvl/logo/logo-shapes.svg
@@ -0,0 +1,25 @@
+<polygon id="armchair-background" fill="#FF6663" points="463 2030 567 1814 1904 1814 1978 2030 1935 2169 1720 2155 1590 2311 873 2305 778 2142 570 2186"/>
+<g id="virus body">
+  <!-- body first, then lambda-legs going clockwise starting from the bottom left -->
+  <path d="m699.524 1820.74-6.486-419.16 268.599-301.08 543.053 5.43 270.68 304.54-16.99 419.17-295.93 284.34-445.46-4.15-317.466-289.09Z"/>
+  <path d="m1025 2109.8-86.543 132.68-22.688-40.11 28.405-45.37-54.824-2.26-12.116-20.66 13.122-20.5 79.884 3.27 21.015-31.09"/>
+  <path d="m699.821 1736.94-79.712 25.39-95.044-96.17-40.392 7.62-12.13 40.82 65.404 64.84-89.614 27.47-20.11 79.32 56.581-14.49 215.322-52.19"/>
+  <path d="m707.963 1463.2 22.242-75.79-85.664-25.3-27.115-126.34-39.485-13.75-30.464 25.06 17.496 87.64-87.242-28.07-59.946 55.98"/>
+  <path d="m1002.46 1041.1 28.3 73.74-73.694-.36-127.221-225.409 82.879 1.584 47.509 79.183 47.507-75.488 41.71-1.583 17.94 32.201"/>
+  <path d="m1424.32 1112.36 81.79 1.1 122.03-215.819-76.15-.408-22.31 36.156-23.09 38.532-46.11-74.877-36.44-1.19-21.83 34.346 63.13 107.63"/>
+  <path d="m1759.52 1460.18-1.45-67.76 86.66-21.7 37.14-121.93 35.31-9.86 27.75 27.98-21.73 84.62 86.94-18.73 50.49 52.8"/>
+  <path d="m1758.16 1733.44 100.18 32.93 100.8-91.1 39.61 12.29 8.92 40.77-69.38 62.61 88.23 30.28 17.63 78.92-45.96-13.32-243.68-72.12"/>
+  <path d="m1486.78 2083.12-28.66 29.5 83.43 131.7 21.98-39.49-27.18-41.76 52.19-5.43 10.39-21.24-10.64-16.85-73.78 3.69"/>
+</g>
+<g id="armchair">
+  <path d="M742.781 2172.23s-89.208 93.93-210.767 22.78c-121.56-71.14-124.755-220.09-47.72-318 78.865-100.24 220.899-86.94 221.229-85.38.274 1.3 247.178 196.08 328.597 260.28 16.08 12.68 25.71 20.27 25.71 20.27l-37.68 41.02s-209.519-177.76-290.729-250.45c-9.975 1.38-150.662-67.27-214.983 108.51-24.251 74.65 15.983 145.09 69.889 167.71 91.689 19.32 94.88 1.94 121.523-18.39"/>
+  <path d="M1738.4 2174.64s91.9 88.75 209.97 16.51c118.07-72.25 115.91-216.85 39.26-313.11-78.47-98.55-217.31-83.5-217.61-81.95-.26 1.29-239.43 197.97-318.3 262.8-15.58 12.8-24.9 20.46-24.9 20.46l37.4 40.26s202.73-184.66 281.29-257.92c9.78 1.23 134.36-50.54 211.78 110.07 28.32 92.64-13.71 144.64-66.18 167.81-89.5 20.38-90.29.61-116.63-19.24"/>
+  <path d="m899.02 2276.92 680.44-.32 98.56-134.61 51.64 32.46-121.94 160.78-739.1-1.03-125.507-162.22 54.172-39.79 101.735 144.73Z"/>
+  <path d="m744.143 2173.36 56.05-35.55s-44.914-79.17-102.074-8.6"/>
+  <path d="M1728.8 2176.06c-7.6 2.16-53.69-30.58-53.69-30.58s43.06-84.48 102.63-21.21c59.57 63.27-52.85 47.65-48.94 51.79Z"/>
+</g>
+<g id="letters" fill="#fefefe">
+  <path id="t" d="M970.081 1776.8c-22.214 0-40.017-6.45-53.41-19.35-13.394-12.9-20.09-30.14-20.09-51.7v-158.27h-75.95v-40.18h75.95v-75.95h44.1v75.95h107.799v40.18H940.681v158.27c0 9.15 2.695 16.58 8.085 22.3 5.39 5.72 12.495 8.57 21.315 8.57h73.499v40.18h-73.499Z"/>
+  <path id="v" d="M 1205.77 1776.8 L 1112.18 1507.3 L 1157.75 1507.3 L 1220.47 1688.6 L 1235.66 1742.99 L 1311.12 1507.3 L 1357.18 1507.3 L 1263.59 1776.8 L 1205.77 1776.8 L 1205.77 1776.8 Z"/>
+  <path id="lambda" d="M 1406.18 1776.8 L 1506.14 1511.71 L 1469.88 1419.1 L 1516.92 1419.1 L 1651.18 1776.8 L 1604.14 1776.8 L 1539.95 1601.87 L 1530.64 1571.49 L 1453.71 1776.8 L 1406.18 1776.8 Z"/>
+</g>