refactor(web/tvl/logo): Convert lambdas into <use> elements r/2918

Some mostly manual refactoring of the logo, assisted by inkscape to
determine some details.

Changes:

* grid-aligned lambda & virus body shape
* replaced all lambdas except the top-left one with <use> statements
  of that lambda, this ensures that they actually have the same shape
* flipped the feet ... I think it looks better like this?
* split the virus body and lambda into different groups, which also
  easily allows styling them separately

Change-Id: Idaf1e3fe273b8c5461f5e433c1b0124fc534d9c5
Reviewed-on: https://cl.tvl.fyi/c/depot/+/3634
Tested-by: BuildkiteCI
Reviewed-by: tazjin <mail@tazj.in>

2 files changed, 15 insertions, 12 deletions

diff --git a/web/tvl/logo/default.nix b/web/tvl/logo/default.nix
index 9b7d5b9a0a27..0c0d0e5a95ec 100644
--- a/web/tvl/logo/default.nix
+++ b/web/tvl/logo/default.nix
@@ -60,7 +60,8 @@ let
 
   logoShapes = builtins.readFile ./logo-shapes.svg;
   logoSvg = style: ''
-    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="420 860 1640 1500">
+    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="420 860 1640 1500"
+         xmlns:xlink="http://www.w3.org/1999/xlink">
       <style>${style}</style>
       ${logoShapes}
     </svg>
diff --git a/web/tvl/logo/logo-shapes.svg b/web/tvl/logo/logo-shapes.svg
index beb91c14867a..069b79fa632b 100644
--- a/web/tvl/logo/logo-shapes.svg
+++ b/web/tvl/logo/logo-shapes.svg
@@ -1,15 +1,17 @@
 <polygon id="armchair-background" points="463 2030 567 1814 1904 1814 1978 2030 1935 2169 1720 2155 1590 2311 873 2305 778 2142 570 2186"/>
-<g class="structure" 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 class="structure">
+  <path id="virusbody" d="M 707.524,1820.74 701.038,1401.58 970,1100 h 542 l 271.37,310.47 -16.99,419.17 -295.93,284.34 -445.46,-4.15 z"/>
+</g>
+<g class="structure" id="lambdas">
+  <!-- virus lambdas and feet, clockwise starting at the top left -->
+  <path id="topleft" d="m 1002,1045 38,75 -65,35 -140,-260 h 78 l 47,80 45,-80 h 45 l 17.39,34.968" />
+  <use id="topright" xlink:href="#topleft" transform="matrix(-1,0,0,1,2482,0)" />
+  <use id="midright" xlink:href="#topleft" transform="matrix(-0.70710678,-0.70710678,-0.70710678,0.70710678,3284.799,1331.4128)" />
+  <use id="bottomright" xlink:href="#topleft" transform="matrix(-0.25881905,-0.96592583,-0.96592583,0.25881905,3120.6829,2438.0653)" />
+  <use id="rightfoot" xlink:href="#topleft" transform="matrix(-0.60515932,0.14752194,-0.14752194,-0.60515932,2234.5287,2616.7665)" />
+  <use id="leftfoot" xlink:href="#topleft" transform="matrix(0.60515932,0.14752194,0.14752194,-0.60515932,253.62404,2616.7665)" />
+  <use id="bottomleft" xlink:href="#topleft" transform="rotate(-75,1263.0635,1635.2798)" />
+  <use id="midleft" xlink:href="#topleft" transform="rotate(-45,1209.002,1626.9386)" />
 </g>
 <g class="structure" 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"/>