blackskyweb.xyz / blacksky.community
Mirror — see github.com/blacksky-algorithms/blacksky.community
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

Further rebrand

Rudy Fraser dc3123f0 36674bda

+253 -162
assets/default-avatar.png

This is a binary file and will not be displayed.

assets/favicon.png

This is a binary file and will not be displayed.

assets/icon-android-foreground.png

This is a binary file and will not be displayed.

assets/icon-android-notification.png

This is a binary file and will not be displayed.

assets/logo.png

This is a binary file and will not be displayed.

assets/splash-android-icon-dark.png

This is a binary file and will not be displayed.

assets/splash-android-icon.png

This is a binary file and will not be displayed.

+13 -1
bskyembed/assets/logo.svg
··· 1 - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 320 286"><path fill="rgb(10,122,255)" d="M69.364 19.146c36.687 27.806 76.147 84.186 90.636 114.439 14.489-30.253 53.948-86.633 90.636-114.439C277.107-.917 320-16.44 320 32.957c0 9.865-5.603 82.875-8.889 94.729-11.423 41.208-53.045 51.719-90.071 45.357 64.719 11.12 81.182 47.953 45.627 84.785-80 82.874-106.667-44.333-106.667-44.333s-26.667 127.207-106.667 44.333c-35.555-36.832-19.092-73.665 45.627-84.785-37.026 6.362-78.648-4.149-90.071-45.357C5.603 115.832 0 42.822 0 32.957 0-16.44 42.893-.917 69.364 19.147Z"/></svg> 1 + <svg width="285" height="243" viewBox="0 0 285 243" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 + <g clip-path="url(#clip0_1011_989)"> 3 + <path d="M148.846 144.562C148.846 159.75 161.158 172.062 176.346 172.062H207.012V185.865H176.346C161.158 185.865 148.846 198.177 148.846 213.365V243.045H136.029V213.365C136.029 198.177 123.717 185.865 108.529 185.865H77.8633V172.062H108.529C123.717 172.062 136.029 159.75 136.029 144.562V113.896H148.846V144.562Z" fill="black"/> 4 + <path d="M170.946 31.8766C160.207 42.616 160.207 60.0281 170.946 70.7675L192.631 92.4516L182.871 102.212L161.186 80.5275C150.447 69.7881 133.035 69.7881 122.296 80.5275L101.309 101.514L92.2456 92.4509L113.232 71.4642C123.972 60.7248 123.972 43.3128 113.232 32.5733L91.5488 10.8899L101.309 1.12988L122.993 22.814C133.732 33.5533 151.144 33.5534 161.884 22.814L183.568 1.12988L192.631 10.1925L170.946 31.8766Z" fill="black"/> 5 + <path d="M79.0525 75.3259C75.1216 89.9962 83.8276 105.076 98.498 109.006L128.119 116.943L124.547 130.275L94.9267 122.338C80.2564 118.407 65.1772 127.113 61.2463 141.784L53.5643 170.453L41.1837 167.136L48.8654 138.467C52.7963 123.797 44.0902 108.718 29.4199 104.787L-0.201172 96.8497L3.37124 83.5173L32.9923 91.4542C47.6626 95.3851 62.7419 86.679 66.6728 72.0088L74.6098 42.3877L86.9895 45.7048L79.0525 75.3259Z" fill="black"/> 6 + <path d="M218.413 71.4229C222.344 86.093 237.423 94.7992 252.094 90.8683L281.715 82.9313L285.287 96.2628L255.666 104.2C240.995 108.131 232.29 123.21 236.22 137.88L243.902 166.55L231.522 169.867L223.841 141.198C219.91 126.528 204.831 117.822 190.16 121.753L160.539 129.69L156.967 116.357L186.588 108.42C201.258 104.49 209.964 89.4103 206.033 74.74L198.096 45.1189L210.476 41.8018L218.413 71.4229Z" fill="black"/> 7 + </g> 8 + <defs> 9 + <clipPath id="clip0_1011_989"> 10 + <rect width="285" height="243" fill="white"/> 11 + </clipPath> 12 + </defs> 13 + </svg>
-16
bskyogcard/src/components/Butterfly.tsx
··· 1 - import React from 'react' 2 - 3 - export function Butterfly(props: React.SVGAttributes<SVGSVGElement>) { 4 - return ( 5 - <svg 6 - xmlns="http://www.w3.org/2000/svg" 7 - fill="none" 8 - viewBox="0 0 568 501" 9 - {...props}> 10 - <path 11 - fill="currentColor" 12 - d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z" 13 - /> 14 - </svg> 15 - ) 16 - }
+37
bskyogcard/src/components/Cluster.tsx
··· 1 + import type React from 'react' 2 + 3 + export function Cluster(props: React.SVGAttributes<SVGSVGElement>) { 4 + return ( 5 + <svg 6 + width="285" 7 + height="243" 8 + viewBox="0 0 285 243" 9 + fill="none" 10 + xmlns="http://www.w3.org/2000/svg" 11 + {...props}> 12 + <g clipPath="url(#clip0_1011_1036)"> 13 + <path 14 + d="M148.846 144.562C148.846 159.75 161.158 172.062 176.346 172.062H207.012V185.865H176.346C161.158 185.865 148.846 198.177 148.846 213.365V243.045H136.029V213.365C136.029 198.177 123.717 185.865 108.529 185.865H77.8633V172.062H108.529C123.717 172.062 136.029 159.75 136.029 144.562V113.896H148.846V144.562Z" 15 + fill="white" 16 + /> 17 + <path 18 + d="M170.946 31.8766C160.207 42.616 160.207 60.0281 170.946 70.7675L192.631 92.4516L182.871 102.212L161.186 80.5275C150.447 69.7881 133.035 69.7881 122.296 80.5275L101.309 101.514L92.2456 92.4509L113.232 71.4642C123.972 60.7248 123.972 43.3128 113.232 32.5733L91.5488 10.8899L101.309 1.12988L122.993 22.814C133.732 33.5533 151.144 33.5534 161.884 22.814L183.568 1.12988L192.631 10.1925L170.946 31.8766Z" 19 + fill="white" 20 + /> 21 + <path 22 + d="M79.0525 75.3259C75.1216 89.9962 83.8276 105.076 98.498 109.006L128.119 116.943L124.547 130.275L94.9267 122.338C80.2564 118.407 65.1772 127.113 61.2463 141.784L53.5643 170.453L41.1837 167.136L48.8654 138.467C52.7963 123.797 44.0902 108.718 29.4199 104.787L-0.201172 96.8497L3.37124 83.5173L32.9923 91.4542C47.6626 95.3851 62.7419 86.679 66.6728 72.0088L74.6098 42.3877L86.9895 45.7048L79.0525 75.3259Z" 23 + fill="white" 24 + /> 25 + <path 26 + d="M218.413 71.4229C222.344 86.093 237.423 94.7992 252.094 90.8683L281.715 82.9313L285.287 96.2628L255.666 104.2C240.995 108.131 232.29 123.21 236.22 137.88L243.902 166.55L231.522 169.867L223.841 141.198C219.91 126.528 204.831 117.822 190.16 121.753L160.539 129.69L156.967 116.357L186.588 108.42C201.258 104.49 209.964 89.4103 206.033 74.74L198.096 45.1189L210.476 41.8018L218.413 71.4229Z" 27 + fill="white" 28 + /> 29 + </g> 30 + <defs> 31 + <clipPath id="clip0_1011_1036"> 32 + <rect width="285" height="243" fill="currentColor" /> 33 + </clipPath> 34 + </defs> 35 + </svg> 36 + ) 37 + }
+3 -4
bskyogcard/src/components/StarterPack.tsx
··· 1 1 /* eslint-disable bsky-internal/avoid-unwrapped-text */ 2 - import React from 'react' 3 - import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api' 2 + import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api' 4 3 5 - import {Butterfly} from './Butterfly.js' 4 + import {Cluster} from './Cluster.js' 6 5 import {Img} from './Img.js' 7 6 8 7 export const STARTERPACK_HEIGHT = 630 ··· 144 143 justifyContent: 'center', 145 144 padding: '30px 30px 10px', 146 145 }}> 147 - on <Butterfly width="65" style={{margin: '-7px 10px 0'}} /> Bluesky 146 + on <Cluster width="65" style={{margin: '-7px 10px 0'}} /> Blacksky 148 147 </div> 149 148 </div> 150 149 </div>
+11 -14
logo_v0.svg
··· 1 - <?xml version="1.0" encoding="UTF-8"?> 2 - <svg 3 - xmlns="http://www.w3.org/2000/svg" 4 - viewBox="0 0 512 512" 5 - width="512" 6 - height="512" 7 - aria-label="Blacksky logo" 8 - > 9 - <!-- 512 / 98.999 ≈ 5.17177; translate 9.90625 units first to centre vertically --> 10 - <g transform="translate(0 9.90625) scale(5.17177)"> 11 - <path 12 - fill="#000000" 13 - d="M32.5654 9.96191C32.5654 19.5056 40.0604 27.2986 49.4854 27.7764H49.5137C58.9386 27.2986 66.4336 19.5056 66.4336 9.96191V0H71.2002V9.96191C71.2002 19.8135 79.1865 27.7998 89.0381 27.7998H98.999V32.5654H89.0381C79.1865 32.5654 71.2002 40.5518 71.2002 50.4033V60.3652H66.4336V50.4033C66.4336 40.8547 58.9308 33.0583 49.499 32.5879C40.0677 33.0588 32.5655 40.8551 32.5654 50.4033V60.3652H60.3652V60.3662H0V60.3652H27.7998V50.4033C27.7997 40.5519 19.8134 32.5654 9.96191 32.5654H0V27.7998H9.96191C19.8135 27.7998 27.7998 19.8135 27.7998 9.96191V0H32.5654V9.96191Z" 14 - /> 1 + <svg width="285" height="243" viewBox="0 0 285 243" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 + <g clip-path="url(#clip0_1011_989)"> 3 + <path d="M148.846 144.562C148.846 159.75 161.158 172.062 176.346 172.062H207.012V185.865H176.346C161.158 185.865 148.846 198.177 148.846 213.365V243.045H136.029V213.365C136.029 198.177 123.717 185.865 108.529 185.865H77.8633V172.062H108.529C123.717 172.062 136.029 159.75 136.029 144.562V113.896H148.846V144.562Z" fill="black"/> 4 + <path d="M170.946 31.8766C160.207 42.616 160.207 60.0281 170.946 70.7675L192.631 92.4516L182.871 102.212L161.186 80.5275C150.447 69.7881 133.035 69.7881 122.296 80.5275L101.309 101.514L92.2456 92.4509L113.232 71.4642C123.972 60.7248 123.972 43.3128 113.232 32.5733L91.5488 10.8899L101.309 1.12988L122.993 22.814C133.732 33.5533 151.144 33.5534 161.884 22.814L183.568 1.12988L192.631 10.1925L170.946 31.8766Z" fill="black"/> 5 + <path d="M79.0525 75.3259C75.1216 89.9962 83.8276 105.076 98.498 109.006L128.119 116.943L124.547 130.275L94.9267 122.338C80.2564 118.407 65.1772 127.113 61.2463 141.784L53.5643 170.453L41.1837 167.136L48.8654 138.467C52.7963 123.797 44.0902 108.718 29.4199 104.787L-0.201172 96.8497L3.37124 83.5173L32.9923 91.4542C47.6626 95.3851 62.7419 86.679 66.6728 72.0088L74.6098 42.3877L86.9895 45.7048L79.0525 75.3259Z" fill="black"/> 6 + <path d="M218.413 71.4229C222.344 86.093 237.423 94.7992 252.094 90.8683L281.715 82.9313L285.287 96.2628L255.666 104.2C240.995 108.131 232.29 123.21 236.22 137.88L243.902 166.55L231.522 169.867L223.841 141.198C219.91 126.528 204.831 117.822 190.16 121.753L160.539 129.69L156.967 116.357L186.588 108.42C201.258 104.49 209.964 89.4103 206.033 74.74L198.096 45.1189L210.476 41.8018L218.413 71.4229Z" fill="black"/> 15 7 </g> 8 + <defs> 9 + <clipPath id="clip0_1011_989"> 10 + <rect width="285" height="243" fill="white"/> 11 + </clipPath> 12 + </defs> 16 13 </svg>
+28 -17
src/alf/themes.ts
··· 59 59 dark: Theme 60 60 dim: Theme 61 61 } { 62 + const BRAND = { 63 + black: '#000000', 64 + white: '#FFFFFF', 65 + primary: '#8B8BFF', 66 + primaryTint: '#DCDCFF', // very-light lavender 67 + secondary: '#d1fc51', 68 + secondaryTint: '#F1FECB', 69 + neutral: '#666666', 70 + negative: '#FF0000', // may be used directly when needed 71 + } as const 72 + 62 73 const color = { 63 74 like: '#ec4899', 64 - trueBlack: '#000000', 75 + trueBlack: BRAND.black, 65 76 66 77 gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`, 67 78 gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`, ··· 71 82 gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`, 72 83 gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`, 73 84 gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`, 74 - gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`, 85 + gray_600: BRAND.neutral, 75 86 gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`, 76 87 gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`, 77 88 gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`, ··· 79 90 gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`, 80 91 gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`, 81 92 82 - primary_25: `hsl(240, 100%, 97%)`, 83 - primary_50: `hsl(240, 100%, 95%)`, 84 - primary_100: `hsl(240, 100%, 90%)`, 85 - primary_200: `hsl(240, 100%, 80%)`, 86 - primary_300: `hsl(240, 100%, 70%)`, 87 - primary_400: `hsl(240, 100%, 58%)`, 88 - primary_500: `hsl(240, 100%, 45%)`, 89 - primary_600: `hsl(240, 100%, 38%)`, 90 - primary_700: `hsl(240, 100%, 32%)`, 91 - primary_800: `hsl(240, 100%, 25%)`, 92 - primary_900: `hsl(240, 100%, 18%)`, 93 - primary_950: `hsl(240, 100%, 10%)`, 94 - primary_975: `hsl(240, 100%, 7%)`, 93 + primary_25: BRAND.primaryTint, 94 + primary_50: `hsl(${hues.primary}, 99%, 90%)`, 95 + primary_100: `hsl(${hues.primary}, 99%, 84%)`, 96 + primary_200: `hsl(${hues.primary}, 99%, 78%)`, 97 + primary_300: `hsl(${hues.primary}, 99%, 77%)`, 98 + primary_400: `hsl(${hues.primary}, 99%, 77%)`, 99 + primary_500: BRAND.primary, 100 + primary_600: `hsl(${hues.primary}, 99%, 60%)`, 101 + primary_700: `hsl(${hues.primary}, 99%, 50%)`, 102 + primary_800: `hsl(${hues.primary}, 99%, 40%)`, 103 + primary_900: `hsl(${hues.primary}, 99%, 30%)`, 104 + primary_950: `hsl(${hues.primary}, 99%, 22%)`, 105 + primary_975: `hsl(${hues.primary}, 99%, 15%)`, 95 106 96 - green_25: `hsl(${hues.positive}, 82%, 97%)`, 107 + green_25: BRAND.secondaryTint, 97 108 green_50: `hsl(${hues.positive}, 82%, 95%)`, 98 109 green_100: `hsl(${hues.positive}, 82%, 90%)`, 99 110 green_200: `hsl(${hues.positive}, 82%, 80%)`, 100 - green_300: `hsl(${hues.positive}, 82%, 70%)`, 111 + green_300: BRAND.secondary, 101 112 green_400: `hsl(${hues.positive}, 82%, 60%)`, 102 113 green_500: `hsl(${hues.positive}, 82%, 50%)`, 103 114 green_600: `hsl(${hues.positive}, 82%, 42%)`,
+3 -3
src/alf/tokens.ts
··· 70 70 }, 71 71 sky: { 72 72 values: [ 73 - [0, '#8B8BFF'], 74 - [1, '#D2FC51'], 73 + [0, '#0A7AFF'], 74 + [1, '#59B9FF'], 75 75 ], 76 - hover_value: '#8B8BFF', 76 + hover_value: '#0A7AFF', 77 77 }, 78 78 midnight: { 79 79 values: [
+3 -3
src/alf/util/colorGeneration.ts
··· 1 1 import {logger} from '#/logger' 2 2 3 - export const BLUE_HUE = 211 4 - export const RED_HUE = 346 5 - export const GREEN_HUE = 152 3 + export const BLUE_HUE = 240 4 + export const RED_HUE = 0 5 + export const GREEN_HUE = 75 6 6 7 7 /** 8 8 * Smooth progression of lightness "stops" for generating HSL colors.
+2 -2
src/components/Link.tsx
··· 373 373 accessibilityLabel={label} 374 374 {...rest} 375 375 style={[ 376 - {color: t.palette.primary_500}, 376 + {color: t.palette.positive_300}, 377 377 hovered && 378 378 !disableUnderline && { 379 379 ...web({ 380 380 outline: 0, 381 381 textDecorationLine: 'underline', 382 382 textDecorationColor: 383 - flattenedStyle.color ?? t.palette.primary_500, 383 + flattenedStyle.color ?? t.palette.positive_300, 384 384 }), 385 385 }, 386 386 flattenedStyle,
+12 -31
src/lib/styles.ts
··· 1 - import { 2 - Dimensions, 3 - type StyleProp, 4 - StyleSheet, 5 - type TextStyle, 6 - } from 'react-native' 1 + import {Dimensions, type StyleProp, StyleSheet, type TextStyle} from 'react-native' 7 2 8 3 import {isWeb} from '#/platform/detection' 9 4 import {type Theme, type TypographyVariant} from './ThemeContext' ··· 25 20 gray7: '#26272D', 26 21 gray8: '#141417', 27 22 28 - blue0: '#E5E5FF', 29 - blue1: '#B2B2FF', 30 - blue2: '#7F7FFF', 31 - blue3: '#4C4CFE', 32 - blue4: '#1919FF', 33 - blue5: '#0000E5', 34 - blue6: '#0000B2', 35 - blue7: '#00007F', 23 + blue0: '#bfe1ff', 24 + blue1: '#8bc7fd', 25 + blue2: '#52acfe', 26 + blue3: '#0085ff', 27 + blue4: '#0062bd', 28 + blue5: '#034581', 29 + blue6: '#012561', 30 + blue7: '#001040', 36 31 37 32 red1: '#ffe6eb', 38 33 red2: '#fba2b2', ··· 66 61 } 67 62 68 63 export const gradients = { 69 - /* subtle button fills / backgrounds */ 70 - blueLight: { 71 - start: '#E5E5FF', // very-light lavender 72 - end: '#8B8BFF', // brand anchor 73 - }, 74 - 75 - /* primary FAB / call-to-action */ 76 - blue: { 77 - start: '#8B8BFF', // anchor 78 - end: '#4C4CFE', // vivid mid-purple 79 - }, 80 - 81 - /* banners, hero gradients, emphasis blocks */ 82 - blueDark: { 83 - start: '#4C4CFE', // mid-purple 84 - end: '#0000B2', // deep night-purple 85 - }, 64 + blueLight: {start: '#5A71FA', end: colors.blue3}, // buttons 65 + blue: {start: '#5E55FB', end: colors.blue3}, // fab 66 + blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner 86 67 } 87 68 88 69 /**
+29 -29
src/view/icons/Logo.tsx
··· 2 2 import {StyleSheet, type TextProps} from 'react-native' 3 3 import Svg, { 4 4 Defs, 5 + G, 5 6 LinearGradient, 6 7 Path, 7 8 type PathProps, 9 + Rect, 8 10 Stop, 9 11 type SvgProps, 10 12 } from 'react-native-svg' 11 13 12 14 import {colors} from '#/lib/styles' 13 15 14 - const ratio = 512 / 512 16 + const ratio = 243 / 285 15 17 16 18 type Props = { 17 19 fill?: PathProps['fill'] ··· 26 28 // @ts-ignore it's fiiiiine 27 29 const size = parseInt(rest.width || 32) 28 30 29 - // const isKawaii = useKawaiiMode() 30 - 31 - // if (isKawaii) { 32 - // return ( 33 - // <Image 34 - // source={ 35 - // size > 100 36 - // ? require('../../../assets/kawaii.png') 37 - // : require('../../../assets/kawaii_smol.png') 38 - // } 39 - // accessibilityLabel="Bluesky" 40 - // accessibilityHint="" 41 - // accessibilityIgnoresInvertColors 42 - // style={[{height: size, aspectRatio: 1.4}]} 43 - // /> 44 - // ) 45 - // } 46 - 47 31 return ( 48 32 <Svg 49 33 fill="none" 50 34 // @ts-ignore it's fiiiiine 51 35 ref={ref} 52 - viewBox="0 0 512 512" 36 + viewBox="0 0 285 243" 53 37 {...rest} 54 38 style={[{width: size, height: size * ratio}, styles]}> 55 39 {gradient && ( 56 40 <Defs> 57 41 <LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> 58 - <Stop offset="0" stopColor="#00007F" stopOpacity="1" /> 59 - <Stop offset="1" stopColor="#E5E5FF" stopOpacity="1" /> 42 + <Stop offset="0" stopColor="#8B8BFF" stopOpacity="1" /> 43 + <Stop offset="1" stopColor="#DCDCFF" stopOpacity="1" /> 60 44 </LinearGradient> 61 45 </Defs> 62 46 )} 63 47 64 - {/* Blacksky emblem */} 65 - <Path 66 - fill={gradient ? 'url(#sky)' : _fill /* fallback to solid colour */} 67 - /* 512 / 98.999 ≈ 5.17177 ; translate 9.90625 units to centre vertically */ 68 - transform="translate(0 9.90625) scale(5.17177)" 69 - d="M32.5654 9.96191C32.5654 19.5056 40.0604 27.2986 49.4854 27.7764H49.5137C58.9386 27.2986 66.4336 19.5056 66.4336 9.96191V0H71.2002V9.96191C71.2002 19.8135 79.1865 27.7998 89.0381 27.7998H98.999V32.5654H89.0381C79.1865 32.5654 71.2002 40.5518 71.2002 50.4033V60.3652H66.4336V50.4033C66.4336 40.8547 58.9308 33.0583 49.499 32.5879C40.0677 33.0588 32.5655 40.8551 32.5654 50.4033V60.3652H60.3652V60.3662H0V60.3652H27.7998V50.4033C27.7997 40.5519 19.8134 32.5654 9.96191 32.5654H0V27.7998H9.96191C19.8135 27.7998 27.7998 19.8135 27.7998 9.96191V0H32.5654V9.96191Z" 70 - /> 48 + <G clipPath="url(#clip0_1011_989)"> 49 + <Path 50 + d="M148.846 144.562C148.846 159.75 161.158 172.062 176.346 172.062H207.012V185.865H176.346C161.158 185.865 148.846 198.177 148.846 213.365V243.045H136.029V213.365C136.029 198.177 123.717 185.865 108.529 185.865H77.8633V172.062H108.529C123.717 172.062 136.029 159.75 136.029 144.562V113.896H148.846V144.562Z" 51 + fill={_fill} 52 + /> 53 + <Path 54 + d="M170.946 31.8766C160.207 42.616 160.207 60.0281 170.946 70.7675L192.631 92.4516L182.871 102.212L161.186 80.5275C150.447 69.7881 133.035 69.7881 122.296 80.5275L101.309 101.514L92.2456 92.4509L113.232 71.4642C123.972 60.7248 123.972 43.3128 113.232 32.5733L91.5488 10.8899L101.309 1.12988L122.993 22.814C133.732 33.5533 151.144 33.5534 161.884 22.814L183.568 1.12988L192.631 10.1925L170.946 31.8766Z" 55 + fill={_fill} 56 + /> 57 + <Path 58 + d="M79.0525 75.3259C75.1216 89.9962 83.8276 105.076 98.498 109.006L128.119 116.943L124.547 130.275L94.9267 122.338C80.2564 118.407 65.1772 127.113 61.2463 141.784L53.5643 170.453L41.1837 167.136L48.8654 138.467C52.7963 123.797 44.0902 108.718 29.4199 104.787L-0.201172 96.8497L3.37124 83.5173L32.9923 91.4542C47.6626 95.3851 62.7419 86.679 66.6728 72.0088L74.6098 42.3877L86.9895 45.7048L79.0525 75.3259Z" 59 + fill={_fill} 60 + /> 61 + <Path 62 + d="M218.413 71.4229C222.344 86.093 237.423 94.7992 252.094 90.8683L281.715 82.9313L285.287 96.2628L255.666 104.2C240.995 108.131 232.29 123.21 236.22 137.88L243.902 166.55L231.522 169.867L223.841 141.198C219.91 126.528 204.831 117.822 190.16 121.753L160.539 129.69L156.967 116.357L186.588 108.42C201.258 104.49 209.964 89.4103 206.033 74.74L198.096 45.1189L210.476 41.8018L218.413 71.4229Z" 63 + fill={_fill} 64 + /> 65 + </G> 66 + <Defs> 67 + <clipPath id="clip0_1011_989"> 68 + <Rect width="285" height="243" fill={_fill} /> 69 + </clipPath> 70 + </Defs> 71 71 </Svg> 72 72 ) 73 73 })
+99 -23
src/view/icons/Logotype.tsx
··· 1 - import Svg, {Path, type PathProps, type SvgProps} from 'react-native-svg' 1 + import Svg, { 2 + ClipPath, 3 + Defs, 4 + G, 5 + Path, 6 + type PathProps, 7 + Rect, 8 + type SvgProps, 9 + } from 'react-native-svg' 2 10 3 11 import {usePalette} from '#/lib/hooks/usePalette' 4 12 5 - const ratio = 74 / 197 // ≈ 0.375 (height ÷ width) 13 + const CONTENT_WIDTH = 642.827 14 + const CONTENT_HEIGHT = 243.324344 15 + const BOUND_TOP = -0.402344 // the minimum Y in your paths 16 + 17 + const ratio = CONTENT_HEIGHT / CONTENT_WIDTH 6 18 7 19 export function Logotype({ 8 20 fill, 9 21 ...rest 10 22 }: {fill?: PathProps['fill']} & SvgProps) { 11 23 const pal = usePalette('default') 12 - // @ts-ignore it's fiiiiine 13 - const size = parseInt(rest.width || 32) * 1.5 24 + const size = parseInt(rest.width as string, 10) || 32 14 25 15 26 return ( 16 27 <Svg 17 28 fill="none" 18 - viewBox="0 0 197 74" 19 - {...rest} 29 + viewBox={`0 0 ${CONTENT_WIDTH} ${CONTENT_HEIGHT}`} 20 30 width={size} 21 - height={Number(size) * ratio}> 22 - {/* Row 1 – “BLACKSKY” */} 23 - <Path 24 - fill={fill || pal.text.color} 25 - d="M6.35095 31.0002C4.28364 31.0002 2.47474 29.1913 2.47474 27.124V0.851953H7.64302V7.3123C7.64302 8.47516 8.6336 9.46575 9.79647 9.46575H17.5489C19.6162 9.46575 21.4251 11.2746 21.4251 13.342V27.124C21.4251 29.1913 19.6162 31.0002 17.5489 31.0002H6.35095ZM7.64302 22.8171C7.64302 25.1429 9.62419 27.124 11.9499 27.124C14.2756 27.124 16.2568 25.1429 16.2568 22.8171V17.6489C16.2568 15.3231 14.2756 13.342 11.9499 13.342C9.62419 13.342 7.64302 15.3231 7.64302 17.6489V22.8171ZM25.303 31.0002V0.851953H30.4713V31.0002H25.303ZM38.2338 31.0002C36.1665 31.0002 34.3576 29.1913 34.3576 27.124V23.7647C34.3576 22.3434 35.4343 20.7498 36.7694 20.233L45.4694 16.7875C47.0198 16.1845 46.6322 14.2033 44.9956 14.2033H34.616V9.46575H48.1396C50.207 9.46575 52.0158 11.2746 52.0158 13.342V27.124C52.0158 29.1913 50.207 31.0002 48.1396 31.0002H38.2338ZM39.9996 24.5399C39.9996 26.4349 41.6362 27.9854 43.5313 27.9854C45.3402 27.9854 46.8906 26.4349 46.8906 24.5399C46.8906 22.731 45.3402 21.0944 43.5313 21.0944C41.6362 21.0944 39.9996 22.731 39.9996 24.5399ZM59.7784 31.0002C57.711 31.0002 55.9022 29.1913 55.9022 27.124V13.342C55.9022 11.2746 57.711 9.46575 59.7784 9.46575H72.01V14.2033H63.6546C62.2333 14.2033 61.0704 15.3662 61.0704 16.7875V23.6785C61.0704 25.0998 62.2333 26.2627 63.6546 26.2627H72.01V31.0002H59.7784ZM75.7223 31.0002V0.851953H80.8906V15.2801C80.8906 16.5291 82.3119 17.132 83.1302 16.1414L88.5999 9.46575H95.3618L88.7291 17.6489C87.9539 18.5964 87.8678 19.8454 88.5569 20.879L95.4479 31.0002H89.1598L83.3455 22.5157C82.5272 21.3097 80.8906 21.9558 80.8906 23.334V31.0002H75.7223Z" 26 - /> 31 + height={size * ratio} 32 + {...rest}> 33 + <Defs> 34 + <ClipPath id="clip0_1011_1003"> 35 + <Rect x={0} y={0} width={CONTENT_WIDTH} height={CONTENT_HEIGHT} /> 36 + </ClipPath> 37 + </Defs> 27 38 28 - {/* Row 2 (left & centre) – “ALGORITHMS” */} 29 - <Path 30 - fill={fill || pal.text.color} 31 - d="M7.83124 64.9587C5.76393 64.9587 3.95503 63.1498 3.95503 61.0825V57.7232C3.95503 56.3019 5.03176 54.7083 6.3669 54.1915L15.0668 50.746C16.6173 50.143 16.2297 48.1618 14.5931 48.1618H4.21345V43.4242H17.7371C19.8044 43.4242 21.6133 45.2331 21.6133 47.3005V61.0825C21.6133 63.1498 19.8044 64.9587 17.7371 64.9587H7.83124ZM9.59707 58.4984C9.59707 60.3934 11.2337 61.9439 13.1287 61.9439C14.9376 61.9439 16.4881 60.3934 16.4881 58.4984C16.4881 56.6895 14.9376 55.0529 13.1287 55.0529C11.2337 55.0529 9.59707 56.6895 9.59707 58.4984ZM25.4996 64.9587V34.8104H30.6679V64.9587H25.4996ZM34.5973 73.5725V68.8349H46.8289C47.9056 68.8349 48.767 67.9736 48.767 66.8968C48.767 65.8201 47.9056 64.9587 46.8289 64.9587H38.4304C36.3631 64.9587 34.5542 63.1498 34.5542 61.0825V47.3005C34.5542 45.2331 36.3631 43.4242 38.4304 43.4242H49.6283C51.6957 43.4242 53.5046 45.2331 53.5046 47.3005V69.6963C53.5046 71.7636 51.6957 73.5725 49.6283 73.5725H34.5973ZM39.7225 56.7756C39.7225 59.1014 41.7037 61.0825 44.0294 61.0825C46.3551 61.0825 48.3363 59.1014 48.3363 56.7756V51.6074C48.3363 49.2816 46.3551 47.3005 44.0294 47.3005C41.7037 47.3005 39.7225 49.2816 39.7225 51.6074V56.7756ZM60.828 64.9587C58.7607 64.9587 56.9518 63.1498 56.9518 61.0825V47.3005C56.9518 45.2331 58.7607 43.4242 60.828 43.4242H72.0259C74.0932 43.4242 75.9021 45.2331 75.9021 47.3005V61.0825C75.9021 63.1498 74.0932 64.9587 72.0259 64.9587H60.828ZM62.12 56.7756C62.12 59.1014 64.1012 61.0825 66.4269 61.0825C68.7527 61.0825 70.7338 59.1014 70.7338 56.7756V51.6074C70.7338 49.2816 68.7527 47.3005 66.4269 47.3005C64.1012 47.3005 62.12 49.2816 62.12 51.6074V56.7756ZM79.3493 46.0084C79.3493 44.5871 80.5122 43.4242 81.9335 43.4242H92.873V48.1618H87.1017C85.6805 48.1618 84.5176 49.3247 84.5176 50.746V64.9587H79.3493V46.0084ZM95.1455 64.9587V43.4242H100.314V64.9587H95.1455ZM94.198 38.0837C94.198 36.1025 95.7916 34.552 97.7297 34.552C99.6678 34.552 101.304 36.1025 101.304 38.0837C101.304 39.9787 99.6678 41.6584 97.7297 41.6584C95.7916 41.6584 94.198 39.9787 94.198 38.0837ZM107.748 64.9587C105.681 64.9587 103.872 63.1498 103.872 61.0825V36.3609H109.04V40.8401C109.04 42.2614 110.203 43.4242 111.624 43.4242H118.472V48.1618H111.624C110.203 48.1618 109.04 49.3247 109.04 50.746V57.637C109.04 59.0583 110.203 60.2212 111.624 60.2212H118.472V64.9587H107.748ZM120.886 64.9587V34.8104H126.054V41.2708C126.054 42.4337 127.045 43.4242 128.207 43.4242H135.96C138.027 43.4242 139.836 45.2331 139.836 47.3005V64.9587H134.668V51.6074C134.668 49.2816 132.687 47.3005 130.361 47.3005C128.035 47.3005 126.054 49.2816 126.054 51.6074V64.9587H120.886ZM143.283 47.3005C143.283 45.2331 145.092 43.4242 147.159 43.4242H170.417C172.484 43.4242 174.293 45.2331 174.293 47.3005V64.9587H169.125V51.1767C169.125 49.1094 167.316 47.3005 165.248 47.3005C163.181 47.3005 161.372 49.1094 161.372 51.1767V64.9587H156.204V51.1767C156.204 49.1094 154.395 47.3005 152.328 47.3005C150.26 47.3005 148.451 49.1094 148.451 51.1767V64.9587H143.283V47.3005ZM177.149 64.9587V60.2212H187.184C189.165 60.2212 189.424 57.6801 187.658 57.1202L179.345 54.4068C178.01 53.9761 176.89 52.4257 176.89 51.0044V47.3005C176.89 45.2331 178.699 43.4242 180.767 43.4242H194.333V48.1618H184.384C182.403 48.1618 182.102 50.6598 183.868 51.2628L192.137 53.9761C193.472 54.4068 194.592 55.9573 194.592 57.3786V61.0825C194.592 63.1498 192.783 64.9587 190.716 64.9587H177.149Z" 32 - /> 33 - 34 - {/* Row 2 (right-hand block that wraps) */} 35 - <Path 36 - fill={fill || pal.text.color} 37 - d="M98.4783 31V26.2624H108.513C110.495 26.2624 110.753 23.7213 108.987 23.1614L100.675 20.4481C99.3397 20.0174 98.2199 18.4669 98.2199 17.0456V13.3417C98.2199 11.2744 100.029 9.46551 102.096 9.46551H115.663V14.2031H105.714C103.733 14.2031 103.431 16.7011 105.197 17.3041L113.466 20.0174C114.801 20.4481 115.921 21.9986 115.921 23.4199V27.1238C115.921 29.1911 114.112 31 112.045 31H98.4783ZM120.646 31V0.851708H125.814V15.2798C125.814 16.5288 127.236 17.1318 128.054 16.1412L133.524 9.46551H140.286L133.653 17.6486C132.878 18.5961 132.792 19.8451 133.481 20.8788L140.372 31H134.084L128.269 22.5154C127.451 21.3095 125.814 21.9555 125.814 23.3337V31H120.646ZM143.421 39.6138V34.8762H155.653C156.73 34.8762 157.591 34.0148 157.591 32.9381C157.591 31.8614 156.73 31 155.653 31H147.255C145.187 31 143.378 29.1911 143.378 27.1238V9.46551H148.547V22.8169C148.547 25.1426 150.528 27.1238 152.854 27.1238C155.179 27.1238 157.161 25.1426 157.161 22.8169V9.46551H162.329V35.7376C162.329 37.8049 160.52 39.6138 158.453 39.6138H143.421Z" 38 - /> 39 + <G 40 + clipPath="url(#clip0_1011_1003)" 41 + transform={`translate(0 ${-BOUND_TOP})`}> 42 + <Path 43 + d="M12.9698 100.475C6.05259 100.475 0 94.4225 0 87.5053V-0.401367H17.2931V21.215C17.2931 25.106 20.6076 28.4205 24.4986 28.4205H50.4382C57.3555 28.4205 63.4081 34.4731 63.4081 41.3903V87.5053C63.4081 94.4225 57.3555 100.475 50.4382 100.475H12.9698ZM17.2931 73.0943C17.2931 80.8762 23.9221 87.5053 31.704 87.5053C39.4859 87.5053 46.1149 80.8762 46.1149 73.0943V55.8012C46.1149 48.0193 39.4859 41.3903 31.704 41.3903C23.9221 41.3903 17.2931 48.0193 17.2931 55.8012V73.0943Z" 44 + fill={fill || pal.text.color} 45 + /> 46 + <Path 47 + d="M76.3835 100.475V-0.401367H93.6766V100.475H76.3835Z" 48 + fill={fill || pal.text.color} 49 + /> 50 + <Path 51 + d="M119.65 100.475C112.733 100.475 106.68 94.4225 106.68 87.5053V76.2647C106.68 71.5091 110.283 66.1771 114.75 64.4478L143.86 52.919C149.048 50.9015 147.751 44.2725 142.275 44.2725H107.545V28.4205H152.795C159.712 28.4205 165.765 34.4731 165.765 41.3903V87.5053C165.765 94.4225 159.712 100.475 152.795 100.475H119.65ZM125.559 78.8587C125.559 85.1995 131.035 90.3874 137.375 90.3874C143.428 90.3874 148.616 85.1995 148.616 78.8587C148.616 72.8061 143.428 67.33 137.375 67.33C131.035 67.33 125.559 72.8061 125.559 78.8587Z" 52 + fill={fill || pal.text.color} 53 + /> 54 + <Path 55 + d="M191.738 100.475C184.821 100.475 178.769 94.4225 178.769 87.5053V41.3903C178.769 34.4731 184.821 28.4205 191.738 28.4205H232.665V44.2725H204.708C199.953 44.2725 196.062 48.1634 196.062 52.919V75.9765C196.062 80.7321 199.953 84.6231 204.708 84.6231H232.665V100.475H191.738Z" 56 + fill={fill || pal.text.color} 57 + /> 58 + <Path 59 + d="M245.087 100.475V-0.401367H262.38V47.8752C262.38 52.0544 267.136 54.0719 269.874 50.7574L288.176 28.4205H310.801L288.608 55.8012C286.014 58.9716 285.726 63.1508 288.032 66.6094L311.089 100.475H290.049L270.594 72.0856C267.856 68.0505 262.38 70.2122 262.38 74.8236V100.475H245.087Z" 60 + fill={fill || pal.text.color} 61 + /> 62 + <Path 63 + d="M17.9249 214.1C11.0077 214.1 4.95508 208.048 4.95508 201.131V189.89C4.95508 185.135 8.55781 179.802 13.0252 178.073L42.1353 166.544C47.3232 164.527 46.0262 157.898 40.5501 157.898H5.81973V142.046H51.07C57.9873 142.046 64.0399 148.098 64.0399 155.016V201.131C64.0399 208.048 57.9873 214.1 51.07 214.1H17.9249ZM23.8334 192.484C23.8334 198.825 29.3095 204.013 35.6503 204.013C41.7029 204.013 46.8909 198.825 46.8909 192.484C46.8909 186.432 41.7029 180.955 35.6503 180.955C29.3095 180.955 23.8334 186.432 23.8334 192.484Z" 64 + fill={fill || pal.text.color} 65 + /> 66 + <Path 67 + d="M77.0434 214.1V113.224H94.3366V214.1H77.0434Z" 68 + fill={fill || pal.text.color} 69 + /> 70 + <Path 71 + d="M107.484 242.922V227.07H148.411C152.014 227.07 154.896 224.188 154.896 220.585C154.896 216.983 152.014 214.1 148.411 214.1H120.31C113.393 214.1 107.34 208.048 107.34 201.131V155.016C107.34 148.098 113.393 142.046 120.31 142.046H157.778C164.696 142.046 170.748 148.098 170.748 155.016V229.952C170.748 236.87 164.696 242.922 157.778 242.922H107.484ZM124.633 186.72C124.633 194.502 131.262 201.131 139.044 201.131C146.826 201.131 153.455 194.502 153.455 186.72V169.427C153.455 161.645 146.826 155.016 139.044 155.016C131.262 155.016 124.633 161.645 124.633 169.427V186.72Z" 72 + fill={fill || pal.text.color} 73 + /> 74 + <Path 75 + d="M195.252 214.1C188.335 214.1 182.283 208.048 182.283 201.131V155.016C182.283 148.098 188.335 142.046 195.252 142.046H232.721C239.638 142.046 245.691 148.098 245.691 155.016V201.131C245.691 208.048 239.638 214.1 232.721 214.1H195.252ZM199.576 186.72C199.576 194.502 206.205 201.131 213.987 201.131C221.768 201.131 228.398 194.502 228.398 186.72V169.427C228.398 161.645 221.768 155.016 213.987 155.016C206.205 155.016 199.576 161.645 199.576 169.427V186.72Z" 76 + fill={fill || pal.text.color} 77 + /> 78 + <Path 79 + d="M257.225 150.692C257.225 145.937 261.116 142.046 265.872 142.046H302.475V157.898H283.165C278.409 157.898 274.518 161.789 274.518 166.544V214.1H257.225V150.692Z" 80 + fill={fill || pal.text.color} 81 + /> 82 + <Path 83 + d="M310.079 214.1V142.046H327.372V214.1H310.079ZM306.909 124.176C306.909 117.547 312.241 112.359 318.726 112.359C325.211 112.359 330.687 117.547 330.687 124.176C330.687 130.517 325.211 136.137 318.726 136.137C312.241 136.137 306.909 130.517 306.909 124.176Z" 84 + fill={fill || pal.text.color} 85 + /> 86 + <Path 87 + d="M352.247 214.1C345.33 214.1 339.277 208.048 339.277 201.131V118.412H356.57V133.399C356.57 138.155 360.461 142.046 365.217 142.046H388.13V157.898H365.217C360.461 157.898 356.57 161.789 356.57 166.544V189.602C356.57 194.358 360.461 198.248 365.217 198.248H388.13V214.1H352.247Z" 88 + fill={fill || pal.text.color} 89 + /> 90 + <Path 91 + d="M396.206 214.1V113.224H413.499V134.84C413.499 138.731 416.814 142.046 420.704 142.046H446.644C453.561 142.046 459.614 148.098 459.614 155.016V214.1H442.321V169.427C442.321 161.645 435.692 155.016 427.91 155.016C420.128 155.016 413.499 161.645 413.499 169.427V214.1H396.206Z" 92 + fill={fill || pal.text.color} 93 + /> 94 + <Path 95 + d="M471.148 155.016C471.148 148.098 477.201 142.046 484.118 142.046H561.937C568.854 142.046 574.907 148.098 574.907 155.016V214.1H557.614V167.986C557.614 161.068 551.561 155.016 544.644 155.016C537.727 155.016 531.674 161.068 531.674 167.986V214.1H514.381V167.986C514.381 161.068 508.329 155.016 501.411 155.016C494.494 155.016 488.441 161.068 488.441 167.986V214.1H471.148V155.016Z" 96 + fill={fill || pal.text.color} 97 + /> 98 + <Path 99 + d="M584.463 214.1V198.248H618.041C624.67 198.248 625.534 189.746 619.626 187.873L591.813 178.794C587.345 177.353 583.599 172.165 583.599 167.409V155.016C583.599 148.098 589.651 142.046 596.568 142.046H641.963V157.898H608.674C602.045 157.898 601.036 166.256 606.944 168.274L634.613 177.353C639.081 178.794 642.827 183.982 642.827 188.737V201.131C642.827 208.048 636.775 214.1 629.858 214.1H584.463Z" 100 + fill={fill || pal.text.color} 101 + /> 102 + <Path 103 + d="M321.23 100.474V84.6221H354.807C361.436 84.6221 362.301 76.1197 356.393 74.2462L328.579 65.1674C324.112 63.7263 320.365 58.5383 320.365 53.7827V41.3893C320.365 34.4721 326.418 28.4195 333.335 28.4195H378.729V44.2715H345.44C338.811 44.2715 337.802 52.6298 343.711 54.6474L371.38 63.7263C375.847 65.1674 379.594 70.3553 379.594 75.1109V87.5043C379.594 94.4215 373.542 100.474 366.624 100.474H321.23Z" 104 + fill={fill || pal.text.color} 105 + /> 106 + <Path 107 + d="M395.403 100.474V-0.402344H412.696V47.8742C412.696 52.0534 417.452 54.0709 420.19 50.7564L438.492 28.4195H461.117L438.924 55.8003C436.33 58.9707 436.042 63.1498 438.348 66.6084L461.405 100.474H440.365L420.911 72.0846C418.173 68.0495 412.696 70.2112 412.696 74.8227V100.474H395.403Z" 108 + fill={fill || pal.text.color} 109 + /> 110 + <Path 111 + d="M471.61 129.296V113.444H512.537C516.14 113.444 519.022 110.562 519.022 106.959C519.022 103.356 516.14 100.474 512.537 100.474H484.436C477.519 100.474 471.466 94.4215 471.466 87.5043V28.4195H488.759V73.0934C488.759 80.8753 495.388 87.5043 503.17 87.5043C510.952 87.5043 517.581 80.8753 517.581 73.0934V28.4195H534.874V116.326C534.874 123.243 528.821 129.296 521.904 129.296H471.61Z" 112 + fill={fill || pal.text.color} 113 + /> 114 + </G> 39 115 </Svg> 40 116 ) 41 117 }
+13 -19
web/index.html
··· 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8"> 5 - <meta name="theme-color" content="#4b9b6c"> 5 + <meta name="theme-color" content="#8B8BFF"> 6 6 <!-- 7 7 This viewport works for phones with notches. 8 8 It's optimized for gestures by disabling global zoom. ··· 105 105 "> 106 106 <h1 lang="en">JavaScript Required</h1> 107 107 <p lang="en">This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is. 108 - <p lang="en">Learn more about Bluesky at <a href="https://bsky.social">bsky.social</a> and <a href="https://atproto.com">atproto.com</a>, or this fork at <a href="https://github.com/blacksky-algorithms/blacksky.community">github.com/a-viv-a/blacksky.community</a>. 108 + <p lang="en">Learn more about Bluesky at <a href="https://bsky.social">bsky.social</a> and <a href="https://atproto.com">atproto.com</a>, or this fork at <a href="https://github.com/blacksky-algorithms/blacksky.community">github.com/blacksky-algorithms/blacksky.community</a>.</p> 109 109 </noscript> 110 110 111 111 <!-- The root element for your Expo app. --> 112 112 <div id="root"> 113 113 <div id="splash"> 114 - <!-- blacksky SVG – solid brand-purple --> 115 - <svg 116 - xmlns="http://www.w3.org/2000/svg" 117 - viewBox="0 0 512 512" 118 - aria-label="Blacksky logo" 119 - > 120 - <!-- 121 - Scale factor: 512 / 99 ≈ 5.171717 122 - After scaling, height = 61 × 5.1717 ≈ 315.17 123 - Vertical offset to centre: (512 − 315.17) / 2 ≈ 98.41 124 - We translate first (in unscaled units), then scale. 125 - --> 126 - <g transform="translate(0 19.02) scale(5.171717)"> 127 - <path 128 - fill="#8B8BFF" 129 - d="M32.5654 9.96191C32.5654 19.5056 40.0604 27.2986 49.4854 27.7764H49.5137C58.9386 27.2986 66.4336 19.5056 66.4336 9.96191V0H71.2002V9.96191C71.2002 19.8135 79.1865 27.7998 89.0381 27.7998H98.999V32.5654H89.0381C79.1865 32.5654 71.2002 40.5518 71.2002 50.4033V60.3652H66.4336V50.4033C66.4336 40.8547 58.9308 33.0583 49.499 32.5879C40.0677 33.0588 32.5655 40.8551 32.5654 50.4033V60.3652H60.3652V60.3662H0V60.3652H27.7998V50.4033C27.7997 40.5519 19.8134 32.5654 9.96191 32.5654H0V27.7998H9.96191C19.8135 27.7998 27.7998 19.8135 27.7998 9.96191V0H32.5654V9.96191Z" 130 - /> 114 + <svg width="285" height="243" viewBox="0 0 285 243" fill="none" xmlns="http://www.w3.org/2000/svg"> 115 + <g clip-path="url(#clip0_1011_989)"> 116 + <path d="M148.846 144.562C148.846 159.75 161.158 172.062 176.346 172.062H207.012V185.865H176.346C161.158 185.865 148.846 198.177 148.846 213.365V243.045H136.029V213.365C136.029 198.177 123.717 185.865 108.529 185.865H77.8633V172.062H108.529C123.717 172.062 136.029 159.75 136.029 144.562V113.896H148.846V144.562Z" fill="black"/> 117 + <path d="M170.946 31.8766C160.207 42.616 160.207 60.0281 170.946 70.7675L192.631 92.4516L182.871 102.212L161.186 80.5275C150.447 69.7881 133.035 69.7881 122.296 80.5275L101.309 101.514L92.2456 92.4509L113.232 71.4642C123.972 60.7248 123.972 43.3128 113.232 32.5733L91.5488 10.8899L101.309 1.12988L122.993 22.814C133.732 33.5533 151.144 33.5534 161.884 22.814L183.568 1.12988L192.631 10.1925L170.946 31.8766Z" fill="black"/> 118 + <path d="M79.0525 75.3259C75.1216 89.9962 83.8276 105.076 98.498 109.006L128.119 116.943L124.547 130.275L94.9267 122.338C80.2564 118.407 65.1772 127.113 61.2463 141.784L53.5643 170.453L41.1837 167.136L48.8654 138.467C52.7963 123.797 44.0902 108.718 29.4199 104.787L-0.201172 96.8497L3.37124 83.5173L32.9923 91.4542C47.6626 95.3851 62.7419 86.679 66.6728 72.0088L74.6098 42.3877L86.9895 45.7048L79.0525 75.3259Z" fill="black"/> 119 + <path d="M218.413 71.4229C222.344 86.093 237.423 94.7992 252.094 90.8683L281.715 82.9313L285.287 96.2628L255.666 104.2C240.995 108.131 232.29 123.21 236.22 137.88L243.902 166.55L231.522 169.867L223.841 141.198C219.91 126.528 204.831 117.822 190.16 121.753L160.539 129.69L156.967 116.357L186.588 108.42C201.258 104.49 209.964 89.4103 206.033 74.74L198.096 45.1189L210.476 41.8018L218.413 71.4229Z" fill="black"/> 131 120 </g> 121 + <defs> 122 + <clipPath id="clip0_1011_989"> 123 + <rect width="285" height="243" fill="white"/> 124 + </clipPath> 125 + </defs> 132 126 </svg> 133 127 </div> 134 128 </div>