diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/tvl/logo/default.nix | 70 | ||||
| -rw-r--r-- | web/tvl/logo/logo-shapes.svg | 25 |
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 0000000000..cb09dc28ec --- /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 0000000000..fd45e9bbc7 --- /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> |
