mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
ticket backgrounds
This commit is contained in:
Francisco Mazzoni committed
1 parent
43b0b51322
commit
8beeba38dd
4 files changed
+143
-3
No files matched your search
@@ -15,6 +15,10 @@
|
||||
/* background: linear-gradient(#fff000, var(--gold-secondary)); */
|
||||
border: 1px solid #1c5f52;
|
||||
animation: blank-svg-shadow 2s ease-in-out infinite alternate;
|
||||
|
||||
background-image: url('/images/launchweek/green-ticket.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.visual--gold {
|
||||
@@ -22,10 +26,11 @@
|
||||
border-image-slice: 1;
|
||||
border-width: 2px;
|
||||
border-radius: 16px; */
|
||||
background-color: linear-gradient(#fff000, var(--gold-secondary));
|
||||
background-color: gold;
|
||||
background-color: linear-gradient(#fff000, #dea513);
|
||||
background-color: #dea513;
|
||||
border: 1px solid rgba(255, 255, 0, 0.629);
|
||||
animation: svg-shadow 2s ease-in-out infinite alternate;
|
||||
background-image: url('/images/launchweek/golden-ticket.svg');
|
||||
/* filter: drop-shadow(2.45223px 8.5828px 73.5669px #FFBD14); */
|
||||
/* border-image-source: linear-gradient(to left, var(--gold-secondary), var(--gold-accent)); */
|
||||
}
|
||||
|
||||
@@ -35,7 +35,9 @@ export default function TicketVisual({
|
||||
<div
|
||||
className={[styles.visual, golden ? styles['visual--gold'] : ''].join(' ')}
|
||||
// className={`rounded-2xl shadow-xl shadow-brand-500`}
|
||||
style={{ ['--size' as string]: size }}
|
||||
style={{
|
||||
['--size' as string]: size,
|
||||
}}
|
||||
>
|
||||
<div className={styles['horizontal-ticket']}>
|
||||
{/* {username ? <TicketColored golden={golden} /> : <TicketMono golden={golden} />} */}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
<svg width="434" height="315" viewBox="0 0 434 315" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_660_34464" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="34" y="150" width="141" height="126">
|
||||
<ellipse cx="104.25" cy="212.822" rx="59.54" ry="72.9115" transform="rotate(-61.8798 104.25 212.822)" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_660_34464)">
|
||||
<ellipse cx="91.9153" cy="222.503" rx="52.2627" ry="62.4336" transform="rotate(-61.8798 91.9153 222.503)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<g filter="url(#filter0_f_660_34464)">
|
||||
<path d="M21.6808 231.928C38.8704 253.899 60.2957 267.589 87.3289 277.842C124.323 281.847 160.487 257.356 150.45 217.864C141.681 183.353 116.187 168.152 77.8932 168.082C39.9327 171.553 25.6479 200.418 32.666 235.327L21.6808 231.928Z" fill="url(#paint0_linear_660_34464)" fill-opacity="0.6"/>
|
||||
</g>
|
||||
<ellipse cx="81.4928" cy="234.524" rx="42.7327" ry="52.3296" transform="rotate(-61.8798 81.4928 234.524)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="72.8304" cy="243.403" rx="30.8186" ry="41.1949" transform="rotate(-61.8798 72.8304 243.403)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="64.5837" cy="254.426" rx="20.3274" ry="29.7799" transform="rotate(-61.8798 64.5837 254.426)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<ellipse cx="110.501" cy="203.914" rx="70.3434" ry="86.3827" transform="rotate(-61.8798 110.501 203.914)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="104.25" cy="212.822" rx="59.54" ry="72.9115" transform="rotate(-61.8798 104.25 212.822)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="114.397" cy="193.837" rx="81.0647" ry="99.2702" transform="rotate(-61.8798 114.397 193.837)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="122.751" cy="184.278" rx="93.4342" ry="114.392" transform="rotate(-61.8798 122.751 184.278)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="130.95" cy="172.177" rx="107.969" ry="131.311" transform="rotate(-61.8798 130.95 172.177)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="136.996" cy="162.661" rx="122.268" ry="151.988" transform="rotate(-61.8798 136.996 162.661)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="140.488" cy="156.129" rx="133.57" ry="163.629" transform="rotate(-61.8798 140.488 156.129)" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="143.399" cy="148.888" rx="146.147" ry="177.743" transform="rotate(-61.8798 143.399 148.888)" stroke="#FFDF72" stroke-linecap="round" stroke-dasharray="0.2 2"/>
|
||||
<ellipse cx="143.398" cy="148.889" rx="157.084" ry="191.045" transform="rotate(-61.8798 143.398 148.889)" stroke="#FFDF72" stroke-linecap="round" stroke-dasharray="0.2 2"/>
|
||||
<ellipse cx="144.068" cy="146.636" rx="171.225" ry="208.244" transform="rotate(-61.8798 144.068 146.636)" stroke="#FFDF72" stroke-linecap="round" stroke-dasharray="0.2 2"/>
|
||||
<ellipse cx="144.064" cy="146.636" rx="181.765" ry="221.062" transform="rotate(-61.8798 144.064 146.636)" stroke="#FFDF72" stroke-linecap="round" stroke-dasharray="0.2 2"/>
|
||||
<mask id="mask1_660_34464" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-70" y="-59" width="433" height="405">
|
||||
<path d="M242.575 -16.8122C308.202 18.2551 499.682 265.335 193.697 345.533C187.474 296.498 141.078 274.246 120.307 275.46C106.058 276.292 90.6408 273.057 76.1901 265.335C54.8846 253.949 40.5208 235.395 35.7836 216.11C32.6242 203.249 14.1795 151.358 -69.7906 148.741C-69.7913 -143.039 176.94 -51.8711 242.575 -16.8122Z" fill="#ADEFF3"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_660_34464)">
|
||||
<path d="M309.472 314.256C284.499 294.503 225.875 261.371 158.429 263.668C141.405 264.248 99.7938 272.304 91.9531 273.021" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M38.7633 226.199C36.9867 204.538 21.7315 172.228 -13.668 158.73" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M39.3945 228.794C43.8784 187.088 22.4282 96.8672 -21.7031 74.2246" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M40.9688 233.941C51.5598 201.98 65.1169 113.217 34.6172 13.8633" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M46.8086 246.415C56.4017 226.829 81.1974 170.011 95.3052 116.162C109.413 62.3136 117.671 2.97391 120.036 -19.9648" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M65.3477 260.716C102.51 224.747 190.768 142.185 232.235 110.89C273.703 79.5952 341.445 33.5215 370.133 14.3965" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M74.6562 267.118C89.3248 256.468 141.15 224.141 208.436 190.759C275.722 157.378 353.395 140.991 383.821 136.971" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M85.2188 272.189C109.341 258.389 181.119 228.838 254.403 228.576C327.688 228.315 380.564 240.855 397.842 247.157" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M196.088 343.238C191.762 318.121 169.135 266.373 96.6133 274.933" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M241.887 -25.6777C202.442 37.1306 89.276 207.05 55.3711 253.732" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<mask id="mask2_660_34464" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-48" y="178" width="265" height="188">
|
||||
<path d="M-0.398959 326.065C155.262 414.688 258.382 331.466 198.973 293.479C171.664 282.165 146.453 271.059 129.63 274.299C112.973 277.508 93.8578 274.774 76.1884 265.332C40.6737 246.352 24.4473 207.456 39.9459 178.455C-102.374 170.119 -35.9137 307.086 -0.398959 326.065Z" fill="#ADEFF3"/>
|
||||
</mask>
|
||||
<g mask="url(#mask2_660_34464)">
|
||||
<path d="M66.7344 339.892C75.2448 327.613 92.1234 293.146 88.2624 267.172" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M-14.0547 240.386C-7.99594 236.844 8.25974 229.285 24.8125 227.384C41.3653 225.483 53.6124 233.396 57.6668 237.59" stroke="#FFDF72" stroke-width="0.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_f_660_34464)">
|
||||
<path d="M20.0955 224.648C41.9148 252.536 72.505 274.928 106.819 287.943C153.776 293.027 205.892 256.253 193.152 206.125C182.022 162.319 137.617 125.82 89.0098 125.731C40.4022 125.645 11.1834 180.337 20.0917 224.648H20.0955Z" fill="url(#paint1_linear_660_34464)" fill-opacity="0.6"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_660_34464" x="-113.197" y="33.2052" width="400.222" height="379.941" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="67.4384" result="effect1_foregroundBlur_660_34464"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_660_34464" x="-116.377" y="-9.14636" width="446.355" height="432.435" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="67.4384" result="effect1_foregroundBlur_660_34464"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_660_34464" x1="118.076" y1="120.152" x2="32.5429" y2="275.113" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFC700"/>
|
||||
<stop offset="1" stop-color="#FFEBB9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_660_34464" x1="148.98" y1="54.9662" x2="17.0834" y2="274.049" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFE600"/>
|
||||
<stop offset="1" stop-color="#FFE49F"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
@@ -0,0 +1,63 @@
|
||||
<svg width="434" height="315" viewBox="0 0 434 315" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_660_34120" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="34" y="150" width="141" height="126">
|
||||
<ellipse cx="104.25" cy="212.822" rx="59.54" ry="72.9115" transform="rotate(-61.8798 104.25 212.822)" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_660_34120)">
|
||||
<ellipse cx="91.9153" cy="222.503" rx="52.2627" ry="62.4336" transform="rotate(-61.8798 91.9153 222.503)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M21.6808 231.928C38.8704 253.899 60.2957 267.589 87.3289 277.842C124.323 281.847 160.487 257.356 150.45 217.864C141.681 183.353 116.187 168.152 77.8932 168.082C39.9327 171.553 25.6479 200.418 32.666 235.327L21.6808 231.928Z" fill="url(#paint0_linear_660_34120)" fill-opacity="0.7"/>
|
||||
<ellipse cx="81.4928" cy="234.524" rx="42.7327" ry="52.3296" transform="rotate(-61.8798 81.4928 234.524)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="72.8304" cy="243.403" rx="30.8186" ry="41.1949" transform="rotate(-61.8798 72.8304 243.403)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="64.5837" cy="254.426" rx="20.3274" ry="29.7799" transform="rotate(-61.8798 64.5837 254.426)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<ellipse cx="110.501" cy="203.914" rx="70.3434" ry="86.3827" transform="rotate(-61.8798 110.501 203.914)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="104.25" cy="212.822" rx="59.54" ry="72.9115" transform="rotate(-61.8798 104.25 212.822)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="114.397" cy="193.837" rx="81.0647" ry="99.2702" transform="rotate(-61.8798 114.397 193.837)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="122.751" cy="184.278" rx="93.4342" ry="114.392" transform="rotate(-61.8798 122.751 184.278)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="130.95" cy="172.177" rx="107.969" ry="131.311" transform="rotate(-61.8798 130.95 172.177)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="136.996" cy="162.661" rx="122.268" ry="151.988" transform="rotate(-61.8798 136.996 162.661)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="140.488" cy="156.129" rx="133.57" ry="163.629" transform="rotate(-61.8798 140.488 156.129)" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<ellipse cx="143.399" cy="148.888" rx="146.147" ry="177.743" transform="rotate(-61.8798 143.399 148.888)" stroke="#577F82" stroke-linecap="round" stroke-dasharray="0.2 2"/>
|
||||
<ellipse cx="143.398" cy="148.889" rx="157.084" ry="191.045" transform="rotate(-61.8798 143.398 148.889)" stroke="#577F82" stroke-linecap="round" stroke-dasharray="0.2 2"/>
|
||||
<ellipse cx="144.068" cy="146.636" rx="171.225" ry="208.244" transform="rotate(-61.8798 144.068 146.636)" stroke="#577F82" stroke-linecap="round" stroke-dasharray="0.2 2"/>
|
||||
<ellipse cx="144.064" cy="146.636" rx="181.765" ry="221.062" transform="rotate(-61.8798 144.064 146.636)" stroke="#577F82" stroke-linecap="round" stroke-dasharray="0.2 2"/>
|
||||
<mask id="mask1_660_34120" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-70" y="-59" width="433" height="405">
|
||||
<path d="M242.575 -16.8122C308.202 18.2551 499.682 265.335 193.697 345.533C187.474 296.498 141.078 274.246 120.307 275.46C106.058 276.292 90.6408 273.057 76.1901 265.335C54.8846 253.949 40.5208 235.395 35.7836 216.11C32.6242 203.249 14.1795 151.358 -69.7906 148.741C-69.7913 -143.039 176.94 -51.8711 242.575 -16.8122Z" fill="#ADEFF3"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_660_34120)">
|
||||
<path d="M309.472 314.256C284.499 294.503 225.875 261.371 158.429 263.668C141.405 264.248 99.7938 272.304 91.9531 273.021" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M38.7633 226.199C36.9867 204.538 21.7315 172.228 -13.668 158.73" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M39.3945 228.794C43.8784 187.088 22.4282 96.8672 -21.7031 74.2246" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M40.9688 233.941C51.5598 201.98 65.1169 113.217 34.6172 13.8633" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M46.8086 246.415C56.4017 226.829 81.1974 170.011 95.3052 116.162C109.413 62.3136 117.671 2.97391 120.036 -19.9648" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M65.3477 260.716C102.51 224.747 190.768 142.185 232.235 110.89C273.703 79.5952 341.445 33.5215 370.133 14.3965" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M74.6562 267.118C89.3248 256.468 141.15 224.141 208.436 190.759C275.722 157.378 353.395 140.991 383.821 136.971" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M85.2188 272.189C109.341 258.389 181.119 228.838 254.403 228.576C327.688 228.315 380.564 240.855 397.842 247.157" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M196.088 343.238C191.762 318.121 169.135 266.373 96.6133 274.933" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M241.887 -25.6777C202.442 37.1306 89.276 207.05 55.3711 253.732" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<mask id="mask2_660_34120" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-48" y="178" width="265" height="188">
|
||||
<path d="M-0.398959 326.065C155.262 414.688 258.382 331.466 198.973 293.479C171.664 282.165 146.453 271.059 129.63 274.299C112.973 277.508 93.8578 274.774 76.1884 265.332C40.6737 246.352 24.4473 207.456 39.9459 178.455C-102.374 170.119 -35.9137 307.086 -0.398959 326.065Z" fill="#ADEFF3"/>
|
||||
</mask>
|
||||
<g mask="url(#mask2_660_34120)">
|
||||
<path d="M66.7344 339.892C75.2448 327.613 92.1234 293.146 88.2624 267.172" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
<path d="M-14.0547 240.386C-7.99594 236.844 8.25974 229.285 24.8125 227.384C41.3653 225.483 53.6124 233.396 57.6668 237.59" stroke="#577F82" stroke-width="0.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g filter="url(#filter0_f_660_34120)">
|
||||
<path d="M20.0955 224.648C41.9148 252.536 72.505 274.928 106.819 287.943C153.776 293.027 205.892 256.253 193.152 206.125C182.022 162.319 137.617 125.82 89.0098 125.731C40.4022 125.645 11.1834 180.337 20.0917 224.648H20.0955Z" fill="url(#paint1_linear_660_34120)" fill-opacity="0.6"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_660_34120" x="-116.377" y="-9.14636" width="446.355" height="432.435" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="67.4384" result="effect1_foregroundBlur_660_34120"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_660_34120" x1="100.839" y1="198.228" x2="29.4546" y2="274.265" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#397D79" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#00DEA9" stop-opacity="0.91"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_660_34120" x1="148.98" y1="54.9662" x2="17.0834" y2="274.049" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#39617D" stop-opacity="0.32"/>
|
||||
<stop offset="1" stop-color="#00DEC3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
Reference in new issue
Block a user