From 8d40c84408e69011fc8774c0adb6663fa45f7cc8 Mon Sep 17 00:00:00 2001 From: Vincent Ambo Date: Sun, 19 Sep 2021 16:15:07 +0300 Subject: 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 --- web/tvl/logo/default.nix | 70 ++++++++++++++++++++++++++++++++++++++++++++ web/tvl/logo/logo-shapes.svg | 25 ++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 web/tvl/logo/default.nix create mode 100644 web/tvl/logo/logo-shapes.svg (limited to 'web/tvl') 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: '' + + + ${logoShapes} + + ''; + + 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit 1.4.1