feat(ceremony): add counter

unionlabs · Sep 15, 2024 · c3f6816 · c3f6816
1 parent 95f6f60
commit c3f6816
Show file tree

Hide file tree

Showing 13 changed files with 352 additions and 1 deletion.
diff --git a/ceremony/src/lib/components/Counter/index.svelte b/ceremony/src/lib/components/Counter/index.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+import Zero from "./numbers/zero.svelte"
+import One from "./numbers/one.svelte"
+import Two from "./numbers/two.svelte"
+import Three from "./numbers/three.svelte"
+import Four from "./numbers/four.svelte"
+import Five from "./numbers/five.svelte"
+import Six from "./numbers/six.svelte"
+import Seven from "./numbers/seven.svelte"
+import Eight from "./numbers/eight.svelte"
+import Nine from "./numbers/nine.svelte"
+import H4 from "$lib/components/typography/H4.svelte"
+
+type Props = {
+  targetTimestamp: number
+}
+
+const { targetTimestamp }: Props = $props()
+
+let hours = $state("00")
+let minutes = $state("00")
+let seconds = $state("00")
+
+const components = [Zero, One, Two, Three, Four, Five, Six, Seven, Eight, Nine]
+
+let interval: ReturnType<typeof setInterval>
+
+function updateCountdown(): void {
+  const now: number = Math.floor(Date.now() / 1000)
+  const distance: number = targetTimestamp - now
+
+  if (distance < 0) {
+    clearInterval(interval)
+    hours = minutes = seconds = "00"
+    return
+  }
+
+  hours = Math.floor(distance / 3600)
+    .toString()
+    .padStart(2, "0")
+  minutes = Math.floor((distance % 3600) / 60)
+    .toString()
+    .padStart(2, "0")
+  seconds = Math.floor(distance % 60)
+    .toString()
+    .padStart(2, "0")
+}
+
+$effect(() => {
+  updateCountdown()
+  interval = setInterval(updateCountdown, 1000)
+
+  return () => {
+    clearInterval(interval)
+  }
+})
+</script>
+
+<div class="p-8 bg-gradient-to-t from-transparent via-black/70 to-transparent backdrop-blur w-full flex items-center justify-center flex-col min-h-48">
+  <div class="flex flex-col md:flex-row  justify-center items-center gap-8">
+    {@render pair(hours, 'hours')}
+    {@render pair(minutes, 'minutes')}
+    {@render pair(seconds, 'seconds')}
+  </div>
+</div>
+
+{#snippet pair(time: string, timeType: string)}
+<div>
+  <div class="flex">
+    {#each time.split('') as digit, index (index + time)}
+      <div class="w-20 flex items-center justify-center text-white rounded mb-2">
+        {#if /^[0-9]$/.test(digit)}
+          {@const Component = components[parseInt(digit)]}
+          <Component/>
+        {/if}
+      </div>
+    {/each}
+  </div>
+  <H4>{timeType}</H4>
+</div>
+{/snippet}
diff --git a/ceremony/src/lib/components/Counter/numbers/eight.svelte b/ceremony/src/lib/components/Counter/numbers/eight.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+<svg class="{className}" viewBox="0 0 98 145" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-elu2rkv2p7-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-elu2rkv2p7-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <path d="M30.5,144.5 C24.5,144.5 19.2333333,143.266667 14.7,140.8 C10.1666667,138.333333 6.66666667,134.833333 4.2,130.3 C1.73333333,125.766667 0.5,120.5 0.5,114.5 L0.5,97.834375 C0.5,92.3677083 1.5109375,87.6677083 3.5328125,83.734375 C5.5546875,79.8010417 8.065625,76.7677083 11.065625,74.634375 C14.065625,72.5010417 17.0770833,71.234375 20.1,70.834375 L20.1,69.365625 C17.4770833,68.7885417 14.8546875,67.4557292 12.2328125,65.3671875 C9.6109375,63.2786458 7.44427083,60.4119792 5.7328125,56.7671875 C4.02135417,53.1223958 3.165625,48.8114583 3.165625,43.834375 L3.165625,30.5 C3.165625,24.5 4.39895833,19.2333333 6.865625,14.7 C9.33229167,10.1666667 12.8322917,6.66666667 17.365625,4.2 C21.8989583,1.73333333 27.165625,0.5 33.165625,0.5 L64.83125,0.5 C70.83125,0.5 76.0979167,1.73333333 80.63125,4.2 C85.1645833,6.66666667 88.6645833,10.1666667 91.13125,14.7 C93.5979167,19.2333333 94.83125,24.5 94.83125,30.5 L94.83125,43.834375 C94.83125,48.8114583 93.9760417,53.1223958 92.265625,56.7671875 C90.5552083,60.4119792 88.3885417,63.2786458 85.765625,65.3671875 C83.1427083,67.4557292 80.5208333,68.7885417 77.9,69.365625 L77.9,70.834375 C80.9208333,71.234375 83.93125,72.5010417 86.93125,74.634375 C89.93125,76.7677083 92.4427083,79.8010417 94.465625,83.734375 C96.4885417,87.6677083 97.5,92.3677083 97.5,97.834375 L97.5,114.5 C97.5,120.5 96.2666667,125.766667 93.8,130.3 C91.3333333,134.833333 87.8333333,138.333333 83.3,140.8 C78.7666667,143.266667 73.5,144.5 67.5,144.5 L30.5,144.5 Z M57.365625,117.834375 C60.609375,117.834375 63.109375,116.956771 64.865625,115.201563 C66.621875,113.446354 67.5,110.945833 67.5,107.7 L67.5,93.965625 C67.5,90.721875 66.621875,88.2223958 64.865625,86.4671875 C63.109375,84.7119792 60.609375,83.834375 57.365625,83.834375 L40.63125,83.834375 C37.3875,83.834375 34.8875,84.7119792 33.13125,86.4671875 C31.375,88.2223958 30.496875,90.721875 30.496875,93.965625 L30.496875,107.7 C30.496875,110.945833 31.375,113.446354 33.13125,115.201563 C34.8875,116.956771 37.3875,117.834375 40.63125,117.834375 L57.365625,117.834375 Z M54.7,57.834375 C57.94375,57.834375 60.44375,56.95625 62.2,55.2 C63.95625,53.44375 64.834375,50.94375 64.834375,47.7 L64.834375,37.3 C64.834375,34.0541667 63.95625,31.5536458 62.2,29.7984375 C60.44375,28.0432292 57.94375,27.165625 54.7,27.165625 L43.3,27.165625 C40.0541667,27.165625 37.5536458,28.0432292 35.7984375,29.7984375 C34.0432292,31.5536458 33.165625,34.0541667 33.165625,37.3 L33.165625,47.7 C33.165625,50.94375 34.0432292,53.44375 35.7984375,55.2 C37.5536458,56.95625 40.0541667,57.834375 43.3,57.834375 L54.7,57.834375 Z"
+          id="Shape" stroke="url(#linearGradient-elu2rkv2p7-2)" fill="url(#linearGradient-elu2rkv2p7-1)"
+          fill-rule="nonzero"></path>
+  </g>
+</svg>
diff --git a/ceremony/src/lib/components/Counter/numbers/five.svelte b/ceremony/src/lib/components/Counter/numbers/five.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+<svg class="{className}" viewBox="0 0 90.665625 141" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-opv6ixb_aj-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-opv6ixb_aj-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <path d="M0.5,140.5 L0.5,113.16875 L50.034375,113.16875 C53.278125,113.16875 55.778125,112.290625 57.534375,110.534375 C59.290625,108.778125 60.16875,106.278125 60.16875,103.034375 L60.16875,89.3 C60.16875,86.05625 59.290625,83.55625 57.534375,81.8 C55.778125,80.04375 53.278125,79.165625 50.034375,79.165625 L2.5,79.165625 L2.5,0.5 L86.165625,0.5 L86.165625,19.165625 L77.5,27.83125 L32.83125,27.83125 L32.83125,52.5 L60.165625,52.5 C66.165625,52.5 71.4322917,53.7333333 75.965625,56.2 C80.4989583,58.6666667 83.9989583,62.1666667 86.465625,66.7 C88.9322917,71.2333333 90.165625,76.5 90.165625,82.5 L90.165625,110.5 C90.165625,116.5 88.9322917,121.766667 86.465625,126.3 C83.9989583,130.833333 80.4989583,134.333333 75.965625,136.8 C71.4322917,139.266667 66.165625,140.5 60.165625,140.5 L0.5,140.5 Z"
+          id="Path" stroke="url(#linearGradient-opv6ixb_aj-2)" fill="url(#linearGradient-opv6ixb_aj-1)"
+          fill-rule="nonzero"></path>
+  </g>
+</svg>
diff --git a/ceremony/src/lib/components/Counter/numbers/four.svelte b/ceremony/src/lib/components/Counter/numbers/four.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+
+<svg class="{className}" viewBox="0 0 105.665625 141" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-q8wv9ww4od-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-q8wv9ww4od-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <polygon id="Path" stroke="url(#linearGradient-q8wv9ww4od-2)" fill="url(#linearGradient-q8wv9ww4od-1)"
+             fill-rule="nonzero"
+             points="59.834375 140.5 59.834375 111.834375 0.5 111.834375 0.5 85.834375 43.165625 0.5 66.83125 0.5 66.83125 15.165625 32.83125 83.5 32.83125 84.5 62.165625 84.5 62.165625 54.5 90.496875 54.5 90.496875 84.5 105.165625 84.5 105.165625 111.834375 90.496875 111.834375 90.496875 140.5"></polygon>
+  </g>
+</svg>
diff --git a/ceremony/src/lib/components/Counter/numbers/nine.svelte b/ceremony/src/lib/components/Counter/numbers/nine.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+
+<svg class="{className}" viewBox="0 0 96.66875 143" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-u_7s8q3k8g-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-u_7s8q3k8g-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <path d="M21.5,142.5 L21.5,127.834375 L49.834375,89.5 L49.834375,88.5 C48.634375,88.5 47.3791667,88.5 46.06875,88.5 C44.7583333,88.5 43.503125,88.5 42.303125,88.5 L30.5,88.5 C24.5,88.5 19.2333333,87.2666667 14.7,84.8 C10.1666667,82.3333333 6.66666667,78.8333333 4.2,74.3 C1.73333333,69.7666667 0.5,64.5 0.5,58.5 L0.5,30.5 C0.5,24.5 1.73333333,19.2333333 4.2,14.7 C6.66666667,10.1666667 10.1666667,6.66666667 14.7,4.2 C19.2333333,1.73333333 24.5,0.5 30.5,0.5 L66.16875,0.5 C72.16875,0.5 77.4354167,1.73333333 81.96875,4.2 C86.5020833,6.66666667 90.0020833,10.1666667 92.46875,14.7 C94.9354167,19.2333333 96.16875,24.5 96.16875,30.5 L96.16875,59.834375 C96.16875,65.078125 95.3130208,69.9109375 93.6015625,74.3328125 C91.8901042,78.7546875 88.7458333,84.14375 84.16875,90.5 L46.834375,142.5 L21.5,142.5 Z M56.034375,63.16875 C59.2802083,63.16875 61.7807292,62.290625 63.5359375,60.534375 C65.2911458,58.778125 66.16875,56.278125 66.16875,53.034375 L66.16875,37.965625 C66.16875,34.721875 65.2911458,32.221875 63.5359375,30.465625 C61.7807292,28.709375 59.2802083,27.83125 56.034375,27.83125 L40.634375,27.83125 C37.3885417,27.83125 34.8880208,28.709375 33.1328125,30.465625 C31.3776042,32.221875 30.5,34.721875 30.5,37.965625 L30.5,53.034375 C30.5,56.278125 31.3776042,58.778125 33.1328125,60.534375 C34.8880208,62.290625 37.3885417,63.16875 40.634375,63.16875 L56.034375,63.16875 Z"
+          id="Shape" stroke="url(#linearGradient-u_7s8q3k8g-2)" fill="url(#linearGradient-u_7s8q3k8g-1)"
+          fill-rule="nonzero"></path>
+  </g>
+</svg>
diff --git a/ceremony/src/lib/components/Counter/numbers/one.svelte b/ceremony/src/lib/components/Counter/numbers/one.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+<svg class="{className}" viewBox="0 0 79 141" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-_6uy8zxt78-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-_6uy8zxt78-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <polygon id="Path" stroke="url(#linearGradient-_6uy8zxt78-2)" fill="url(#linearGradient-_6uy8zxt78-1)"
+             fill-rule="nonzero"
+             points="0.5 140.5 0.5 113.16875 24.5 113.16875 24.5 38.5 1.36875 38.5 1.36875 12.5 24.5 12.5 24.5 0.5 54.5 0.5 54.5 113.16875 78.5 113.16875 78.5 140.5"></polygon>
+  </g>
+</svg>
diff --git a/ceremony/src/lib/components/Counter/numbers/seven.svelte b/ceremony/src/lib/components/Counter/numbers/seven.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+<svg class="{className}" viewBox="0 0 91 141" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-u0wls81gn--1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-u0wls81gn--2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <polygon id="Path" stroke="url(#linearGradient-u0wls81gn--2)" fill="url(#linearGradient-u0wls81gn--1)"
+             fill-rule="nonzero"
+             points="18.5 140.5 18.5 125.834375 56.834375 29.83125 56.834375 28.5 0.5 28.5 0.5 0.5 90.5 0.5 90.5 26.5 45.165625 140.5"></polygon>
+  </g>
+</svg>
diff --git a/ceremony/src/lib/components/Counter/numbers/six.svelte b/ceremony/src/lib/components/Counter/numbers/six.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+<svg class="{className}" viewBox="0 0 96.665625 143" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-plxl909kbk-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-plxl909kbk-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <path d="M30.5,142.5 C24.5,142.5 19.2333333,141.266667 14.7,138.8 C10.1666667,136.333333 6.66666667,132.833333 4.2,128.3 C1.73333333,123.766667 0.5,118.5 0.5,112.5 L0.5,83.165625 C0.5,77.921875 1.36666667,73.0776042 3.1,68.6328125 C4.83333333,64.1880208 7.96666667,58.8104167 12.5,52.5 L49.834375,0.5 L75.165625,0.5 L75.165625,15.165625 L46.83125,53.5 L46.83125,54.5 C48.03125,54.5 49.2869792,54.5 50.5984375,54.5 C51.9098958,54.5 53.165625,54.5 54.365625,54.5 L66.165625,54.5 C72.165625,54.5 77.4322917,55.7333333 81.965625,58.2 C86.4989583,60.6666667 89.9989583,64.1666667 92.465625,68.7 C94.9322917,73.2333333 96.165625,78.5 96.165625,84.5 L96.165625,112.5 C96.165625,118.5 94.9322917,123.766667 92.465625,128.3 C89.9989583,132.833333 86.4989583,136.333333 81.965625,138.8 C77.4322917,141.266667 72.165625,142.5 66.165625,142.5 L30.5,142.5 Z M56.034375,115.16875 C59.278125,115.16875 61.778125,114.290625 63.534375,112.534375 C65.290625,110.778125 66.16875,108.278125 66.16875,105.034375 L66.16875,89.965625 C66.16875,86.721875 65.290625,84.221875 63.534375,82.465625 C61.778125,80.709375 59.278125,79.83125 56.034375,79.83125 L40.634375,79.83125 C37.3885417,79.83125 34.8880208,80.709375 33.1328125,82.465625 C31.3776042,84.221875 30.5,86.721875 30.5,89.965625 L30.5,105.034375 C30.5,108.278125 31.3776042,110.778125 33.1328125,112.534375 C34.8880208,114.290625 37.3885417,115.16875 40.634375,115.16875 L56.034375,115.16875 Z"
+          id="Shape" stroke="url(#linearGradient-plxl909kbk-2)" fill="url(#linearGradient-plxl909kbk-1)"
+          fill-rule="nonzero"></path>
+  </g>
+</svg>
diff --git a/ceremony/src/lib/components/Counter/numbers/three.svelte b/ceremony/src/lib/components/Counter/numbers/three.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+<svg class="{className}" viewBox="0 0 92.66875 141" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-nr-9z_q45a-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-nr-9z_q45a-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <path d="M0.5,140.5 L0.5,113.16875 L51.36875,113.16875 C54.6125,113.16875 57.1125,112.290625 58.86875,110.534375 C60.625,108.778125 61.503125,106.278125 61.503125,103.034375 L61.503125,93.3 C61.503125,90.05625 60.625,87.55625 58.86875,85.8 C57.1125,84.04375 54.6125,83.165625 51.36875,83.165625 L22.834375,83.165625 L22.834375,59.834375 L50.834375,29.165625 L50.834375,27.83125 L8.7,27.83125 L0.5,19.63125 L0.5,0.5 L86.834375,0.5 L86.834375,25.165625 L57.765625,57.165625 L57.765625,58.5 L63.165625,58.5 C68.9447917,58.5 74.0234375,59.7109375 78.4015625,62.1328125 C82.7796875,64.5546875 86.16875,67.9770833 88.56875,72.4 C90.96875,76.8229167 92.16875,81.9677083 92.16875,87.834375 L92.16875,110.5 C92.16875,116.5 90.9354167,121.766667 88.46875,126.3 C86.0020833,130.833333 82.5020833,134.333333 77.96875,136.8 C73.4354167,139.266667 68.16875,140.5 62.16875,140.5 L0.5,140.5 Z"
+          id="Path" stroke="url(#linearGradient-nr-9z_q45a-2)" fill="url(#linearGradient-nr-9z_q45a-1)"
+          fill-rule="nonzero"></path>
+  </g>
+</svg>