From 41146d6ee332b251f809145b6860e02aa7bb4cf0 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Tue, 11 Apr 2023 12:55:15 +0200
Subject: [PATCH] chore: update logo and loading animation

---
 apps/www/components/Nav/index.tsx             |   3 +-
 .../images/supabase-logo-wordmark--white.png  | Bin 0 -> 4173 bytes
 .../components/ui/Loading/Loading.anim.json   | 476 +-----------------
 .../ui/Loading/archive/Loading.anim.json      | 475 +++++++++++++++++
 4 files changed, 478 insertions(+), 476 deletions(-)
 create mode 100644 packages/common/assets/images/supabase-logo-wordmark--white.png
 create mode 100644 studio/components/ui/Loading/archive/Loading.anim.json

diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 434ed51c84c..e178efef081 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -19,6 +19,7 @@ import TextLink from '../TextLink'
 import Image from 'next/image'
 import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
 import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
+import * as supabaseLogoWordmarkWhite from 'common/assets/images/supabase-logo-wordmark--white.png'
 
 const Nav = () => {
   const { isDarkMode } = useTheme()
@@ -227,7 +228,7 @@ const Nav = () => {
                       <Image
                         src={
                           isLaunchWeekPage
-                            ? supabaseLogoWordmarkDark
+                            ? supabaseLogoWordmarkWhite
                             : isDarkMode
                             ? supabaseLogoWordmarkDark
                             : supabaseLogoWordmarkLight
diff --git a/packages/common/assets/images/supabase-logo-wordmark--white.png b/packages/common/assets/images/supabase-logo-wordmark--white.png
new file mode 100644
index 0000000000000000000000000000000000000000..de31a8559d0ee805eb1a2c84c33f59c86e43ea2d
GIT binary patch
literal 4173
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
BQ7-@h

literal 0
HcmV?d00001

diff --git a/studio/components/ui/Loading/Loading.anim.json b/studio/components/ui/Loading/Loading.anim.json
index b3c5bc4f192..e1c5552f0aa 100644
--- a/studio/components/ui/Loading/Loading.anim.json
+++ b/studio/components/ui/Loading/Loading.anim.json
@@ -1,475 +1 @@
-{
-  "assets": [
-    {
-      "id": "comp_Combined-Shape_BF73096D-B400-4871-BC74-C00F039296BF",
-      "layers": [
-        {
-          "ty": 3,
-          "ao": 0,
-          "ddd": 0,
-          "ind": 15,
-          "ip": 0,
-          "ks": {
-            "a": { "a": 0, "k": [0, 0, 0] },
-            "o": { "a": 0, "k": 100 },
-            "p": { "s": true, "x": { "a": 0, "k": 113 }, "y": { "a": 0, "k": 101 } },
-            "r": { "a": 0, "k": 0 },
-            "s": { "a": 0, "k": [100, 100] }
-          },
-          "nm": "Combined-Shape-null",
-          "op": 61,
-          "sr": 1,
-          "st": 0,
-          "tt": 0
-        },
-        {
-          "ty": 4,
-          "ao": 0,
-          "ddd": 0,
-          "ind": 18,
-          "ip": 0,
-          "ks": {
-            "a": { "a": 0, "k": [0, 0] },
-            "o": { "a": 0, "k": 100 },
-            "p": { "a": 0, "k": [0, 0] },
-            "r": { "a": 0, "k": 0 },
-            "s": { "a": 0, "k": [100, 100] }
-          },
-          "nm": "Combined-Shape-size",
-          "op": 61,
-          "shapes": [
-            {
-              "ty": "gr",
-              "cix": 2,
-              "it": [
-                {
-                  "ty": "rc",
-                  "d": 1,
-                  "nm": "sizeElement",
-                  "p": { "a": 0, "k": [187.5, 187.5] },
-                  "r": { "a": 0, "k": 0 },
-                  "s": { "a": 0, "k": [375, 375] }
-                },
-                {
-                  "ty": "fl",
-                  "c": { "a": 0, "k": [0, 0, 0, 0] },
-                  "nm": "Fill1",
-                  "o": { "a": 0, "k": 0 },
-                  "r": 1
-                },
-                {
-                  "ty": "tr",
-                  "a": { "a": 0, "k": [0, 0] },
-                  "nm": "Transform",
-                  "o": { "a": 0, "k": 100 },
-                  "p": { "a": 0, "k": [0, 0] },
-                  "r": { "a": 0, "k": 0 },
-                  "s": { "a": 0, "k": [100, 100] },
-                  "sa": { "a": 0, "k": 0 },
-                  "sk": { "a": 0, "k": 0 }
-                }
-              ],
-              "nm": "Combined-Shape-size",
-              "np": 3
-            }
-          ],
-          "sr": 1,
-          "st": 0,
-          "tt": 0
-        },
-        {
-          "ty": 4,
-          "ao": 0,
-          "ddd": 0,
-          "ind": 11,
-          "ip": 0,
-          "ks": {
-            "a": { "a": 0, "k": [0, 0] },
-            "o": { "a": 0, "k": 100 },
-            "p": { "a": 0, "k": [0, 0] },
-            "r": { "a": 0, "k": 0 },
-            "s": { "a": 0, "k": [100, 100] }
-          },
-          "nm": "Combined-Shape-stroke",
-          "op": 61,
-          "parent": 15,
-          "shapes": [
-            {
-              "ty": "gr",
-              "cix": 2,
-              "it": [
-                {
-                  "ty": "sh",
-                  "ind": 0,
-                  "ks": {
-                    "a": 0,
-                    "k": {
-                      "c": true,
-                      "i": [
-                        [0, 0],
-                        [0, -1.5774979571739018],
-                        [0, 0],
-                        [0, 0],
-                        [0, -4.1410576386918905],
-                        [0.9255199999998638, -1.2470810337555633],
-                        [0, 0],
-                        [0, 0],
-                        [0.8663779999999406, -0.060411534501071174],
-                        [0, 0],
-                        [0, 0],
-                        [0, 1.5774239565191124],
-                        [0, 0],
-                        [0, 0],
-                        [0, 4.140773636179105],
-                        [-0.9253779999999092, 1.2470810337555918],
-                        [0, 0],
-                        [0, 0],
-                        [-0.9496219999999482, 0]
-                      ],
-                      "o": [
-                        [1.5779769999999473, 0],
-                        [0, 0],
-                        [0, 0],
-                        [4.14215999999999, 0],
-                        [0, 1.671847791949645],
-                        [0, 0],
-                        [0, 0],
-                        [-0.4826290000000597, 0.661415851986078],
-                        [0, 0],
-                        [0, 0],
-                        [-1.5779769999999473, 0],
-                        [0, 0],
-                        [0, 0],
-                        [-4.142126999999958, 0],
-                        [0, -1.6721317944625582],
-                        [0, 0],
-                        [0, 0],
-                        [0.5194710000000526, -0.7124533035483542],
-                        [0, 0]
-                      ],
-                      "v": [
-                        [72.142911, 0],
-                        [75, 2.8563202717656835],
-                        [75, 67.44501973095933],
-                        [142.5, 67.44501973095933],
-                        [150, 74.94310207148214],
-                        [148.52722000000006, 79.40599555766988],
-                        [145.63866000000002, 83.46085143367749],
-                        [80.16748600000005, 171.86465860097266],
-                        [78.05883900000003, 173.03298993797728],
-                        [77.857089, 173.04],
-                        [77.857089, 173.04],
-                        [75, 170.18373672873858],
-                        [75, 105.5949792690318],
-                        [7.5, 105.5949792690318],
-                        [0, 98.09718193103066],
-                        [1.4727789999999457, 93.63400444233007],
-                        [4.361228999999984, 89.57914756631368],
-                        [69.83251399999996, 1.1754323998324296],
-                        [72.142911, 0]
-                      ]
-                    }
-                  },
-                  "nm": "Combined-Shape-path"
-                },
-                {
-                  "ty": "st",
-                  "c": {
-                    "a": 0,
-                    "k": [0.24313725490196078, 0.8117647058823529, 0.5568627450980392, 1]
-                  },
-                  "d": [{ "n": "o", "nm": "offset", "v": { "a": 0, "k": 0 } }],
-                  "lc": 1,
-                  "lj": 1,
-                  "ml": 4,
-                  "nm": "Stroke1",
-                  "o": { "a": 0, "k": 100 },
-                  "w": { "a": 0, "k": 7 }
-                },
-                {
-                  "ty": "tm",
-                  "e": {
-                    "a": 1,
-                    "k": [
-                      {
-                        "i": { "x": [0.58], "y": [1] },
-                        "o": { "x": [0.42], "y": [0] },
-                        "s": [0],
-                        "t": 0
-                      },
-                      {
-                        "i": { "x": [0.58], "y": [1] },
-                        "o": { "x": [0.42], "y": [0] },
-                        "s": [100],
-                        "t": 30
-                      },
-                      {
-                        "i": { "x": [1], "y": [1] },
-                        "o": { "x": [0], "y": [0] },
-                        "s": [100],
-                        "t": 60
-                      }
-                    ]
-                  },
-                  "m": 2,
-                  "nm": "TrimPaths1",
-                  "o": { "a": 0, "k": 0 },
-                  "s": {
-                    "a": 1,
-                    "k": [
-                      {
-                        "i": { "x": [1], "y": [1] },
-                        "o": { "x": [0], "y": [0] },
-                        "s": [0],
-                        "t": 0
-                      },
-                      {
-                        "i": { "x": [0.58], "y": [1] },
-                        "o": { "x": [0.42], "y": [0] },
-                        "s": [0],
-                        "t": 27
-                      },
-                      {
-                        "i": { "x": [0.58], "y": [1] },
-                        "o": { "x": [0.42], "y": [0] },
-                        "s": [100],
-                        "t": 60
-                      }
-                    ]
-                  }
-                },
-                {
-                  "ty": "tr",
-                  "a": { "a": 0, "k": [0, 0] },
-                  "nm": "Transform",
-                  "o": { "a": 0, "k": 100 },
-                  "p": { "a": 0, "k": [0, 0] },
-                  "r": { "a": 0, "k": 0 },
-                  "s": { "a": 0, "k": [100, 100] },
-                  "sa": { "a": 0, "k": 0 },
-                  "sk": { "a": 0, "k": 0 }
-                }
-              ],
-              "nm": "Combined-Shape-stroke",
-              "np": 3
-            }
-          ],
-          "sr": 1,
-          "st": 0,
-          "tt": 0
-        },
-        {
-          "ty": 4,
-          "ao": 0,
-          "ddd": 0,
-          "ind": 14,
-          "ip": 0,
-          "ks": {
-            "a": { "a": 0, "k": [0, 0] },
-            "o": { "a": 0, "k": 100 },
-            "p": { "a": 0, "k": [0, 0] },
-            "r": { "a": 0, "k": 0 },
-            "s": { "a": 0, "k": [100, 100] }
-          },
-          "nm": "Combined-Shape-content",
-          "op": 61,
-          "parent": 15,
-          "shapes": [
-            {
-              "ty": "gr",
-              "cix": 2,
-              "it": [
-                {
-                  "ty": "sh",
-                  "ind": 0,
-                  "ks": {
-                    "a": 0,
-                    "k": {
-                      "c": true,
-                      "i": [
-                        [0, 0],
-                        [0, -1.5774979571739018],
-                        [0, 0],
-                        [0, 0],
-                        [0, -4.1410576386918905],
-                        [0.9255199999998638, -1.2470810337555633],
-                        [0, 0],
-                        [0, 0],
-                        [0.8663779999999406, -0.060411534501071174],
-                        [0, 0],
-                        [0, 0],
-                        [0, 1.5774239565191124],
-                        [0, 0],
-                        [0, 0],
-                        [0, 4.140773636179105],
-                        [-0.9253779999999092, 1.2470810337555918],
-                        [0, 0],
-                        [0, 0],
-                        [-0.9496219999999482, 0]
-                      ],
-                      "o": [
-                        [1.5779769999999473, 0],
-                        [0, 0],
-                        [0, 0],
-                        [4.14215999999999, 0],
-                        [0, 1.671847791949645],
-                        [0, 0],
-                        [0, 0],
-                        [-0.4826290000000597, 0.661415851986078],
-                        [0, 0],
-                        [0, 0],
-                        [-1.5779769999999473, 0],
-                        [0, 0],
-                        [0, 0],
-                        [-4.142126999999958, 0],
-                        [0, -1.6721317944625582],
-                        [0, 0],
-                        [0, 0],
-                        [0.5194710000000526, -0.7124533035483542],
-                        [0, 0]
-                      ],
-                      "v": [
-                        [72.142911, 0],
-                        [75, 2.8563202717656835],
-                        [75, 67.44501973095933],
-                        [142.5, 67.44501973095933],
-                        [150, 74.94310207148214],
-                        [148.52722000000006, 79.40599555766988],
-                        [145.63866000000002, 83.46085143367749],
-                        [80.16748600000005, 171.86465860097266],
-                        [78.05883900000003, 173.03298993797728],
-                        [77.857089, 173.04],
-                        [77.857089, 173.04],
-                        [75, 170.18373672873858],
-                        [75, 105.5949792690318],
-                        [7.5, 105.5949792690318],
-                        [0, 98.09718193103066],
-                        [1.4727789999999457, 93.63400444233007],
-                        [4.361228999999984, 89.57914756631368],
-                        [69.83251399999996, 1.1754323998324296],
-                        [72.142911, 0]
-                      ]
-                    }
-                  },
-                  "nm": "Combined-Shape-path"
-                },
-                {
-                  "ty": "fl",
-                  "c": { "a": 0, "k": [0, 0, 0, 1] },
-                  "nm": "Fill1",
-                  "o": { "a": 0, "k": 0 },
-                  "r": 1
-                },
-                {
-                  "ty": "tr",
-                  "a": { "a": 0, "k": [0, 0] },
-                  "nm": "Transform",
-                  "o": { "a": 0, "k": 100 },
-                  "p": { "a": 0, "k": [0, 0] },
-                  "r": { "a": 0, "k": 0 },
-                  "s": { "a": 0, "k": [100, 100] },
-                  "sa": { "a": 0, "k": 0 },
-                  "sk": { "a": 0, "k": 0 }
-                }
-              ],
-              "nm": "Combined-Shape-content",
-              "np": 3
-            }
-          ],
-          "sr": 1,
-          "st": 0,
-          "tt": 0
-        }
-      ]
-    }
-  ],
-  "ddd": 0,
-  "fonts": { "list": [] },
-  "fr": 30,
-  "h": 375,
-  "ip": 0,
-  "layers": [
-    {
-      "ty": 0,
-      "ao": 0,
-      "ddd": 0,
-      "h": 375,
-      "ind": 10,
-      "ip": 0,
-      "ks": {
-        "a": { "a": 0, "k": [0, 0] },
-        "o": { "a": 0, "k": 100 },
-        "p": { "a": 0, "k": [0, 0] },
-        "r": { "a": 0, "k": 0 },
-        "s": { "a": 0, "k": [100, 100] }
-      },
-      "nm": "Combined-Shape-composition",
-      "op": 61,
-      "refId": "comp_Combined-Shape_BF73096D-B400-4871-BC74-C00F039296BF",
-      "sr": 1,
-      "st": 0,
-      "tt": 0,
-      "w": 375
-    },
-    {
-      "ty": 4,
-      "ao": 0,
-      "ddd": 0,
-      "ind": 2,
-      "ip": 0,
-      "ks": {
-        "a": { "a": 0, "k": [0, 0] },
-        "o": { "a": 0, "k": 100 },
-        "p": { "a": 0, "k": [0, 0] },
-        "r": { "a": 0, "k": 0 },
-        "s": { "a": 0, "k": [100, 100] }
-      },
-      "nm": "Scene-background",
-      "op": 61,
-      "shapes": [
-        {
-          "ty": "gr",
-          "cix": 2,
-          "it": [
-            {
-              "ty": "rc",
-              "d": 1,
-              "nm": "Scene-background",
-              "p": { "a": 0, "k": [187.5, 187.5] },
-              "r": { "a": 0, "k": 0 },
-              "s": { "a": 0, "k": [375, 375] }
-            },
-            {
-              "ty": "fl",
-              "c": { "a": 0, "k": [0.9440000000000001, 0.968, 1, 1] },
-              "nm": "Fill1",
-              "o": { "a": 0, "k": 0 },
-              "r": 1
-            },
-            {
-              "ty": "tr",
-              "a": { "a": 0, "k": [0, 0] },
-              "nm": "Transform",
-              "o": { "a": 0, "k": 100 },
-              "p": { "a": 0, "k": [0, 0] },
-              "r": { "a": 0, "k": 0 },
-              "s": { "a": 0, "k": [100, 100] },
-              "sa": { "a": 0, "k": 0 },
-              "sk": { "a": 0, "k": 0 }
-            }
-          ],
-          "nm": "Scene-background",
-          "np": 3
-        }
-      ],
-      "sr": 1,
-      "st": 0,
-      "tt": 0
-    }
-  ],
-  "meta": { "a": "", "d": "OutlineTraceLoader(Empty)", "g": "Flow1.8.6", "k": "", "tc": "" },
-  "nm": "OutlineTraceLoader(Empty)",
-  "op": 61,
-  "v": "5.6.4",
-  "w": 375
-}
+{"v":"5.7.3","fr":30,"ip":0,"op":45,"w":150,"h":150,"nm":"Loading-purple","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Livello forma 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[75,75,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[50,50,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.191,0],[0,0],[0,0],[2.859,-3.601],[0,0],[-8.191,0],[0,0],[0,0],[-2.859,3.601],[0,0]],"o":[[0,0],[0,0],[-0.069,-4.598],[0,0],[-5.093,6.415],[0,0],[0,0],[0.069,4.598],[0,0],[5.093,-6.415]],"v":[[44.681,-16.115],[-0.239,-16.115],[-0.469,-51.136],[-9.195,-54.106],[-52.347,0.24],[-44.681,16.115],[-0.055,16.115],[0.469,51.137],[9.195,54.107],[52.347,-0.24]],"c":true},"ix":2},"nm":"Tracciato 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,0.275,0.208,0.655,0.5,0.429,0.106,0.827,1,0.584,0.004,1,0,0.8,0.5,0.5,1,0.2],"ix":8}},"s":{"a":0,"k":[0,0],"ix":4},"e":{"a":0,"k":[100,0],"ix":5},"t":1,"lc":2,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"d":[{"n":"d","nm":"trattino","v":{"a":0,"k":400,"ix":1}},{"n":"g","nm":"spazio","v":{"a":0,"k":400,"ix":2}},{"n":"o","nm":"scostamento","v":{"a":0,"k":169.492,"ix":7}}],"nm":"Tratto sfumatura 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Trasformazione"}],"nm":"Forma 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.423],"y":[1]},"o":{"x":[0.501],"y":[0]},"t":9,"s":[100]},{"t":44,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.501],"y":[-0.004]},"t":1,"s":[100]},{"t":22,"s":[0]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[100]},{"t":44,"s":[-260]}],"ix":3},"m":1,"ix":2,"nm":"Taglia tracciati 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":45,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/studio/components/ui/Loading/archive/Loading.anim.json b/studio/components/ui/Loading/archive/Loading.anim.json
new file mode 100644
index 00000000000..b3c5bc4f192
--- /dev/null
+++ b/studio/components/ui/Loading/archive/Loading.anim.json
@@ -0,0 +1,475 @@
+{
+  "assets": [
+    {
+      "id": "comp_Combined-Shape_BF73096D-B400-4871-BC74-C00F039296BF",
+      "layers": [
+        {
+          "ty": 3,
+          "ao": 0,
+          "ddd": 0,
+          "ind": 15,
+          "ip": 0,
+          "ks": {
+            "a": { "a": 0, "k": [0, 0, 0] },
+            "o": { "a": 0, "k": 100 },
+            "p": { "s": true, "x": { "a": 0, "k": 113 }, "y": { "a": 0, "k": 101 } },
+            "r": { "a": 0, "k": 0 },
+            "s": { "a": 0, "k": [100, 100] }
+          },
+          "nm": "Combined-Shape-null",
+          "op": 61,
+          "sr": 1,
+          "st": 0,
+          "tt": 0
+        },
+        {
+          "ty": 4,
+          "ao": 0,
+          "ddd": 0,
+          "ind": 18,
+          "ip": 0,
+          "ks": {
+            "a": { "a": 0, "k": [0, 0] },
+            "o": { "a": 0, "k": 100 },
+            "p": { "a": 0, "k": [0, 0] },
+            "r": { "a": 0, "k": 0 },
+            "s": { "a": 0, "k": [100, 100] }
+          },
+          "nm": "Combined-Shape-size",
+          "op": 61,
+          "shapes": [
+            {
+              "ty": "gr",
+              "cix": 2,
+              "it": [
+                {
+                  "ty": "rc",
+                  "d": 1,
+                  "nm": "sizeElement",
+                  "p": { "a": 0, "k": [187.5, 187.5] },
+                  "r": { "a": 0, "k": 0 },
+                  "s": { "a": 0, "k": [375, 375] }
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0, 0, 0, 0] },
+                  "nm": "Fill1",
+                  "o": { "a": 0, "k": 0 },
+                  "r": 1
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "nm": "Transform",
+                  "o": { "a": 0, "k": 100 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sa": { "a": 0, "k": 0 },
+                  "sk": { "a": 0, "k": 0 }
+                }
+              ],
+              "nm": "Combined-Shape-size",
+              "np": 3
+            }
+          ],
+          "sr": 1,
+          "st": 0,
+          "tt": 0
+        },
+        {
+          "ty": 4,
+          "ao": 0,
+          "ddd": 0,
+          "ind": 11,
+          "ip": 0,
+          "ks": {
+            "a": { "a": 0, "k": [0, 0] },
+            "o": { "a": 0, "k": 100 },
+            "p": { "a": 0, "k": [0, 0] },
+            "r": { "a": 0, "k": 0 },
+            "s": { "a": 0, "k": [100, 100] }
+          },
+          "nm": "Combined-Shape-stroke",
+          "op": 61,
+          "parent": 15,
+          "shapes": [
+            {
+              "ty": "gr",
+              "cix": 2,
+              "it": [
+                {
+                  "ty": "sh",
+                  "ind": 0,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -1.5774979571739018],
+                        [0, 0],
+                        [0, 0],
+                        [0, -4.1410576386918905],
+                        [0.9255199999998638, -1.2470810337555633],
+                        [0, 0],
+                        [0, 0],
+                        [0.8663779999999406, -0.060411534501071174],
+                        [0, 0],
+                        [0, 0],
+                        [0, 1.5774239565191124],
+                        [0, 0],
+                        [0, 0],
+                        [0, 4.140773636179105],
+                        [-0.9253779999999092, 1.2470810337555918],
+                        [0, 0],
+                        [0, 0],
+                        [-0.9496219999999482, 0]
+                      ],
+                      "o": [
+                        [1.5779769999999473, 0],
+                        [0, 0],
+                        [0, 0],
+                        [4.14215999999999, 0],
+                        [0, 1.671847791949645],
+                        [0, 0],
+                        [0, 0],
+                        [-0.4826290000000597, 0.661415851986078],
+                        [0, 0],
+                        [0, 0],
+                        [-1.5779769999999473, 0],
+                        [0, 0],
+                        [0, 0],
+                        [-4.142126999999958, 0],
+                        [0, -1.6721317944625582],
+                        [0, 0],
+                        [0, 0],
+                        [0.5194710000000526, -0.7124533035483542],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [72.142911, 0],
+                        [75, 2.8563202717656835],
+                        [75, 67.44501973095933],
+                        [142.5, 67.44501973095933],
+                        [150, 74.94310207148214],
+                        [148.52722000000006, 79.40599555766988],
+                        [145.63866000000002, 83.46085143367749],
+                        [80.16748600000005, 171.86465860097266],
+                        [78.05883900000003, 173.03298993797728],
+                        [77.857089, 173.04],
+                        [77.857089, 173.04],
+                        [75, 170.18373672873858],
+                        [75, 105.5949792690318],
+                        [7.5, 105.5949792690318],
+                        [0, 98.09718193103066],
+                        [1.4727789999999457, 93.63400444233007],
+                        [4.361228999999984, 89.57914756631368],
+                        [69.83251399999996, 1.1754323998324296],
+                        [72.142911, 0]
+                      ]
+                    }
+                  },
+                  "nm": "Combined-Shape-path"
+                },
+                {
+                  "ty": "st",
+                  "c": {
+                    "a": 0,
+                    "k": [0.24313725490196078, 0.8117647058823529, 0.5568627450980392, 1]
+                  },
+                  "d": [{ "n": "o", "nm": "offset", "v": { "a": 0, "k": 0 } }],
+                  "lc": 1,
+                  "lj": 1,
+                  "ml": 4,
+                  "nm": "Stroke1",
+                  "o": { "a": 0, "k": 100 },
+                  "w": { "a": 0, "k": 7 }
+                },
+                {
+                  "ty": "tm",
+                  "e": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "i": { "x": [0.58], "y": [1] },
+                        "o": { "x": [0.42], "y": [0] },
+                        "s": [0],
+                        "t": 0
+                      },
+                      {
+                        "i": { "x": [0.58], "y": [1] },
+                        "o": { "x": [0.42], "y": [0] },
+                        "s": [100],
+                        "t": 30
+                      },
+                      {
+                        "i": { "x": [1], "y": [1] },
+                        "o": { "x": [0], "y": [0] },
+                        "s": [100],
+                        "t": 60
+                      }
+                    ]
+                  },
+                  "m": 2,
+                  "nm": "TrimPaths1",
+                  "o": { "a": 0, "k": 0 },
+                  "s": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "i": { "x": [1], "y": [1] },
+                        "o": { "x": [0], "y": [0] },
+                        "s": [0],
+                        "t": 0
+                      },
+                      {
+                        "i": { "x": [0.58], "y": [1] },
+                        "o": { "x": [0.42], "y": [0] },
+                        "s": [0],
+                        "t": 27
+                      },
+                      {
+                        "i": { "x": [0.58], "y": [1] },
+                        "o": { "x": [0.42], "y": [0] },
+                        "s": [100],
+                        "t": 60
+                      }
+                    ]
+                  }
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "nm": "Transform",
+                  "o": { "a": 0, "k": 100 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sa": { "a": 0, "k": 0 },
+                  "sk": { "a": 0, "k": 0 }
+                }
+              ],
+              "nm": "Combined-Shape-stroke",
+              "np": 3
+            }
+          ],
+          "sr": 1,
+          "st": 0,
+          "tt": 0
+        },
+        {
+          "ty": 4,
+          "ao": 0,
+          "ddd": 0,
+          "ind": 14,
+          "ip": 0,
+          "ks": {
+            "a": { "a": 0, "k": [0, 0] },
+            "o": { "a": 0, "k": 100 },
+            "p": { "a": 0, "k": [0, 0] },
+            "r": { "a": 0, "k": 0 },
+            "s": { "a": 0, "k": [100, 100] }
+          },
+          "nm": "Combined-Shape-content",
+          "op": 61,
+          "parent": 15,
+          "shapes": [
+            {
+              "ty": "gr",
+              "cix": 2,
+              "it": [
+                {
+                  "ty": "sh",
+                  "ind": 0,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "c": true,
+                      "i": [
+                        [0, 0],
+                        [0, -1.5774979571739018],
+                        [0, 0],
+                        [0, 0],
+                        [0, -4.1410576386918905],
+                        [0.9255199999998638, -1.2470810337555633],
+                        [0, 0],
+                        [0, 0],
+                        [0.8663779999999406, -0.060411534501071174],
+                        [0, 0],
+                        [0, 0],
+                        [0, 1.5774239565191124],
+                        [0, 0],
+                        [0, 0],
+                        [0, 4.140773636179105],
+                        [-0.9253779999999092, 1.2470810337555918],
+                        [0, 0],
+                        [0, 0],
+                        [-0.9496219999999482, 0]
+                      ],
+                      "o": [
+                        [1.5779769999999473, 0],
+                        [0, 0],
+                        [0, 0],
+                        [4.14215999999999, 0],
+                        [0, 1.671847791949645],
+                        [0, 0],
+                        [0, 0],
+                        [-0.4826290000000597, 0.661415851986078],
+                        [0, 0],
+                        [0, 0],
+                        [-1.5779769999999473, 0],
+                        [0, 0],
+                        [0, 0],
+                        [-4.142126999999958, 0],
+                        [0, -1.6721317944625582],
+                        [0, 0],
+                        [0, 0],
+                        [0.5194710000000526, -0.7124533035483542],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [72.142911, 0],
+                        [75, 2.8563202717656835],
+                        [75, 67.44501973095933],
+                        [142.5, 67.44501973095933],
+                        [150, 74.94310207148214],
+                        [148.52722000000006, 79.40599555766988],
+                        [145.63866000000002, 83.46085143367749],
+                        [80.16748600000005, 171.86465860097266],
+                        [78.05883900000003, 173.03298993797728],
+                        [77.857089, 173.04],
+                        [77.857089, 173.04],
+                        [75, 170.18373672873858],
+                        [75, 105.5949792690318],
+                        [7.5, 105.5949792690318],
+                        [0, 98.09718193103066],
+                        [1.4727789999999457, 93.63400444233007],
+                        [4.361228999999984, 89.57914756631368],
+                        [69.83251399999996, 1.1754323998324296],
+                        [72.142911, 0]
+                      ]
+                    }
+                  },
+                  "nm": "Combined-Shape-path"
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0, 0, 0, 1] },
+                  "nm": "Fill1",
+                  "o": { "a": 0, "k": 0 },
+                  "r": 1
+                },
+                {
+                  "ty": "tr",
+                  "a": { "a": 0, "k": [0, 0] },
+                  "nm": "Transform",
+                  "o": { "a": 0, "k": 100 },
+                  "p": { "a": 0, "k": [0, 0] },
+                  "r": { "a": 0, "k": 0 },
+                  "s": { "a": 0, "k": [100, 100] },
+                  "sa": { "a": 0, "k": 0 },
+                  "sk": { "a": 0, "k": 0 }
+                }
+              ],
+              "nm": "Combined-Shape-content",
+              "np": 3
+            }
+          ],
+          "sr": 1,
+          "st": 0,
+          "tt": 0
+        }
+      ]
+    }
+  ],
+  "ddd": 0,
+  "fonts": { "list": [] },
+  "fr": 30,
+  "h": 375,
+  "ip": 0,
+  "layers": [
+    {
+      "ty": 0,
+      "ao": 0,
+      "ddd": 0,
+      "h": 375,
+      "ind": 10,
+      "ip": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, 0] },
+        "o": { "a": 0, "k": 100 },
+        "p": { "a": 0, "k": [0, 0] },
+        "r": { "a": 0, "k": 0 },
+        "s": { "a": 0, "k": [100, 100] }
+      },
+      "nm": "Combined-Shape-composition",
+      "op": 61,
+      "refId": "comp_Combined-Shape_BF73096D-B400-4871-BC74-C00F039296BF",
+      "sr": 1,
+      "st": 0,
+      "tt": 0,
+      "w": 375
+    },
+    {
+      "ty": 4,
+      "ao": 0,
+      "ddd": 0,
+      "ind": 2,
+      "ip": 0,
+      "ks": {
+        "a": { "a": 0, "k": [0, 0] },
+        "o": { "a": 0, "k": 100 },
+        "p": { "a": 0, "k": [0, 0] },
+        "r": { "a": 0, "k": 0 },
+        "s": { "a": 0, "k": [100, 100] }
+      },
+      "nm": "Scene-background",
+      "op": 61,
+      "shapes": [
+        {
+          "ty": "gr",
+          "cix": 2,
+          "it": [
+            {
+              "ty": "rc",
+              "d": 1,
+              "nm": "Scene-background",
+              "p": { "a": 0, "k": [187.5, 187.5] },
+              "r": { "a": 0, "k": 0 },
+              "s": { "a": 0, "k": [375, 375] }
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.9440000000000001, 0.968, 1, 1] },
+              "nm": "Fill1",
+              "o": { "a": 0, "k": 0 },
+              "r": 1
+            },
+            {
+              "ty": "tr",
+              "a": { "a": 0, "k": [0, 0] },
+              "nm": "Transform",
+              "o": { "a": 0, "k": 100 },
+              "p": { "a": 0, "k": [0, 0] },
+              "r": { "a": 0, "k": 0 },
+              "s": { "a": 0, "k": [100, 100] },
+              "sa": { "a": 0, "k": 0 },
+              "sk": { "a": 0, "k": 0 }
+            }
+          ],
+          "nm": "Scene-background",
+          "np": 3
+        }
+      ],
+      "sr": 1,
+      "st": 0,
+      "tt": 0
+    }
+  ],
+  "meta": { "a": "", "d": "OutlineTraceLoader(Empty)", "g": "Flow1.8.6", "k": "", "tc": "" },
+  "nm": "OutlineTraceLoader(Empty)",
+  "op": 61,
+  "v": "5.6.4",
+  "w": 375
+}