Arrival Card
A square arrival widget: a drawn airliner cruises through a cloud deck that scrolls past behind the landing time.
import {
Canvas,
Fill,
Group,
Path,
RadialGradient,
Rect,
Shader,
Skia,
vec,
} from '@shopify/react-native-skia';
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
import Animated, {
useAnimatedStyle,
useSharedValue,
withRepeat,
withSpring,
withTiming,
} from 'react-native-reanimated';
import { useReduceMotion } from '../../lib/kinetik/hooks/use-reduce-motion';
import { easings, spring } from '../../lib/kinetik/motion/motion';
import { runtimeEffect } from '../../lib/kinetik/shaders/sksl';
import { gradient } from '../../lib/kinetik/tokens/gradient';
import { useKinetikTheme } from '../../lib/kinetik/tokens/theme';
import { EMBLEM_COLOR, PLANE_H, PLANE_PARTS, PLANE_W, TAIL_COLOR } from './arrival-card.plane';
import { FAR_CLOUDS, NEAR_CLOUDS, WISPS } from './arrival-card.shader';
export type ArrivalCardProps = {
/** Big code in the corner, e.g. "NRT". */
code: string;
/** Place under the code, e.g. "TOKYO". */
city: string;
/** Arrival time as shown, e.g. "3:25PM". */
time: string;
/** Status beside the time, e.g. "ON SCHEDULE". */
status?: string;
/** Chip in the corner, e.g. the flight number. */
tag?: string;
/** Label above the time. Defaults to "LANDS AT:". */
arriveLabel?: string;
/** Colour of the plane's tail and tailplane. Defaults to a bright blue. */
tailColor?: string;
/** Colour of the disc tinting the tail. Defaults to a deep blue. */
emblemColor?: string;
style?: StyleProp<ViewStyle>;
};
/** Seconds each cloud layer takes to slide by one period. Nearer layers pass faster. */
const FAR_SECONDS = 30;
const NEAR_SECONDS = 10;
const WISP_SECONDS = 3.2;
const PLANE = PLANE_PARTS.map((part) => ({
...part,
path: Skia.Path.MakeFromSVGString(part.d)!,
}));
/**
* A square arrival widget: an airliner cruising through a night-time cloud deck
* that scrolls past it, with the destination above and the landing time below.
* The plane is drawn, not a photo, and carries no airline's marks.
*/
export function ArrivalCard({
code,
city,
time,
status,
tag,
arriveLabel = 'LANDS AT:',
tailColor = TAIL_COLOR,
emblemColor = EMBLEM_COLOR,
style,
}: ArrivalCardProps) {
const { colors, font, radius, space } = useKinetikTheme();
const reduced = useReduceMotion();
const [size, setSize] = useState({ width: 0, height: 0 });
const { width, height } = size;
const enter = useSharedValue(reduced ? 1 : 0);
const sway = useSharedValue(0.5);
useEffect(() => {
if (reduced) {
enter.set(1);
sway.set(0.5);
return;
}
enter.set(withSpring(1, spring('smooth')));
sway.set(withRepeat(withTiming(1, { duration: 4600, easing: easings.inOut }), -1, true));
}, [reduced, enter, sway]);
const planeWidth = width * 0.9;
const scale = planeWidth / PLANE_W;
const plane = useAnimatedStyle(() => ({
transform: [
{ translateX: (enter.get() - 1) * width },
{ translateY: (sway.get() - 0.5) * 5 },
{ rotate: `${(sway.get() - 0.5) * 0.9}deg` },
],
}));
const small = {
color: MUTED,
fontSize: font.size.xs,
fontWeight: font.weight.medium,
} as const;
return (
<View
accessible
accessibilityLabel={[tag, `${code}, ${city}`, `${arriveLabel} ${time}`, status]
.filter(Boolean)
.join('. ')}
onLayout={(e) => setSize(e.nativeEvent.layout)}
style={[styles.card, gradient(SKY), { padding: space[4] }, style]}
>
{width > 0 ? (
<View style={StyleSheet.absoluteFill} pointerEvents="none" testID="arrival-plane">
<CloudLayer source={FAR_CLOUDS} width={width} height={height} seconds={FAR_SECONDS} />
<CloudLayer source={NEAR_CLOUDS} width={width} height={height} seconds={NEAR_SECONDS} />
<Canvas style={StyleSheet.absoluteFill}>
<Rect x={0} y={0} width={width} height={height}>
<RadialGradient
c={vec(width / 2, height * 0.52)}
r={width * 0.72}
colors={[VIGNETTE_CLEAR, VIGNETTE_MID, VIGNETTE_DARK]}
positions={[0.2, 0.62, 1]}
/>
</Rect>
</Canvas>
<Animated.View style={[StyleSheet.absoluteFill, styles.center, plane]}>
<Canvas style={{ width: planeWidth, height: PLANE_H * scale }}>
<Group transform={[{ scale }]}>
<Airliner tail={tailColor} emblem={emblemColor} />
</Group>
</Canvas>
</Animated.View>
<CloudLayer source={WISPS} width={width} height={height} seconds={WISP_SECONDS} />
</View>
) : null}
<View style={styles.top}>
{tag ? (
<View style={[styles.chip, { borderRadius: radius.sm }]}>
<Text
style={{
color: colors.highlight,
fontSize: font.size.xs + 1,
fontWeight: font.weight.semibold,
}}
>
{tag}
</Text>
</View>
) : (
<View />
)}
<View style={styles.end}>
<Text
numberOfLines={1}
style={{
color: colors.highlight,
fontSize: font.size['3xl'],
fontWeight: font.weight.bold,
letterSpacing: font.tracking.tight,
}}
>
{code}
</Text>
<Text numberOfLines={1} style={small}>
{city}
</Text>
</View>
</View>
<View>
<Text numberOfLines={1} style={small}>
{arriveLabel}
</Text>
<Text numberOfLines={1} adjustsFontSizeToFit style={{ marginTop: 2 }}>
<Text
style={{
color: colors.highlight,
fontSize: font.size.md,
fontWeight: font.weight.bold,
}}
>
{time}
</Text>
{status ? (
<Text
style={{ color: GREEN, fontSize: font.size.xs + 1, fontWeight: font.weight.bold }}
>
{' '}
{status}
</Text>
) : null}
</Text>
</View>
</View>
);
}
/**
* One layer of clouds: drawn once, then slid to the left as a view on the UI
* thread. The noise repeats every card width, and the canvas holds two of them,
* so it can start over after sliding by one without a seam.
*/
function CloudLayer({
source,
width,
height,
seconds,
}: {
source: string;
width: number;
height: number;
seconds: number;
}) {
const reduced = useReduceMotion();
const x = useSharedValue(0);
useEffect(() => {
x.set(
reduced
? 0
: withRepeat(
withTiming(width, { duration: seconds * 1000, easing: easings.linear }),
-1,
false,
),
);
}, [reduced, width, seconds, x]);
const slide = useAnimatedStyle(() => ({ transform: [{ translateX: -x.get() }] }));
return (
<Animated.View style={[styles.layer, { width: width * 2, height }, slide]}>
<Canvas style={{ width: width * 2, height }}>
<Fill>
<Shader
source={runtimeEffect(source)}
uniforms={{ res: [width * 2, height], period: width }}
/>
</Fill>
</Canvas>
</Animated.View>
);
}
/** The airliner, painted back to front. */
function Airliner({ tail, emblem }: { tail: string; emblem: string }) {
return (
<>
{PLANE.map(({ path, fill, tone, opacity, at }, i) => {
const color = tone === 'tail' ? tail : tone === 'emblem' ? emblem : (fill ?? tail);
const shape = <Path key={i} path={path} color={color} opacity={opacity ?? 1} />;
return at ? (
<Group
key={i}
transform={[{ translateX: at[1] }, { translateY: at[2] }, { scale: at[0] }]}
>
{shape}
</Group>
) : (
shape
);
})}
</>
);
}
const VIGNETTE_CLEAR = 'hsla(220, 30%, 5%, 0)';
const VIGNETTE_MID = 'hsla(220, 30%, 5%, 0.32)';
const VIGNETTE_DARK = 'hsla(220, 30%, 5%, 0.82)';
const MUTED = 'hsl(214, 10%, 68%)';
const GREEN = 'hsl(145, 76%, 48%)';
const SKY =
'linear-gradient(180deg, hsl(220, 12%, 9%) 0%, hsl(218, 18%, 13%) 55%, hsl(220, 12%, 8%) 100%)';
const styles = StyleSheet.create({
card: {
width: '100%',
maxWidth: 260,
aspectRatio: 1,
alignSelf: 'center',
borderRadius: 30,
overflow: 'hidden',
justifyContent: 'space-between',
boxShadow: '0px 18px 40px hsla(220, 30%, 5%, 0.3)',
},
layer: { position: 'absolute', top: 0, left: 0 },
center: { alignItems: 'center', justifyContent: 'center', paddingTop: 12 },
top: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' },
end: { alignItems: 'flex-end', flexShrink: 1 },
chip: {
paddingHorizontal: 11,
paddingVertical: 7,
backgroundColor: 'hsl(214, 16%, 22%)',
},
});Installation
npx kinetik-ui add arrival-cardpnpm dlx kinetik-ui add arrival-cardbunx kinetik-ui add arrival-cardyarn dlx kinetik-ui add arrival-cardThe CLI copies the source and installs native dependencies with npx expo install, so versions match your Expo SDK. With shadcn: npx shadcn@latest add https://kinetik-ui.dev/r/arrival-card.json
Install manually
- Install dependencies
npx expo install @shopify/react-native-skia react-native-reanimated react-native-worklets - Copy the source files
components/kinetik/arrival-card.tsxcomponents/kinetik/arrival-card.plane.tscomponents/kinetik/arrival-card.shader.ts
Usage
import { ArrivalCard } from '@/components/kinetik/arrival-card';
<ArrivalCard code="NRT" city="TOKYO" time="3:25PM" status="ON SCHEDULE" tag="KN204" />;When to use
- A small square widget that answers one question: when does this flight land?
- Next to Route Card and Cruise Dial on a trip screen.
When not to use
- Lists: each card runs its own cloud shader. Use a plain row.
- Trips that are not by air. The plane is part of the design.
Notes
- The plane is a vector drawing with no airline's marks. Set
tailColorandemblemColorto your brand colours. - The plane artwork is credited in
THIRD_PARTY_NOTICES.md. - The card is square and stops growing at 260 pt.
- The plane flies in once on arrival, then sways gently while the clouds scroll to the left, so it reads as flying forward.
Props
ArrivalCardProps
| Prop | Type | Default | Description |
|---|---|---|---|
coderequired | string | — | Big code in the corner, e.g. "NRT". |
cityrequired | string | — | Place under the code, e.g. "TOKYO". |
timerequired | string | — | Arrival time as shown, e.g. "3:25PM". |
status | string | — | Status beside the time, e.g. "ON SCHEDULE". |
tag | string | — | Chip in the corner, e.g. the flight number. |
arriveLabel | string | 'LANDS AT:' | Label above the time. Defaults to "LANDS AT:". |
tailColor | string | TAIL_COLOR | Colour of the plane's tail and tailplane. Defaults to a bright blue. |
emblemColor | string | EMBLEM_COLOR | Colour of the disc tinting the tail. Defaults to a deep blue. |
style | StyleProp<ViewStyle> | — |
Performance and accessibility
Performance
- Budget
- Each cloud layer is drawn once and then slid as a view on the UI thread, so nothing redraws. The clouds and the sway animate at rest.
- Measured
Huawei P20 Lite (ANE-LX1), Android 9, release build · 32 ms median frame, 38 ms p90 · keeps drawing at rest · 142 MB app memory. Animating at rest: three cloud layers slide and the plane sways. Holds about 30 fps on this old mid-range phone; Grain Drift measured the same there and Aurora Veil about 10 fps.
Accessibility
- Reduced motion
- The plane is in place from the start; it does not fly in or sway, and the clouds stand still.
- Screen readers
- One label ("KN204. NRT, TOKYO. LANDS AT: 3:25PM. ON SCHEDULE").
- Touch target
- Not interactive.
Source files
components/kinetik/arrival-card.tsx is in the Code tab of the preview above.
components/kinetik/arrival-card.plane.ts
/**
* The airliner, shape for shape and colour for colour, on a 1058.3 by 291.04 box
* with its nose to the right. `tone` marks the parts that follow the tail and
* emblem colour props. `at` is a [scale, x, y] placement.
*/
export const PLANE_W = 1058.3;
export const PLANE_H = 291.04;
export const TAIL_COLOR = 'hsl(208.5, 100.0%, 53.7%)';
export const EMBLEM_COLOR = 'hsl(232.0, 100.0%, 57.3%)';
export type PlanePart = {
d: string;
fill?: string;
tone?: 'tail' | 'emblem';
opacity?: number;
at?: [number, number, number];
};
export const PLANE_PARTS: PlanePart[] = [
{
d: 'm161.48 136.48-0.58466-1.333h0.32741l1.2862 1.7306z',
fill: 'hsl(0.0, 0.0%, 96.1%)',
at: [6.1467, -671.24, -670.43],
},
{
d: 'm161.09 135.15 0.9493 1.5493 0.46922 0.18138-1.2862-1.7306z',
fill: 'hsl(0.0, 0.0%, 98.0%)',
at: [6.1467, -671.24, -670.43],
},
{
d: 'm161.48 136.48-0.58466-1.333h0.32741l1.2862 1.7306z',
fill: 'hsl(0.0, 0.0%, 96.1%)',
at: [6.1467, -590.8, -672.67],
},
{
d: 'm161.09 135.15 0.9493 1.5493 0.46922 0.18138-1.2862-1.7306z',
fill: 'hsl(0.0, 0.0%, 98.0%)',
at: [6.1467, -590.8, -672.67],
},
{
d: 'm161.48 136.48-0.58466-1.333h0.32741l1.2862 1.7306z',
fill: 'hsl(0.0, 0.0%, 96.1%)',
at: [6.1467, -110.3, -672.67],
},
{
d: 'm161.09 135.15 0.9493 1.5493 0.46922 0.18138-1.2862-1.7306z',
fill: 'hsl(0.0, 0.0%, 98.0%)',
at: [6.1467, -110.3, -672.67],
},
{
d: 'm253.29 165.67c-5.8867-4.8479-15.929-3.4628-37.398-15.236-21.469-11.773-30.472-22.162-37.051-29.087-6.5792-6.9255-102.15-103.54-107.69-110.12-5.5404-6.5792-9.6957-5.1941-14.544-5.1941h-38.783l58.174 162.06z',
tone: 'tail',
},
{
d: 'm83.474 29.969a48.299 48.299 0 0 0-45.457 32.316l20.561 57.276a48.299 48.299 0 0 0 24.896 7.0039 48.299 48.299 0 0 0 48.297-48.3 48.299 48.299 0 0 0-0.27636-5.1012c-15.682-15.938-29.65-30.161-41.982-42.805a48.299 48.299 0 0 0-6.0383-0.39093z',
tone: 'emblem',
opacity: 0.48684,
},
{
d: 'm100.11 63.73a8.6782 8.6782 0 0 0-2.233 0.39707l-53.141 16.863 5.8636 16.336 52.525-16.654a8.6782 8.6782 0 0 0 5.6508-10.895 8.6782 8.6782 0 0 0-8.6652-6.0478z',
tone: 'tail',
},
{
d: 'm60.146 5.9202c-1.1579 0.02459-2.3265 0.11433-3.5385 0.11433h-30.925c28.928 28.417 86.364 84.759 113.66 110.46 34.878 32.85 90.314 41.503 108 49.25l5.9525-0.0824c-5.8867-4.8479-15.926-3.4638-37.395-15.237-21.469-11.773-30.473-22.161-37.052-29.086-6.5792-6.9255-102.15-103.54-107.69-110.12-4.1553-4.9344-7.5294-5.3889-11.003-5.3077z',
fill: 'hsl(0.0, 0.0%, 100.0%)',
opacity: 0.11466,
},
{
d: 'M632.62 164.78a2.4395 1.2197 0 1 0 4.879 0a2.4395 1.2197 0 1 0 -4.879 0z',
fill: 'hsl(0.0, 100.0%, 58.8%)',
},
{
d: 'm1030.8 204.97c23.298 10.168 11.419 22.47-3.636 29.087-40.797 17.932-69.255 28.221-197.72 28.221h-68.562c-10.388 0-47.44 6.5792-63.368 6.5792h-177.99c-25.278 0-72.371-7.618-79.643-7.618h-51.249c-38.436 0-91.416-6.233-154.44-21.469-63.022-15.236-99.381-31.857-135.05-40.86-35.666-9.0032-54.365-15.236-55.75-16.967-1.3851-1.7314-1.5582-13.678 0-15.236 1.5582-1.5582 107.69-2.0776 209.15-2.0776h574.12c81.375 0 108.04 2.7702 137.47 8.3106 29.433 5.5404 43.264 13.587 47.182 17.75 3.9176 4.1625 8.3253 8.4802 9.5492 9.3656 1.2239 0.88536 6.231 3.3023 9.9266 4.9152z',
fill: 'hsl(0.0, 0.0%, 96.1%)',
},
{
d: 'm993.24 191.4c-0.93435 0-2.3957 0.96416-3.7736 1.7597-1.3778 0.7955-1.9757 0.96945-1.9757 1.9757v4.2405c0 0.8625-0.21513 2.1568 1.007 2.1568h10.565c7.2912 0 12.423-0.91751 22.111-1.3119-0.08-0.0492-0.1893-0.1174-0.2508-0.16227-1.1538-0.83472-5.1363-4.7286-8.8716-8.6588z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.046992,
},
{
d: 'm253.21 179.38c1.4959 0 2.6156 1.226 2.5331 2.7132-0.20407 3.6819-0.5157 12.39-0.54029 31.382-2e-3 1.3432-1.1599 2.2277-2.4491 2.437a0.27663 0.27663 0 0 1-0.2643 0.27599h-15.547c-1.4968 0-2.7194-1.2277-2.7131-2.7252 0.0725-17.393 0.91419-27.258 1.3806-31.442 0.16473-1.4795 1.5196-2.6412 3.0133-2.6412zm0 0.55197h-14.586c-1.2009 0-2.3428 0.97898-2.473 2.1489-0.46408 4.161-1.2962 14.005-1.3686 31.382-5e-3 1.1971 0.96312 2.173 2.1609 2.173h15.547c1.1984 0 2.1594-0.96896 2.1609-2.1609 0.0246-18.997 0.335-27.707 0.5403-31.406 0.0664-1.2004-0.78235-2.137-1.9808-2.137z',
fill: 'hsl(0.0, 0.0%, 76.9%)',
},
{
d: 'm455.8 180.36c-1.3234 0-2.401 1.0776-2.401 2.401v30.613c0 1.3234 1.0776 2.4011 2.401 2.4011h16.951c1.3234 0 2.389-1.0776 2.389-2.4011v-30.613c0-1.3234-1.0656-2.401-2.389-2.401zm0 0.55197h16.951c1.0266 0 1.8368 0.82224 1.8368 1.8488v30.613c0 1.0266-0.81025 1.8488-1.8368 1.8488h-16.951c-1.0265 0-1.8488-0.82224-1.8488-1.8488v-30.613c0-1.0266 0.82226-1.8488 1.8488-1.8488z',
fill: 'hsl(0.0, 0.0%, 76.9%)',
},
{
d: 'm785.29 180.36c-1.3234 0-2.401 1.0776-2.401 2.401v30.613c0 1.3234 1.0776 2.4011 2.401 2.4011h16.951c1.3234 0 2.401-1.0776 2.401-2.4011v-30.613c0-1.3234-1.0776-2.401-2.401-2.401zm0 0.55197h16.951c1.0266 0 1.8368 0.82224 1.8368 1.8488v30.613c0 1.0266-0.81025 1.8488-1.8368 1.8488h-16.951c-1.0265 0-1.8488-0.82224-1.8488-1.8488v-30.613c0-1.0266 0.8223-1.8488 1.8488-1.8488z',
fill: 'hsl(0.0, 0.0%, 76.9%)',
},
{
d: 'm933.82 179.38c-0.74129 0-1.3374 0.2766-1.6688 0.76833-0.3313 0.49174-0.38109 1.158-0.1801 1.8608 1.0177 3.5616 2.623 12.229 2.7492 31.466 0.0123 1.495 1.2285 2.7131 2.7252 2.7131h15.547c1.4968 0 2.7182-1.2266 2.7012-2.7252-0.19915-17.556-2.5137-27.459-3.7816-31.598-0.43825-1.4314-2.0203-2.4851-3.5056-2.4851zm0 0.55197h14.586c1.2094 0 2.6309 0.95814 2.9773 2.0889 1.2508 4.0827 3.5588 13.944 3.7576 31.454 0.0123 1.1958-0.95113 2.1609-2.1489 2.1609h-15.547c-1.1979 0-2.1531-0.9748-2.1609-2.173-0.12663-19.266-1.7449-27.969-2.7852-31.61-0.16842-0.58946-0.099-1.0673 0.11986-1.3926 0.21943-0.32516 0.59438-0.528 1.2006-0.528z',
fill: 'hsl(0.0, 0.0%, 76.9%)',
},
{
d: 'm1008.5 192.9 5.3105 6.23a1.7616 1.7616 0 0 0 1.3407 0.61884h5.4189c-1.3516-1.1149-4.487-4.1854-7.6424-7.4676h-4.142a0.37535 0.37535 0 0 0-0.2858 0.61884z',
fill: 'hsl(205.0, 23.6%, 49.8%)',
},
{
d: 'm1000.6 200.24v-7.4718a0.48789 0.48789 0 0 1 0.488-0.48805h4.8755a1.0396 1.0396 0 0 1 0.7997 0.37495l5.7113 6.8749a0.24935 0.24935 0 0 1-0.1751 0.40814l-11.213 0.75653a0.45608 0.45608 0 0 1-0.4868-0.45485z',
fill: 'hsl(205.0, 23.6%, 49.8%)',
},
{
d: 'm999.42 192.77v7.4718a0.48789 0.48789 0 0 1-0.48804 0.48805h-9.9664a0.48789 0.48789 0 0 1-0.48805-0.48805v-4.8041a0.91631 0.91631 0 0 1 0.40507-0.76022l3.1552-2.1229a1.5991 1.5991 0 0 1 0.89268-0.2723h6.0016a0.48789 0.48789 0 0 1 0.48804 0.48804z',
fill: 'hsl(205.0, 23.6%, 49.8%)',
},
{
d: 'm252.6 164.63c-101.46 0-207.59 0.51939-209.15 2.0773-0.21206 0.21206-0.31452 0.97658-0.46377 1.5215 21.219 3.8576 71.753 12.388 104.89 12.388h719.31c99.472 0 147.2 18.543 153.38 22.136 5.9561 3.4628 22.169 9.0575 23.353 14.348-0.4272-4.065-4.1727-8.2525-13.058-12.131-3.6956-1.6129-8.7023-4.0285-9.9262-4.9138-1.2238-0.88536-5.6337-5.2047-9.5514-9.3671-3.9176-4.1625-17.749-12.209-47.182-17.75-29.433-5.5404-56.096-8.3094-137.47-8.3094z',
fill: 'hsl(0.0, 0.0%, 100.0%)',
opacity: 0.3421,
},
{
d: 'M238.492 198.99a1.0876 1.0876 0 1 0 2.1752 0a1.0876 1.0876 0 1 0 -2.1752 0z',
fill: 'hsl(0.0, 0.0%, 65.5%)',
},
{
d: 'm157.72 186.44c0 10.042-1.7314 10.388-5.5404 12.812-3.809 2.4239-11.427 6.5792-23.547 1.7313-12.12-4.8478-24.932-10.734-25.278-13.851-0.3463-3.1165 12.812-12.12 23.2-15.582 10.388-3.4628 19.391-3.1165 22.854 0.69254 3.4628 3.809 6.2329 3.1165 7.618 4.1553s0.69255 4.1553 0.69255 10.042z',
fill: 'hsl(0.0, 0.0%, 49.8%)',
},
{
d: 'm121.55 173.54c-9.1623 4.1468-18.487 10.962-18.194 13.592 0.0338 0.30549 0.18957 0.63876 0.45105 0.99416 4.9533 0.2637 10.834 0.47022 17.549 0.47022 9.8546 0 17.637 0.12355 23.048-0.0615 2.7053-0.0922 4.8021-0.2514 6.4004-0.58762 0.79917-0.16781 1.4794-0.35405 2.1377-0.75598 0.65831-0.40199 1.3913-1.292 1.3913-2.3188 0-0.99097-0.47545-2.1232-1.2483-2.8079s-1.6725-1.0596-2.7857-1.4421c-2.2264-0.76501-5.47-1.4927-10.457-2.8683-3.134-0.86453-10.188-2.445-18.293-4.2151z',
fill: 'hsl(0.0, 0.0%, 44.3%)',
},
{
d: 'm42.406 173.09c-0.07831 3.7656 0.26424 7.8773 1.0419 8.8494 1.3851 1.7314 20.082 7.9651 55.749 16.968 35.666 9.0031 72.025 25.625 135.05 40.861 63.022 15.236 116 21.469 154.44 21.469h51.251c7.2718 0 54.363 7.617 79.641 7.617h177.99c15.929 0 52.98-6.5783 63.369-6.5783h68.562c128.47 0 156.93-10.29 197.72-28.222 8.8305-3.8813 16.508-9.7206 16.695-15.936-3.395 15.147-117.72 29.769-246.3 29.769-129.37 0-296.13 2.5362-398.47-4.0245-100.77-6.4606-341.45-58.544-356.73-70.773z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.04,
},
{
d: 'm372.74 164.63 13.801 14.078 150.03 37.405 127.66 23.988-6.9118-22.768c-1.6263 0-247.2-40.658-255.33-43.91-5.2936-2.1175-11.831-5.8884-16.686-8.7922z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.022556,
},
{
d: 'm577.1 221.73-57.213 1.4357c-18.4-0.57471-97.604 6.468-102.78 20.555-4.727 12.868 6.1363 14.942 16.474 17.52h6.3528c7.2718 0 54.363 7.617 79.641 7.617h84.022z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.04,
},
{
d: 'm663.83 213.97c-11.774-0.18379-24.314 0.65978-36.713 2.0074l48.973 52.88h21.466c15.929 0 52.98-6.5783 63.369-6.5783h4.2944c9.8126-7.2532-24.576-28.926-42.655-38.968-9.0674-5.0367-23.917-8.797-58.735-9.341z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.04,
},
{
d: 'm660.68 216.39c-45.14 0.25939-115.65 4.4155-151.49 7.7917-47.786 4.5016-56.791 5.8883-74.797 11.082-17.746 5.1189-27.999 18.297 4.1865 25.97h1.3563c7.2718 0 54.363 7.617 79.641 7.617h177.99c14.442 0 45.317-5.1842 58.871-6.1939 8.1378-1.2852 11.1-4.6774-1.0419-14.583-13.158-10.734-31.512-26.662-60.253-30.471-7.1852-0.95225-19.414-1.3-34.461-1.2134z',
fill: 'hsl(0.0, 0.0%, 100.0%)',
},
{
d: 'm265.19 194.75c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94682-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94682 2.1218 2.1218 2.1218s2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94365-2.1218-2.1186-2.1218zm9.1956 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94365 2.1218 2.1186 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94365 2.1218 2.1186 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94682-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94682 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94682-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94365-2.1218-2.1186-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218s2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94365-2.1218-2.1186-2.1218zm9.1956 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94682-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94682 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94682 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94682-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94682 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94682 2.1218 2.1218 2.1218s2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm9.1956 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94365 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94682-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94365 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94365 2.1218 2.1186 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94682-2.1218-2.1218-2.1218zm9.1988 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94682 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm36.328 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94682-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94365 2.1218 2.1186 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94682 2.1218 2.1218 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218s2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94363-2.1218-2.1186-2.1218zm9.2464 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94684-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1187 0.94683-2.1187 2.1218v1.5564c0 1.175 0.94369 2.1218 2.1187 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94677-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm9.2464 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94363 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94684-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94684 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.1749 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94376-2.1218-2.1186-2.1218zm9.2464 0c-1.175 0-2.1187 0.94683-2.1187 2.1218v1.5564c0 1.175 0.9437 2.1218 2.1187 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94677-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94684-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94684 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218s2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94363-2.1218-2.1186-2.1218zm9.2464 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94363 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94684-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94684 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94677-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm9.2464 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94684-2.1218-2.1218-2.1218zm9.2496 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm18.372 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94677 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2973 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94684-2.1218-2.1218-2.1218zm9.2973 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm9.2973 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm9.2973 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218s2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94363-2.1218-2.1186-2.1218zm9.2941 0c-1.175 0-2.1186 0.94683-2.1186 2.1218v1.5564c0 1.175 0.94364 2.1218 2.1186 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm64.601 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94677-2.1218-2.1218-2.1218zm9.2051 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94684-2.1218-2.1218-2.1218zm9.2051 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218s2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.2052 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94684 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94677-2.1218-2.1218-2.1218zm9.2051 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm9.2051 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94364-2.1218-2.1186-2.1218zm18.591 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94684 2.1218 2.1218 2.1218 1.175 0 2.1218-0.94683 2.1218-2.1218v-1.5564c0-1.175-0.94683-2.1218-2.1218-2.1218zm9.0686 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94683 2.1218 2.1218 2.1218 1.1749 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.9437-2.1218-2.1186-2.1218zm9.0685 0c-1.175 0-2.1218 0.94683-2.1218 2.1218v1.5564c0 1.175 0.94684 2.1218 2.1218 2.1218 1.175 0 2.1186-0.94683 2.1186-2.1218v-1.5564c0-1.175-0.94363-2.1218-2.1186-2.1218z',
fill: 'hsl(205.0, 23.6%, 49.8%)',
},
{
d: 'm542.87 226.01c-46.927 1.2899-104.1 9.5519-121.15 15.44-7.4008 6.1412-5.9675 14.341 16.86 19.782h1.3563c7.2717 0 54.363 7.617 79.641 7.617h176.1l-5.5936-22.692s-94.874-19.551-132.25-20.126c-4.6717-0.0719-9.6939-0.16719-14.967-0.0246z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.04,
},
{
d: 'm418.72 251.4c2.1971 3.5697 8.2269 7.0619 19.856 9.834h1.3563c7.2717 0 54.363 7.617 79.641 7.617h177.99c14.442 0 45.317-5.1842 58.871-6.1939 4.0979-0.64719 6.8748-1.8318 7.0802-4.1102-1.384 3.6764-29.638-2.4973-56.387 1.2674-26.343 3.7075-266.64 3.476-288.4-8.4142z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.04,
},
{
d: 'M938.872 198.99a1.0876 1.0876 0 1 0 2.1752 0a1.0876 1.0876 0 1 0 -2.1752 0z',
fill: 'hsl(0.0, 0.0%, 65.5%)',
},
{
d: 'M787.602 198.99a1.0876 1.0876 0 1 0 2.1752 0a1.0876 1.0876 0 1 0 -2.1752 0z',
fill: 'hsl(0.0, 0.0%, 65.5%)',
},
{
d: 'M457.762 198.99a1.0876 1.0876 0 1 0 2.1752 0a1.0876 1.0876 0 1 0 -2.1752 0z',
fill: 'hsl(0.0, 0.0%, 65.5%)',
},
{
d: 'm651.63 252.5c-37.405-0.81314-104.08-8.9447-130.71-28.054-26.631-19.109 73.184 7.3184 73.184 7.3184l79.079 5.2855z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.022556,
},
{
d: 'm348.17 150.78 12.466 26.663s204.99 61.291 211.23 62.676c6.233 1.3851 43.631 7.2718 84.837 6.2329 41.207-1.0388 74.449-3.4627 74.449-7.9643s-13.505-15.929-51.595-18.006c-38.09-2.0776-50.902-5.8867-72.718-9.3494-21.815-3.4627-209.15-34.281-209.15-34.281s-31.857-24.239-34.627-25.624c-2.7702-1.3851-14.89-0.34605-14.89-0.34605z',
fill: 'hsl(0.0, 0.0%, 88.6%)',
},
{
d: 'm654.1 240.81-26.663 6.0598h-7.7912v3.1165s-28.914 5.1941-28.914 6.9254c0 1.7314 28.221 8.3106 28.221 8.3106v3.1165h8.3106l26.317 5.3673z',
fill: 'hsl(0.0, 0.0%, 35.7%)',
},
{
d: 'm590.8 257.05c1.314 1.9138 28.159 8.1728 28.159 8.1728v3.1161h8.3094l26.316 5.3681 0.12724-8.0553-26.732-2.9572h-8.0204v-1.7819s-26.273-2.596-28.159-3.8625z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.15602,
},
{
d: 'm702.41 285.13c15.929 0 24.239 0 25.971-2.0777 1.7314-2.0776 3.809-42.938 3.4628-46.054-0.34606-3.1165-6.5793-6.9255-19.391-6.5792-12.812 0.34605-64.407 4.5016-64.407 4.5016l0.17333 2.2508h4.5016v41.553h-3.4628l-0.20284 1.5177s37.357 4.8884 53.356 4.8884z',
fill: 'hsl(0.0, 0.0%, 96.1%)',
},
{
d: 'm354.57 150.43c-3.3762 0.0867-6.4036 0.34606-6.4036 0.34606 16.722 3.3765 40.604 26.304 44.263 27.523 3.6592 1.2197 206.13 35.575 226.87 39.438 20.735 3.8625 52.652 4.6756 70.744 6.7085 18.093 2.0329 29.883 6.3019 37.202 14.027l3.0049-2.4076c-3.5025-5.27-18.052-13.907-50.698-15.688-38.09-2.0776-50.905-5.8854-72.72-9.3481s-209.15-34.283-209.15-34.283-31.859-24.239-34.629-25.624c-1.3851-0.69255-5.1079-0.77903-8.4841-0.69243z',
fill: 'hsl(0.0, 0.0%, 96.1%)',
},
{
d: 'm727.28 232.6c-2.084 18.739-2.367 31.083-2.8226 51.924 2.0435-0.30795 3.3559-0.76723 3.9277-1.4534 1.7322-2.0786 3.8056-42.969 3.4592-46.087-0.16412-1.4799-1.672-3.1106-4.5642-4.384z',
fill: 'hsl(0.0, 0.0%, 18.4%)',
},
{
d: 'm652.72 271.76v6.9594h-3.4622l-0.20345 1.5183s37.358 4.8884 53.357 4.8884c15.929 0 24.239 3.7e-4 25.97-2.0773 0.48681-0.58455 0.99379-4.3724 1.4738-9.3894-4.6895 7.676-47.16 2.523-77.135-1.8994z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.1,
},
{
d: 'm714.78 230.4c-0.74952-0.0123-1.5243-3e-3 -2.3251 0.0184-12.812 0.34606-64.407 4.501-64.407 4.501l0.17456 2.2489h4.501v6.0002c20.185-2.8658 75.152-13.191 78.993 1.3785 0.14998-3.8986 0.21145-6.819 0.13031-7.5502-0.32454-2.9217-5.8237-6.4528-17.067-6.5973z',
fill: 'hsl(0.0, 0.0%, 100.0%)',
opacity: 0.25188,
},
{
d: 'm714.78 230.4c-0.74952-0.0123-1.5243-3e-3 -2.3251 0.0184-12.812 0.34606-64.407 4.501-64.407 4.501l0.17456 2.2489h4.501v6.0002c17.061-2.4222 58.967-10.173 73.851-3.7164 0.21021-2.1997 0.44747-4.4703 0.71147-6.845-2.819-1.2391-6.9614-2.1363-12.505-2.2076z',
fill: 'hsl(0.0, 0.0%, 100.0%)',
opacity: 0.92293,
},
{
d: 'm619.65 249.98s-0.4948 0.0922-0.54644 0.10142c-0.73821 1.9725-2.1209 9.4863-0.85758 14.967 0.0879 0.0184 0.71148 0.16842 0.71148 0.16842v-4.3103z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.15602,
},
{
d: 'm152.52 184.88c0-2.3708-3.1165-2.5884-13.158-5.3585-10.042-2.7702-60.944-13.158-68.909-15.236-7.9643-2.0777-15.929-3.4628-32.204-3.4628h-23.893l74.103 24.239s13.158 1.7313 32.896 1.7313 31.165 0.45731 31.165-1.9132z',
tone: 'tail',
},
{
d: 'm14.362 160.82s43.237 2.548 52.293 4.7042 49.447 10.779 64.684 13.798c14.349 2.8426 20.487 4.2834 21.155 5.222-0.30353-2.0604-3.5855-2.3926-13.128-5.025-10.042-2.7702-60.944-13.156-68.908-15.234-7.9643-2.0777-15.927-3.4654-32.202-3.4654z',
fill: 'hsl(0.0, 0.0%, 100.0%)',
opacity: 0.11466,
},
{
d: 'm103.56 187.76c1.7486 3.2331 13.713 8.6844 25.068 13.226 12.12 4.8479 19.737 0.69273 23.546-1.7312 3.4619-2.203 5.2025-2.7139 5.492-10.323-2.012 6.3398-15.284 5.7047-27.784 4.1071-11.945-1.5268-23.567-3.4496-26.323-5.2792z',
fill: 'hsl(0.0, 0.0%, 0.0%)',
opacity: 0.11466,
},
{
d: 'm139.04 169.17c-3.6667 0.0861-7.9447 0.87049-12.49 2.3855-0.25128 0.0836-0.51122 0.18624-0.76551 0.2766 3.0049-0.51263 8.1337-1.1993 13.528-1.0609 8.4092 0.21574 9.848 4.1669 13.01 5.6762 2.7502 1.3126 5.1167 0.72586 5.546 2.5824-0.0436-1.298-0.24482-2.1744-0.84809-2.6269-1.3851-1.0388-4.1542-0.34544-7.6169-4.1546-1.9478-2.1426-5.6503-3.1883-10.365-3.0779z',
fill: 'hsl(0.0, 0.0%, 100.0%)',
opacity: 0.16165,
},
];components/kinetik/arrival-card.shader.ts
import { NOISE } from '../../lib/kinetik/shaders/sksl';
/**
* Noise that repeats across `per` cells, so a layer can slide by exactly one
* period and start over without a seam. Clouds billow when the noise is sampled
* through more noise.
*/
const TILING = `
${NOISE}
float tileNoise(float2 p, float per) {
float2 i = floor(p);
float2 f = fract(p);
float2 u = f * f * (3.0 - 2.0 * f);
float x0 = mod(i.x, per);
float x1 = mod(i.x + 1.0, per);
float a = hash21(float2(x0, i.y));
float b = hash21(float2(x1, i.y));
float c = hash21(float2(x0, i.y + 1.0));
float d = hash21(float2(x1, i.y + 1.0));
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}
float tileFbm(float2 p, float per) {
float v = 0.0;
float amp = 0.5;
for (int i = 0; i < 6; i++) {
v += amp * tileNoise(p, per);
p = p * 2.0 + float2(0.0, 5.3);
per *= 2.0;
amp *= 0.5;
}
return v;
}
float billow(float2 p, float per) {
float2 warp = float2(tileFbm(p + float2(3.0, 7.7), per), tileFbm(p + float2(8.0, 2.8), per));
return tileFbm(p + warp * 1.5, per);
}
// Density, and how much light reaches it from up and to the right.
float2 deck(float2 p, float per, float lo, float hi) {
float d = billow(p, per);
float shade = d - billow(p + float2(0.12, -0.2), per);
return float2(smoothstep(lo, hi, d), shade);
}
`;
/** The far cloud deck over the night sky. Opaque; `period` is its repeat in points. */
export const FAR_CLOUDS = `
uniform float2 res;
uniform float period;
${TILING}
half4 main(float2 xy) {
float2 uv = xy / res;
float2 far = deck(float2(xy.x / period * 6.0, uv.y * 3.4 + 2.0), 6.0, 0.42, 0.72);
float3 sky = mix(float3(0.05, 0.07, 0.1), float3(0.1, 0.135, 0.19), uv.y);
float3 color = mix(sky, float3(0.21, 0.255, 0.32), far.x);
color += float3(0.82, 0.9, 1.02) * max(far.y, 0.0) * far.x;
return half4(color, 1.0);
}
`;
/** The near cloud bank, building towards the bottom. Transparent elsewhere. */
export const NEAR_CLOUDS = `
uniform float2 res;
uniform float period;
${TILING}
half4 main(float2 xy) {
float2 uv = xy / res;
float2 near = deck(float2(xy.x / period * 7.0, uv.y * 4.0 + 9.0), 7.0, 0.42, 0.62);
float cover = near.x * smoothstep(0.26, 0.86, uv.y);
float3 color = float3(0.25, 0.3, 0.365) + float3(0.95, 1.02, 1.12) * max(near.y, 0.0);
return half4(color * cover, cover);
}
`;
/** Thin wisps that race past in front of the plane. */
export const WISPS = `
uniform float2 res;
uniform float period;
${TILING}
half4 main(float2 xy) {
float2 uv = xy / res;
float d = tileFbm(float2(xy.x / period * 3.0, uv.y * 5.5 + 4.0), 3.0);
float a = smoothstep(0.52, 0.78, d) * 0.5;
a *= smoothstep(0.3, 0.5, uv.y) * (1.0 - smoothstep(0.62, 0.8, uv.y));
return half4(float3(0.62, 0.68, 0.76) * a, a);
}
`;