react-native-svg#LinearGradient TypeScript Examples
The following examples show how to use
react-native-svg#LinearGradient.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AvatarMask.tsx From companion-kit with MIT License | 6 votes |
|
export default function AvatarMask () {
return (
<Svg viewBox="0 0 93 95" fill="none">
<Path fill-rule="evenodd" clip-rule="evenodd" d="M71.8232 84.5847C72.4109 84.156 72.991 83.7104 73.5627 83.2478C77.7064 79.8945 80.9982 75.8198 83.4473 71.298C83.6977 70.8891 83.9441 70.476 84.1866 70.0587C87.877 63.7086 92.9504 54.9272 92.9997 47.1397C93.0409 40.6297 89.1779 34.4492 85.7015 28.8869C85.241 28.1502 84.7871 27.424 84.3502 26.7096C78.6429 14.9718 67.8528 6.14233 54.5701 3.01111C53.8343 2.65922 53.1722 2.21525 52.5184 1.77694C51.3089 0.965981 50.1283 0.174403 48.5637 0.0212883C47.2136 -0.110839 45.4665 0.395719 43.7718 0.887119C42.6647 1.20813 41.5799 1.52267 40.6426 1.64847C36.287 1.90108 32.2102 2.74891 28.4517 4.10598C23.9732 5.69944 19.6917 8.06149 15.7957 11.2142C13.7974 12.8313 11.5695 13.8566 9.50137 14.8085C6.87327 16.018 4.50321 17.1088 3.19027 19.1441C1.99361 20.9992 2.10063 23.3512 2.21179 25.7941C2.30216 27.78 2.39525 29.8259 1.79292 31.7138C-0.780717 39.7802 -0.509382 49.2855 2.13065 58.252C2.22247 58.7218 2.31863 59.1887 2.41927 59.6505C2.97575 61.7043 4.06376 64.106 5.2556 66.3787C6.58983 69.1509 8.16354 71.7988 9.95987 74.2524C10.1402 74.5223 10.2417 74.6698 10.2417 74.6698C10.2417 74.6698 10.3424 74.7955 10.5384 75.0258C10.779 75.3406 11.0234 75.652 11.2715 75.9598C18.1393 84.4795 27.4162 89.8721 37.2591 91.9221C37.7002 92.0286 38.1413 92.126 38.5819 92.2138C39.1311 92.3993 39.6766 92.602 40.2228 92.8049C42.1222 93.5106 44.029 94.2191 46.1241 94.2191C48.0923 94.2191 50.1886 93.5184 52.2115 92.8423C53.0827 92.5511 53.9403 92.2644 54.7681 92.0403C55.6354 91.8699 56.4987 91.6727 57.3568 91.4486C61.7068 90.3884 65.3367 88.6878 69.1897 86.4529C70.0928 85.8663 70.9705 85.243 71.8232 84.5847ZM7.78218 21.0443C3.94692 27.5147 1.8405 35.3627 1.78516 44.1049C1.76137 47.8634 2.89875 50.447 4.1701 53.3348C4.86118 54.9046 5.59185 56.5643 6.19713 58.5515C6.79578 60.517 7.18793 62.1541 7.54429 63.6418C8.30299 66.8092 8.89943 69.2991 10.981 72.8384C13.92 77.8356 18.6961 82.5709 24.2451 86.1732C28.3422 88.5956 32.8174 90.3608 37.5278 91.2927C39.0678 91.5974 40.6233 90.7073 42.2045 89.8026C43.609 88.999 45.0338 88.1838 46.486 88.1838C47.8281 88.1838 49.1679 89.0258 50.4922 89.8583C51.9564 90.7786 53.4018 91.6871 54.8109 91.433C54.8633 91.4235 54.9156 91.414 54.9678 91.4043C58.1177 90.6833 61.1168 89.645 63.9341 88.3143C73.0371 83.6204 79.3898 75.9685 82.4637 68.8481C84.3408 65.2537 83.2282 60.0528 82.0973 55.5511C81.3843 52.7127 80.664 49.8453 80.6811 47.1397C80.6643 44.4792 81.7598 41.8724 82.8241 39.3401C84.1468 36.1927 85.4212 33.1604 84.4512 30.2833C84.2447 29.7885 84.0299 29.2967 83.8067 28.8083C80.3962 21.6875 75.0963 15.2808 68.5345 10.5293C63.6767 7.31102 58.2653 5.20437 52.6534 3.94534C51.1722 3.61303 49.5779 4.14055 47.986 4.66726C46.6844 5.09795 45.3844 5.5281 44.1492 5.48715C42.7906 5.44212 41.4938 4.95923 40.2074 4.48027C38.5715 3.87115 36.9527 3.26838 35.2458 3.58068C28.441 4.82572 21.8666 6.99802 16.1382 11.6336C12.7914 14.3419 10.0077 17.5284 7.78218 21.0443Z" fill="url(#paint0_linear)" />
<Defs>
<LinearGradient id="paint0_linear" x1="33.0235" y1="22.7939" x2="53.7986" y2="46.6972" gradientUnits="userSpaceOnUse">
<Stop stopColor="#B39DFF"/>
<Stop offset="1" stopColor="#7154DF"/>
</LinearGradient>
</Defs>
</Svg>
);
}
Example #2
| Source File: Hightlight.tsx From natds-rn with ISC License | 6 votes |
|
Fade = (props: FadeProps) => {
const { theme, fade } = props
const fadePosition = isHighlight(props) && fade === undefined
? defaultPosition : getFadePosition(fade)
const opacity = isHighlight(props) && fade === undefined
? theme.opacity.medium : theme.opacity.veryHigh
return (
<View style={{
top: 0, position: 'absolute', width: '100%', height: '100%', zIndex: 1
}}
>
<Svg height="100%" width="100%" style={StyleSheet.absoluteFillObject}>
<Defs>
<LinearGradient id="fade_overlay" {...fadePosition}>
<Stop offset="1" stopColor={theme.color.highlight} stopOpacity={opacity} />
<Stop offset="0" stopColor={theme.color.highlight} stopOpacity="0" />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill="url(#fade_overlay)" />
</Svg>
</View>
)
}
Example #3
| Source File: GradientChart.tsx From companion-kit with MIT License | 5 votes |
|
render() {
const data = this.model;
if (!data || data.length <= 0) {
return null;
}
const zeroPoint = {
x: 0,
y: 0.5,
};
const lastPoint = {
x: data.length + 1,
y: 0.5,
};
const points = [zeroPoint, ...data.map((p, i) => ({ x: i + 1, y: p.value })), lastPoint];
const designHeight = 80;
const paddingHor = Layout.window.width - CHART_ITEMS_GAP;
let designWidth = (data.length - 1) * CHART_ITEMS_GAP + paddingHor;
if (designWidth < Layout.window.width) {
designWidth = Layout.window.width;
}
const lineCoords = getPathCoords(points, designHeight, designWidth);
const areaCoords = getAreaCords(points, designHeight, designWidth);
const dots = getDotsCoords(points, designHeight, designWidth);
const labels = data.filter(item => item).map((item, i) => {
return (
<View key={i} style={[styles.textBlock, { left: dots[i + 1].x }]}>
<Text style={[TextStyles.labelSmall, styles.sentiment]}>{item.title.toUpperCase()}</Text>
<Text style={[TextStyles.labelSmall, styles.date]}>{item.date.toUpperCase()}</Text>
</View>
);
});
return (
<View>
<View style={[ styles.labelsContainer ]}>{labels}</View>
<Svg height={designHeight + 20} width={designWidth} viewBox={`0 0 ${designWidth} ${designHeight + 20}`} style={styles.svg}>
<Defs>
<LinearGradient id="bg">
{data.map((point, i) => <Stop key={i} offset={`${(i + 1) * (100 / (data.length + 1))}%`} stopColor={point.color} />)}
</LinearGradient>
</Defs>
<G translateY="10">
<Path d={areaCoords} stroke="none" fill="url(#bg)" />
<Path d={lineCoords} stroke="white" fill="transparent" strokeWidth="2" />
{data.map((point, i) => {
const coords = dots[i + 1];
return (
<G key={i} translate={[ coords.x, coords.y ]}>
<Path d={`M1 ${designHeight - coords.y}L1 0`} stroke="#fff" strokeDasharray="5 5"/>
<Circle r="6" stroke="white" fill={point.color} strokeWidth="2" />
</G>
);
})}
</G>
</Svg>
</View>
);
}
Example #4
| Source File: ProgressBarCircle.tsx From companion-kit with MIT License | 5 votes |
|
export function ProgressBarCircleGradient(this: never, props: PropsGradient) {
const { animationStep, title, diameter, gradient, progress, style, titleStyle, startFromBottom } = props;
const length = Math.round(diameter * Math.PI);
const [ offset ] = React.useState(() => {
const startProgress = progress - (animationStep || 0.1);
return new Animated.Value(getOffset(diameter, startProgress));
});
React.useEffect(() => {
Animated.timing(offset, {
toValue: getOffset(diameter, progress),
duration: 2000,
delay: 750,
}).start();
}, [progress]);
const boxSize = diameter + 6;
const origin = diameter / 2;
const defaultTitleStyles: StyleProp<TextStyle> = {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
};
return (
<View style={style}>
<Text style={[TextStyles.p3, defaultTitleStyles, titleStyle]}>{title}</Text>
<Svg id="progress-bar-circle" width="100%" height="100%" viewBox={`0 0 ${boxSize} ${boxSize}`} fill="none">
<G x={3} y={3}>
<Circle
id="circle-bg"
opacity="0.2"
cx={diameter / 2}
cy={diameter / 2}
r={diameter / 2}
strokeWidth="3"
stroke="url(#paint0_linear)"
fill="none"
/>
<AnimatedContainer
id="circle-progress"
fill="none"
cx={diameter / 2}
cy={diameter / 2}
r={diameter / 2}
strokeWidth="3"
stroke="url(#paint0_linear)"
strokeDasharray={length}
strokeDashoffset={offset}
origin={`${origin}, ${origin}`}
rotation={startFromBottom ? 90 : -90}
/>
</G>
<Defs>
{gradient ? (
<LinearGradient id="paint0_linear" x1={diameter / 2} y1={diameter} x2={diameter} y2={0} gradientUnits="userSpaceOnUse">
{gradient.map((color, i) => {
// tslint:disable-next-line: no-unused-expression
return <Stop key={`${color.title}_${i}`} offset={color.offset} stopColor={color.title}/>;
})}
</LinearGradient>
) : (
<LinearGradient id="paint0_linear" x1={0} y1={diameter / 2} x2={diameter} y2={diameter / 2} gradientUnits="userSpaceOnUse">
<Stop offset="0.0996095" stopColor="#FFCECF"/>
<Stop offset="0.238673" stopColor="#9A87E7"/>
<Stop offset="0.384948" stopColor="#FFAFD5"/>
<Stop offset="0.512681" stopColor="#FA8989"/>
<Stop offset="0.642474" stopColor="#CFC4FF"/>
<Stop offset="0.776388" stopColor="#FFAFD5"/>
<Stop offset="0.90206" stopColor="#FFCED0"/>
</LinearGradient>
)}
</Defs>
</Svg>
</View>
);
}
Example #5
| Source File: Wave.tsx From companion-kit with MIT License | 5 votes |
|
export default function Wave (props: Props) {
const { progress, withPlus, plusColor, style } = props;
const length = 630;
const offset = length * (100 - progress) / 100;
return (
<Svg width="100%" height="100%" viewBox="0 0 218 220" fill="none" style={style}>
<Defs>
{/* we NEED clipRule here */}
<ClipPath id="wave-clip" clipRule="evenodd">
<G>
<Path
fillRule="evenodd"
transform="rotate(90 110 110)"
// tslint:disable-next-line: max-line-length
d="M167.749 197.47C169.107 196.479 170.446 195.449 171.767 194.381C181.435 186.557 189.117 177.051 194.834 166.501C195.424 165.54 196.003 164.568 196.574 163.586C205.191 148.759 217.037 128.254 217.152 110.071C217.248 94.8703 208.228 80.4389 200.111 67.4512C199.034 65.7276 197.972 64.0294 196.95 62.3582C183.624 34.9578 158.435 14.3466 127.427 7.03459C125.706 6.21235 124.158 5.17409 122.629 4.1491C119.805 2.25553 117.048 0.407225 113.395 0.0497075C110.242 -0.258805 106.163 0.92399 102.206 2.07139C99.6143 2.82281 97.0752 3.55905 94.8829 3.85132C84.83 4.43592 75.4135 6.37855 66.7223 9.48522C56.1605 13.2068 46.0631 18.7557 36.8825 26.1848C32.2165 29.9606 27.0144 32.3548 22.1854 34.5773C16.0489 37.4016 10.5149 39.9485 7.44918 44.7009C4.65501 49.0325 4.90491 54.5243 5.16446 60.2284C5.37546 64.8654 5.59284 69.6426 4.18641 74.0506C-1.82264 92.8845 -1.18946 115.078 4.97405 136.013C5.18875 137.112 5.41363 138.204 5.64897 139.284C6.94998 144.086 9.49521 149.701 12.2822 155.014C15.3919 161.472 19.0581 167.64 23.2419 173.358C23.6719 174.001 23.9141 174.354 23.9141 174.354C23.9141 174.354 24.1539 174.653 24.6207 175.201C25.178 175.93 25.744 176.651 26.3186 177.364C42.3413 197.24 63.9799 209.828 86.9416 214.623C87.993 214.878 89.0443 215.11 90.0946 215.32C91.3745 215.752 92.6458 216.224 93.9185 216.697L93.9198 216.698C98.3548 218.346 102.807 220 107.699 220C112.295 220 117.19 218.364 121.913 216.785C123.954 216.103 125.963 215.431 127.902 214.907C129.892 214.516 131.874 214.064 133.843 213.551C144.038 211.077 152.535 207.099 161.557 201.866C163.681 200.486 165.745 199.02 167.749 197.47ZM18.1896 49.1087C9.22271 64.2228 4.29764 82.5587 4.16835 102.985C4.1128 111.761 6.76854 117.794 9.73711 124.537C11.3508 128.202 13.0569 132.078 14.4702 136.718C15.868 141.307 16.7836 145.13 17.6157 148.604C19.3873 155.999 20.7799 161.813 25.6403 170.077C32.4992 181.74 43.6432 192.791 56.5912 201.2C66.1636 206.863 76.6203 210.989 87.627 213.167C91.2229 213.878 94.8549 211.8 98.5471 209.687C101.826 207.811 105.153 205.907 108.544 205.907C111.678 205.907 114.806 207.874 117.899 209.817C121.317 211.966 124.692 214.088 127.983 213.494C128.049 213.482 128.116 213.47 128.182 213.458C128.242 213.447 128.301 213.436 128.36 213.425C135.708 211.742 142.705 209.32 149.278 206.216C170.537 195.257 185.373 175.584 192.551 158.956C196.934 150.563 194.336 140.222 191.696 129.711C190.031 123.084 188.349 116.388 188.389 110.071C188.349 103.859 190.907 97.7719 193.392 91.859C196.48 84.5115 199.455 77.4326 197.193 70.7161C196.709 69.5546 196.204 68.4004 195.68 67.2539C187.715 50.6288 175.339 35.6717 160.017 24.5793C148.676 17.0683 136.044 12.1512 122.944 9.21225C119.485 8.43631 115.763 9.66805 112.046 10.8979C109.007 11.9035 105.971 12.9079 103.087 12.8123C99.9148 12.7072 96.8866 11.5796 93.8831 10.4613C90.0633 9.03902 86.2834 7.63157 82.2978 8.36079C66.4087 11.2679 51.0579 16.3402 37.6822 27.1641C29.8767 33.4804 23.3831 40.9106 18.1896 49.1087Z"
/>
</G>
</ClipPath>
</Defs>
<G>
<Circle
clipPath="url(#wave-clip)"
id="circle-bg"
cx="109"
cy="110"
r="100"
fillRule="evenodd"
stroke="#EDE9FC"
strokeWidth="50"
transform="rotate(-90 110 110)"
/>
<Circle
clipPath="url(#wave-clip)"
id="circle"
cx="109"
cy="110"
r="100"
stroke="url(#paint0_linear)"
fill="transparent"
strokeWidth="50"
transform="rotate(-90 110 110)"
strokeDasharray={length}
strokeDashoffset={offset}
/>
{withPlus && (
// slint:disable-next-line: max-line-length
<Path
d="M0.783936 7.96134H8.33219V0.413086H9.56324V7.96134H17.1115V9.19239H9.56324V16.7406H8.33219V9.19239H0.783936V7.96134Z"
fill={plusColor || 'white'}
transform="scale(4) translate(18, 18)"
/>
)}
</G>
<Defs>
<LinearGradient id="paint0_linear" x1="77.8789" y1="53.2234" x2="126.388" y2="109.037" gradientUnits="userSpaceOnUse">
<Stop offset="0" stopColor="#B39DFF" />
<Stop offset="1" stopColor="#7154DF" />
</LinearGradient>
</Defs>
</Svg>
);
}
Example #6
| Source File: Gradient.tsx From react-native-wagmi-charts with MIT License | 5 votes |
|
export function LineChartGradient({
color: overrideColor = undefined,
children,
...props
}: LineChartGradientProps) {
const { area } = React.useContext(LineChartDimensionsContext);
const { color: contextColor, isTransitionEnabled } =
React.useContext(LineChartPathContext);
const color = overrideColor || contextColor;
////////////////////////////////////////////////
const { animatedProps } = useAnimatedPath({
enabled: isTransitionEnabled,
path: area,
});
////////////////////////////////////////////////
const localId = React.useRef(++id);
////////////////////////////////////////////////
return (
<>
{children ? (
<Defs>
<LinearGradient
id={`${localId.current}`}
x1="0"
x2="0"
y1="0"
y2="100%"
>
{children}
</LinearGradient>
</Defs>
) : (
<Defs>
<LinearGradient
id={`${localId.current}`}
x1="0"
x2="0"
y1="0"
y2="100%"
>
<Stop offset="20%" stopColor={color} stopOpacity={0.15} />
<Stop offset="40%" stopColor={color} stopOpacity={0.05} />
<Stop offset="100%" stopColor={color} stopOpacity={0} />
</LinearGradient>
</Defs>
)}
<AnimatedPath
animatedProps={animatedProps}
fill={`url(#${localId.current})`}
{...props}
/>
</>
);
}
Example #7
| Source File: Angola.tsx From react-native-crypto-wallet-app with MIT License | 5 votes |
|
/* SVGR has dropped some elements not supported by react-native-svg: filter */
function SvgAngola(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
fill="none"
viewBox="0 0 40 40"
width="24"
height="24"
{...props}
>
<Path
fill="url(#angola_svg__pattern0)"
fillRule="evenodd"
d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
clipRule="evenodd"
/>
<Mask id="angola_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
<Path
fill="#fff"
fillRule="evenodd"
d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
clipRule="evenodd"
/>
</Mask>
<G mask="url(#angola_svg__a)">
<Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
<Mask id="angola_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
<Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
</Mask>
<G mask="url(#angola_svg__b)">
<Path fill="url(#angola_svg__paint0_linear)" d="M-8 0h56v40H-8z" />
<G filter="url(#angola_svg__filter0_d)">
<Path fill="#262626" fillRule="evenodd" d="M-8 40h56V21H-8v19z" clipRule="evenodd" />
</G>
<G filter="url(#angola_svg__filter1_d)">
<Path fill="#DD2137" fillRule="evenodd" d="M-8 21h56V0H-8v21z" clipRule="evenodd" />
</G>
<G filter="url(#angola_svg__filter2_d)">
<Path
fill="#F8D84B"
fillRule="evenodd"
d="M24.78 22.909a8.297 8.297 0 00.761-1.925c1.118-4.329-1.357-8.778-5.528-9.938-.695-.193-1.41.235-1.596.957-.186.721.226 1.463.922 1.656 2.78.773 4.43 3.74 3.685 6.625-.102.396-.244.77-.42 1.119l-4.003-2.77a1.274 1.274 0 00-1.807.376c-.399.621-.237 1.46.362 1.875l3.669 2.539a5.04 5.04 0 01-4.184.686c-.695-.193-1.41.235-1.596.956-.187.722.226 1.463.921 1.656 2.606.725 5.257-.006 7.152-1.712l1.856 1.285a1.274 1.274 0 001.807-.375c.4-.622.237-1.462-.361-1.876l-1.64-1.134zm-6.901-5.855c.72 0 1.303-.605 1.303-1.352 0-.747-.584-1.352-1.303-1.352-.72 0-1.303.605-1.303 1.352 0 .747.583 1.352 1.303 1.352z"
clipRule="evenodd"
/>
</G>
</G>
</G>
<Defs>
<LinearGradient
id="angola_svg__paint0_linear"
x1={-8}
x2={-8}
y1={0}
y2={40}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#FF323E" />
<Stop offset={1} stopColor="#FD0D1B" />
</LinearGradient>
<Pattern
id="angola_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#angola_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #8
| Source File: ProgressBarHaflCircle.tsx From companion-kit with MIT License | 4 votes |
|
export default function ProgressBarHaflCircle(this: never, props: PropsGradient) {
const { animationStep, title, diameter, gradient, progress, style, titleStyle } = props;
const length = Math.round(diameter * Math.PI);
const [ offset ] = React.useState(() => {
const startProgress = (progress - (animationStep || 0.1));
return new Animated.Value(getOffset(diameter, startProgress));
});
React.useEffect(() => {
Animated.timing(offset, {
toValue: getOffset(diameter, progress),
duration: 2000,
delay: 750,
}).start();
}, [progress]);
const boxSize = diameter + 6;
const origin = diameter / 2;
const defaultTitleStyles: StyleProp<TextStyle> = {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
};
return (
<View style={style}>
<Text style={[TextStyles.p3, defaultTitleStyles, titleStyle]}>{title}</Text>
<Svg id="progress-bar-circle" width="100%" height="100%" viewBox={`0 0 ${boxSize} ${boxSize}`} fill="none">
<G x={3} y={3}>
<Circle
id="circle-bg"
opacity="0.2"
cx={diameter / 2}
cy={diameter / 2}
r={diameter / 2}
strokeWidth="3"
stroke="url(#paint0_linear)"
fill="none"
/>
<AnimatedContainer
id="circle-progress"
fill="none"
cx={diameter / 2}
cy={diameter / 2}
r={diameter / 2}
strokeWidth="3"
stroke="url(#paint0_linear)"
strokeDasharray={length}
strokeDashoffset={offset}
origin={`${origin}, ${origin}`}
rotation={90}
/>
<AnimatedContainer
id="circle-progress2"
fill="none"
cx={diameter / 2}
cy={diameter / 2}
r={diameter / 2}
strokeWidth="3"
stroke="url(#paint0_linear)"
strokeDasharray={length}
strokeDashoffset={offset}
origin={`${origin}, ${origin}`}
scaleX={-1}
rotation={-90}
/>
</G>
<Defs>
{gradient ? (
<LinearGradient id="paint0_linear" x1={diameter / 2} y1={diameter} x2={diameter} y2={0} gradientUnits="userSpaceOnUse">
{gradient.map((color, i) => {
// tslint:disable-next-line: no-unused-expression
return <Stop key={`${color.title}_${i}`} offset={color.offset} stopColor={color.title}/>;
})}
</LinearGradient>
) : (
<LinearGradient id="paint0_linear" x1={0} y1={diameter / 2} x2={diameter} y2={diameter / 2} gradientUnits="userSpaceOnUse">
<Stop offset="0.0996095" stopColor="#FFCECF"/>
<Stop offset="0.238673" stopColor="#9A87E7"/>
<Stop offset="0.384948" stopColor="#FFAFD5"/>
<Stop offset="0.512681" stopColor="#FA8989"/>
<Stop offset="0.642474" stopColor="#CFC4FF"/>
<Stop offset="0.776388" stopColor="#FFAFD5"/>
<Stop offset="0.90206" stopColor="#FFCED0"/>
</LinearGradient>
)}
</Defs>
</Svg>
</View>
);
}
Example #9
| Source File: Australia.tsx From react-native-crypto-wallet-app with MIT License | 4 votes |
|
function SvgAustralia(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
fill="none"
viewBox="0 0 40 40"
width="24"
height="24"
{...props}
>
<Path
fill="url(#australia_svg__pattern0)"
fillRule="evenodd"
d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
clipRule="evenodd"
/>
<Mask id="australia_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
<Path
fill="#fff"
fillRule="evenodd"
d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
clipRule="evenodd"
/>
</Mask>
<G mask="url(#australia_svg__a)">
<Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
<Mask id="australia_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
<Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
</Mask>
<G mask="url(#australia_svg__b)">
<Path fill="#0A17A7" d="M-8 0h56v40H-8z" />
<Path
fill="#FF2E3B"
stroke="#fff"
strokeWidth={0.667}
d="M-8-.333h-.927l.715.59L1 7.87v2.24l-9.19 6.329-.143.1v2.05l.505-.305 10.587-6.38h2.47l9.163 6.31a.667.667 0 00.378.118h.303c.625 0 .907-.782.425-1.18L7 10.129v-2.24l9.045-6.23a.666.666 0 00.288-.548V-.59l-.505.305L5.24 6.095H2.77l-9.249-6.37-.085-.058H-8z"
/>
<Path
fill="url(#australia_svg__paint0_linear)"
fillRule="evenodd"
d="M-8 7v5.6h9.21v7.733c0 .369.299.667.667.667h3.93a.667.667 0 00.667-.667V12.6h9.86a.667.667 0 00.666-.667V7.667A.667.667 0 0016.333 7h-9.86V0H1.212v7H-8z"
clipRule="evenodd"
/>
<Path
fill="url(#australia_svg__paint1_linear)"
fillRule="evenodd"
d="M-8 7.714H2.667V0h2.666v7.714H16v2.572H5.333V18H2.667v-7.714H-8V7.714z"
clipRule="evenodd"
/>
<Path
fill="#fff"
fillRule="evenodd"
d="M3.5 32.804L1.337 34l.413-2.533L0 29.674l2.418-.37L3.5 27l1.082 2.304 2.418.37-1.75 1.793L5.663 34 3.5 32.804zM32 35.414L30 36l.586-2L30 32l2 .586L34 32l-.586 2L34 36l-2-.586zM32 9.414L30 10l.586-2L30 6l2 .586L34 6l-.586 2L34 10l-2-.586zM40 17.414L38 18l.586-2L38 14l2 .586L42 14l-.586 2L42 18l-2-.586zM24 19.414L22 20l.586-2L22 16l2 .586L26 16l-.586 2L26 20l-2-.586zM36 23.707L35 24l.293-1L35 22l1 .293L37 22l-.293 1L37 24l-1-.293z"
clipRule="evenodd"
/>
</G>
</G>
<Defs>
<LinearGradient
id="australia_svg__paint0_linear"
x1={-8}
x2={-8}
y1={0}
y2={21}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#fff" />
<Stop offset={1} stopColor="#F0F0F0" />
</LinearGradient>
<LinearGradient
id="australia_svg__paint1_linear"
x1={-8}
x2={-8}
y1={0}
y2={18}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#FF2E3B" />
<Stop offset={1} stopColor="#FC0D1B" />
</LinearGradient>
<Pattern
id="australia_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#australia_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #10
| Source File: UnitedStates.tsx From react-native-crypto-wallet-app with MIT License | 4 votes |
|
/* SVGR has dropped some elements not supported by react-native-svg: filter */
function SvgUnitedstates(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
fill="none"
viewBox="0 0 40 40"
width="24"
height="24"
{...props}
>
<Path
fill="url(#united_states_svg__pattern0)"
fillRule="evenodd"
d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
clipRule="evenodd"
/>
<Mask id="united_states_svg__a" width={40} height={40} x={0} y={0} maskUnits="userSpaceOnUse">
<Path
fill="#fff"
fillRule="evenodd"
d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"
clipRule="evenodd"
/>
</Mask>
<G mask="url(#united_states_svg__a)">
<Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
<Mask
id="united_states_svg__b"
width={56}
height={40}
x={-8}
y={0}
maskUnits="userSpaceOnUse"
>
<Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
</Mask>
<G mask="url(#united_states_svg__b)">
<Path
fill="#D02F44"
fillRule="evenodd"
d="M48 0H-8v2.667h56V0zm0 5.333H-8V8h56V5.333zm-56 5.334h56v2.666H-8v-2.666zM48 16H-8v2.667h56V16zm-56 5.333h56V24H-8v-2.667zm56 5.334H-8v2.666h56v-2.666zM-8 32h56v2.667H-8V32zm56 5.333H-8V40h56v-2.667z"
clipRule="evenodd"
/>
<Path fill="#46467F" d="M-8 0h24v19H-8z" />
<G filter="url(#united_states_svg__filter0_d)">
<Path
fill="url(#united_states_svg__paint0_linear)"
fillRule="evenodd"
d="M-2.286 4.3c0 .718-.607 1.3-1.357 1.3S-5 5.018-5 4.3c0-.718.608-1.3 1.357-1.3.75 0 1.357.582 1.357 1.3zm5.429 0c0 .718-.608 1.3-1.357 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.607-1.3 1.357-1.3s1.357.582 1.357 1.3zm4.071 1.3c.75 0 1.357-.582 1.357-1.3 0-.718-.607-1.3-1.357-1.3s-1.357.582-1.357 1.3c0 .718.608 1.3 1.357 1.3zM14 4.3c0 .718-.608 1.3-1.357 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.607-1.3 1.357-1.3S14 3.582 14 4.3zM-.929 8.2C-.179 8.2.43 7.618.43 6.9c0-.718-.608-1.3-1.358-1.3-.75 0-1.357.582-1.357 1.3 0 .718.608 1.3 1.357 1.3zm6.786-1.3c0 .718-.607 1.3-1.357 1.3s-1.357-.582-1.357-1.3c0-.718.607-1.3 1.357-1.3s1.357.582 1.357 1.3zM9.93 8.2c.75 0 1.357-.582 1.357-1.3 0-.718-.608-1.3-1.357-1.3-.75 0-1.358.582-1.358 1.3 0 .718.608 1.3 1.358 1.3zM14 9.5c0 .718-.608 1.3-1.357 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.607-1.3 1.357-1.3S14 8.782 14 9.5zm-6.786 1.3c.75 0 1.357-.582 1.357-1.3 0-.718-.607-1.3-1.357-1.3s-1.357.582-1.357 1.3c0 .718.608 1.3 1.357 1.3zM3.143 9.5c0 .718-.608 1.3-1.357 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.607-1.3 1.357-1.3s1.357.582 1.357 1.3zm-6.786 1.3c.75 0 1.357-.582 1.357-1.3 0-.718-.607-1.3-1.357-1.3S-5 8.782-5 9.5c0 .718.608 1.3 1.357 1.3zM.43 12.1c0 .718-.608 1.3-1.358 1.3-.75 0-1.357-.582-1.357-1.3 0-.718.608-1.3 1.357-1.3.75 0 1.358.582 1.358 1.3zM4.5 13.4c.75 0 1.357-.582 1.357-1.3 0-.718-.607-1.3-1.357-1.3s-1.357.582-1.357 1.3c0 .718.607 1.3 1.357 1.3zm6.786-1.3c0 .718-.608 1.3-1.357 1.3-.75 0-1.358-.582-1.358-1.3 0-.718.608-1.3 1.358-1.3.75 0 1.357.582 1.357 1.3zm1.357 3.9c.75 0 1.357-.582 1.357-1.3 0-.718-.608-1.3-1.357-1.3-.75 0-1.357.582-1.357 1.3 0 .718.607 1.3 1.357 1.3zM8.57 14.7c0 .718-.607 1.3-1.357 1.3s-1.357-.582-1.357-1.3c0-.718.608-1.3 1.357-1.3.75 0 1.357.582 1.357 1.3zM1.786 16c.75 0 1.357-.582 1.357-1.3 0-.718-.608-1.3-1.357-1.3-.75 0-1.357.582-1.357 1.3 0 .718.607 1.3 1.357 1.3zm-4.072-1.3c0 .718-.607 1.3-1.357 1.3S-5 15.418-5 14.7c0-.718.608-1.3 1.357-1.3.75 0 1.357.582 1.357 1.3z"
clipRule="evenodd"
/>
</G>
</G>
</G>
<Defs>
<LinearGradient
id="united_states_svg__paint0_linear"
x1={-5}
x2={-5}
y1={3}
y2={16}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#fff" />
<Stop offset={1} stopColor="#F0F0F0" />
</LinearGradient>
<Pattern
id="united_states_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#united_states_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #11
| Source File: Success.tsx From react-native-crypto-wallet-app with MIT License | 4 votes |
|
function SvgSuccess(props: SvgProps) {
return (
<Svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 275 228" {...props}>
<Path
fill="#E0E9F8"
d="M159.319 30.282c-17.58-.611-34.322-6.29-50.31-12.504-15.987-6.214-31.822-13.1-48.98-16.391C48.993-.731 36.37-1.03 27.48 4.89c-8.559 5.708-11.324 15.535-12.81 24.663-1.119 6.866-1.776 14.094 1.288 20.52 2.13 4.464 5.905 8.215 8.518 12.49 9.09 14.875 2.664 33.218-7.185 47.742-4.617 6.815-9.982 13.32-13.548 20.567-3.566 7.247-5.215 15.562-2.094 22.961 3.09 7.339 10.46 12.841 18.443 16.715 16.213 7.869 35.31 10.12 53.946 11.395 41.239 2.824 82.696 1.601 124.045.378 15.303-.454 30.671-.914 45.724-3.281 8.36-1.316 16.99-3.401 23.06-8.441 7.703-6.396 9.613-17.225 4.449-25.247-8.659-13.453-32.594-16.794-38.654-31.23-3.33-7.949.09-16.8 4.933-24.172 10.387-15.81 27.795-29.68 28.71-47.752.63-12.411-7.738-24.842-20.678-30.716-13.562-6.155-32.372-5.383-42.373 4.808-10.307 10.493-28.413 14.53-43.936 13.991zM131.568 223.25c45.578 0 82.527-4.962 82.527-11.083 0-6.122-36.949-11.084-82.527-11.084s-82.527 4.962-82.527 11.084c0 6.121 36.949 11.083 82.527 11.083z"
/>
<Rect width={2.637} height={19.528} x={174.545} y={79.167} fill="#99B9EE" rx={1.318} />
<Rect width={1.055} height={6.333} x={94.919} y={63.333} fill="#3A3768" rx={0.527} />
<Rect width={1.055} height={11.083} x={94.919} y={74.944} fill="#3A3768" rx={0.527} />
<Rect width={1.055} height={11.611} x={94.919} y={90.25} fill="#3A3768" rx={0.527} />
<Rect width={80.681} height={163.083} x={94.919} y={41.694} fill="#99B9EE" rx={12} />
<Path
fill="#F7F7F7"
d="M164.452 45.917h-9.247v1.111a5.272 5.272 0 01-5.273 5.266h-29.408a5.272 5.272 0 01-5.273-5.266v-1.111h-8.657a6.399 6.399 0 00-6.402 6.396v142.374a6.398 6.398 0 006.402 6.396h57.858a6.398 6.398 0 006.402-6.396V52.324a6.392 6.392 0 00-1.871-4.53 6.405 6.405 0 00-4.531-1.877z"
/>
<Rect width={11.074} height={2.639} x={127.613} y={46.444} fill="#E6E8EC" rx={1.319} />
<Path fill="#E6E8EC" d="M141.587 49.083a1.32 1.32 0 10-.001-2.639 1.32 1.32 0 00.001 2.64z" />
<Path
fill="#99B9EE"
d="M203.65 34.336s-22.583-1.395-19.922 14.806c0 0-.537 2.865 2.006 4.164 0 0 .04-1.2 2.317-.791a10.35 10.35 0 002.454.12 5.052 5.052 0 002.999-1.254s6.348-2.686 8.815-13.308c0 0 1.827-2.318 1.754-2.913l-3.811 1.666s1.304 2.815.268 5.155c0 0-.123-5.053-.855-4.943-.148.022-1.979.975-1.979.975s2.239 4.901.549 8.466c0 0 .641-6.042-1.249-8.112l-2.682 1.604s2.617 5.063.842 9.196c0 0 .456-6.338-1.408-8.806l-2.43 1.941s2.459 4.99.96 8.417c0 0-.196-7.376-1.486-7.934 0 0-2.127 1.923-2.451 2.708 0 0 1.684 3.625.638 5.536 0 0-.641-4.915-1.167-4.943 0 0-2.118 3.257-2.338 5.492 0 0 .091-3.32 1.826-5.8 0 0-2.049.36-3.245 1.72 0 0 .33-2.302 3.768-2.505 0 0 1.751-2.471 2.218-2.62 0 0-3.417-.293-5.49.649 0 0 1.824-2.173 6.118-1.184l2.4-2.007s-4.5-.63-6.41.066c0 0 2.197-1.923 7.056-.522l2.613-1.599s-3.838-.845-6.123-.549c0 0 2.414-1.332 6.89.113l1.877-.86s-2.811-.565-3.634-.656c-.823-.09-.866-.321-.866-.321a9.54 9.54 0 015.281.601s3.964-1.513 3.897-1.768zM180.148 26.93s-10.412-.619-9.195 6.581c0 0-.244 1.272.926 1.85 0 0 .019-.54 1.071-.354.374.062.754.08 1.132.054a2.36 2.36 0 001.383-.561s2.932-1.194 4.072-5.915c0 0 .841-1.029.808-1.293l-1.759.74s.6 1.25.129 2.29c0 0-.058-2.244-.395-2.193-.068 0-.915.435-.915.435s1.036 2.18.255 3.762c0 0 .296-2.685-.578-3.606l-1.239.724s1.209 2.25.389 4.086c0 0 .211-2.817-.649-3.913l-1.12.864s1.134 2.217.443 3.74c0 0-.093-3.278-.687-3.526 0 0-.981.853-1.132 1.204 0 0 .778 1.62.296 2.46 0 0-.296-2.185-.548-2.195 0 0-.978 1.447-1.079 2.43a5.22 5.22 0 01.843-2.576 2.96 2.96 0 00-1.498.764s.153-1.023 1.74-1.113c0 0 .822-1.099 1.024-1.166 0 0-1.578-.13-2.534.289 0 0 .841-.964 2.822-.527l1.096-.891s-2.08-.27-2.959.03c0 0 1.014-.854 3.258-.233l1.205-.71s-1.773-.375-2.827-.24c0 0 1.115-.592 3.18.048l.864-.38s-1.299-.252-1.68-.292c-.381-.04-.4-.143-.4-.143a4.549 4.549 0 012.438.27s1.853-.68 1.82-.794z"
/>
<Path
fill="#E0E9F8"
d="M234.66 211.111c4.078 0 7.383-.591 7.383-1.319 0-.729-3.305-1.32-7.383-1.32-4.077 0-7.382.591-7.382 1.32 0 .728 3.305 1.319 7.382 1.319zM24.257 221.139c4.077 0 7.383-.591 7.383-1.32 0-.728-3.306-1.319-7.383-1.319s-7.383.591-7.383 1.319c0 .729 3.306 1.32 7.383 1.32zM52.733 228c4.077 0 7.382-.591 7.382-1.319 0-.729-3.305-1.32-7.382-1.32-4.078 0-7.383.591-7.383 1.32 0 .728 3.305 1.319 7.383 1.319z"
/>
<Path
fill="#99B9EE"
d="M218.05 224.833c5.97 0 10.81-.827 10.81-1.847s-4.84-1.847-10.81-1.847c-5.971 0-10.81.827-10.81 1.847s4.839 1.847 10.81 1.847z"
/>
<Path
fill="#99B9EE"
d="M223.049 220.462a3.247 3.247 0 001.03-1.602c.135-.634-.129-1.384-.721-1.63-.662-.26-1.37.213-1.905.689-.536.476-1.152 1.021-1.854.919a2.95 2.95 0 00.874-2.715 1.155 1.155 0 00-.245-.554c-.366-.404-1.033-.232-1.472.089-1.399 1.01-1.789 2.967-1.797 4.724-.143-.634-.022-1.295-.027-1.937-.006-.642-.175-1.384-.711-1.724a2.09 2.09 0 00-1.076-.261c-.63-.024-1.33.042-1.76.515-.538.587-.393 1.572.07 2.214.463.642 1.17 1.054 1.822 1.5.521.319.965.755 1.299 1.276.041.072.073.149.097.229h3.932a11.003 11.003 0 002.444-1.732zM53.107 196.333s1.478 2.035-.68 5.093c-2.159 3.058-3.938 5.659-3.226 7.574 0 0 3.258-5.701 5.914-5.78 2.656-.079.908-3.458-2.008-6.887z"
/>
<Path
fill="#000"
d="M53.065 196.333c.13.197.233.412.305.639 2.615 3.195 4.01 6.178 1.495 6.252-2.34.07-5.15 4.424-5.824 5.524.022.085.05.167.08.252 0 0 3.294-5.697 5.98-5.776 2.686-.08.914-3.464-2.036-6.891z"
opacity={0.1}
/>
<Path
fill="#FFD037"
d="M56.424 198.858c0 .646-.117 1.17-.264 1.17-.146 0-.263-.524-.263-1.17 0-.646.146-.342.293-.342.146 0 .234-.304.234.342z"
/>
<Path
fill="#FFD037"
d="M57.104 199.506c-.619.371-1.16.595-1.204.5-.045-.095.415-.473 1.034-.844s.376-.101.42 0c.045.101.369-.027-.25.344z"
/>
<Path
fill="#99B9EE"
d="M45.505 196.333s-1.478 2.035.68 5.093 3.936 5.659 3.224 7.574c0 0-3.254-5.701-5.911-5.78-2.658-.079-.914-3.458 2.007-6.887z"
/>
<Path
fill="#99B9EE"
d="M45.548 196.333c-.131.197-.234.412-.307.639-2.614 3.195-4.005 6.178-1.495 6.252 2.342.07 5.149 4.424 5.823 5.524-.022.086-.05.17-.082.252 0 0-3.29-5.697-5.977-5.776-2.687-.08-.916-3.464 2.038-6.891z"
opacity={0.1}
/>
<Path
fill="#FFD037"
d="M42.713 198.858c0 .646.12 1.17.266 1.17.145 0 .262-.524.262-1.17 0-.646-.146-.342-.29-.342-.146 0-.238-.304-.238.342z"
/>
<Path
fill="#FFD037"
d="M42.035 199.506c.618.371 1.155.595 1.203.5.047-.095-.418-.473-1.035-.844-.618-.371-.373-.101-.42 0-.048.101-.365-.027.252.344z"
/>
<Path
fill="#99B9EE"
d="M43.24 208.099s4.11-.131 5.351-1.029c1.241-.897 6.322-1.975 6.627-.532.304 1.443 6.177 7.172 1.538 7.211-4.639.038-10.781-.737-12.017-1.504-1.236-.766-1.498-4.146-1.498-4.146z"
/>
<Path
fill="#000"
d="M56.839 213.239c-4.64.039-10.783-.757-12.02-1.545-.939-.602-1.316-2.757-1.442-3.75h-.136s.267 3.47 1.495 4.26c1.229.791 7.38 1.584 12.02 1.545 1.337 0 1.8-.51 1.776-1.25-.187.454-.698.731-1.693.74z"
opacity={0.2}
/>
<Path
fill="url(#success_svg__paint0_linear)"
d="M76.462 120.529a.418.418 0 00.528.074 1.717 1.717 0 01-.528-.074z"
/>
<Path
fill="url(#success_svg__paint1_linear)"
fillRule="evenodd"
d="M108.918 66.858a54.818 54.818 0 01-2.378-.787 12.702 12.702 0 002.204-4.487l-.084.033.042-.15.042-.149c-1.888.776-3.98-.543-5.311-2.228-.577-.733-1.075-1.542-1.573-2.352-.648-1.054-1.295-2.108-2.119-2.988a17.054 17.054 0 00-1.956-1.702c-.43-.337-.895-.687-1.42-.703-.5-.014-.936.27-1.378.559-.309.201-.62.404-.956.508a3.169 3.169 0 01-1.633-.06c-.808-.188-1.606-.436-2.402-.684-1.286-.4-2.57-.8-3.896-.944a7.292 7.292 0 00-3.417.388c-.703.27-1.156.71-1.623 1.165-.257.25-.517.503-.826.735-.76.573-2.128.673-3.213.754-.262.019-.507.037-.724.06a28.246 28.246 0 01-4.064.171 9.237 9.237 0 00-2.34.087c-1.616.358-2.914 1.656-4.125 2.904-.332.286-.57.664-.683 1.086-.014.12-.014.24 0 .359-.012.324.044.648.164.95A12.59 12.59 0 0067.122 63c.404.557.809 1.117 1.038 1.783a4.4 4.4 0 01.21 1.29 9.873 9.873 0 01-.145 1.387 17.614 17.614 0 01-1.14 3.917c-.23.554-.46 1.112-.52 1.718a3.506 3.506 0 000 .413c-.045 1.175.585 2.17 1.225 3.18.518.819 1.043 1.648 1.224 2.593.032.175.052.352.06.53-.046 1.319-.789 2.608-1.883 3.119.067.026.135.05.204.074l.087.031c-.094.06-.19.114-.29.163.198.076.402.142.609.201a14.29 14.29 0 00-3.105 3.85c-3.661 6.93-28.62 20.523-28.62 20.523s.14.079.37.215c-.093.057-.191.122-.3.195-2.16 1.455-7.232 5.701-2.647 11.054 0 0 3.577-5.714 6.083-8.144.114-.108.223-.209.33-.304a.74.74 0 01.097.586l16.414-9.329s5.833-4.132 7.46-5.065l.171-.1c.648-.376 1.971-1.146 3.526-1.505l-.19.084a7.404 7.404 0 011.883-.27c2.905.045 6.05 2.198 7.09 10.724 1.39 11.417.745 13.475.299 13.757a.755.755 0 01-.163-.03.328.328 0 00.043.033.783.783 0 01-.18-.033c.064.06.155.083.24.06.061.018.127.01.182-.022h.22c0 .069-.007.14-.014.211l-.01.107c-.022 0-.13.062 0 .07-.032.643-.03 1.357 0 2.077a664.87 664.87 0 00-4.151.247l.114-.606.052-.271c1.107-.09 2.16-.418 2.282-1.33.272-1.998-2.448-3.065-4.747-3.198-2.3-.133-16.142.801-16.142.801s-2.076 2.714 4.505 3.559c.196.103.4.217.607.336 2.577 1.488 6.075 4.224 7.749 5.573l.233.187-.75.606c3.521.805 6.925 12.627 9.185 20.476.36 1.248.69 2.395.987 3.381 2.169 7.196 6.919 6.93 10.853 5.866 3.686-1.002 4.157-11.83 4.2-13.19v-.138l6.555 8.173.498.622c.193.1.38.195.565.285 4.966 2.391 10.45-2.191 8.889-7.402-1.575-5.267-4.024-13.049-5.656-16.339-1.361-2.755-3.132-7.329-4.204-10.201.139-.057.274-.122.406-.195l-.069-.364.069-.035s-1.579-8.293-1.666-14.181v-.502a27.19 27.19 0 011.938-.38l.021-.255-.138.03.658-7.639s2.421-5.209.569-7.38a4.608 4.608 0 01-1.089-2.256c-.31-1.998 0-5.323 4.318-8.089 6.647-4.264 9.226-7.73 9.226-7.73s.141-2.547-3.929-3.747zm-13.2 5.299v-3.529c.58-.028 1.168-.011 1.755.006.66.02 1.32.039 1.975-.006a9.434 9.434 0 001.801-.304l.299.21a32.864 32.864 0 01-5.83 3.623zm-17.386 56.377a74.379 74.379 0 00-1.458-1.054 24.524 24.524 0 012.04 4.107 76.763 76.763 0 01-.582-3.053z"
clipRule="evenodd"
/>
<Path
fill="#FFBDC6"
d="M87.536 125.083l-.289 1.612-.222 1.232-.405 2.254L82.7 133s-.354-.311-.938-.8c-1.607-1.359-4.985-4.125-7.465-5.61a8.245 8.245 0 00-2.052-.97l15.292-.537z"
/>
<Path
fill="#000"
d="M87.536 125.083l-.289 1.566c-.865.047-1.732.002-2.588-.134l-9.15.131a28.492 28.492 0 01-1.213-.099 8.377 8.377 0 00-2.052-.943l15.292-.521z"
opacity={0.1}
/>
<Path
fill="#474463"
d="M84.758 125.992s4.6.74 4.868-1.102c.27-1.842-2.368-2.837-4.601-2.961-2.233-.124-15.645.74-15.645.74s-2.365 2.959 6.178 3.454l9.2-.131z"
/>
<Path
fill="#000"
d="M87.536 125.083l-.289 1.612-.222 1.232-.405 2.254L82.7 133s-.354-.311-.938-.8c-1.607-1.359-4.985-4.125-7.465-5.61a8.245 8.245 0 00-2.052-.97l15.292-.537z"
opacity={0.1}
/>
<Path
fill="#000"
d="M87.536 125.083l-.289 1.566c-.865.047-1.732.002-2.588-.134l-9.15.131a28.492 28.492 0 01-1.213-.099 8.377 8.377 0 00-2.052-.943l15.292-.521z"
opacity={0.1}
/>
<Path
fill="#000"
d="M84.761 125.994s4.602.737 4.866-1.11c.264-1.848-2.368-2.832-4.602-2.955-2.233-.124-15.645.739-15.645.739s-2.365 2.955 6.178 3.447l9.203-.121z"
opacity={0.1}
/>
<Path fill="#474463" d="M70.662 61.222h24.257v28.5H70.662z" />
<Path fill="#000" d="M70.662 61.222h24.257v28.5H70.662z" opacity={0.1} />
<Path
fill="#FFBDC6"
d="M42.186 110.073c-.387.101-.883.489-1.434 1.052-2.372 2.436-5.77 8.153-5.77 8.153-4.343-5.367.465-9.607 2.513-11.065.498-.352.832-.546.832-.546l3.86 2.406z"
/>
<Path
fill="#B97A59"
d="M87.594 69.667s1.179 8.24 5.243 10.203c4.064 1.962-5.243 5.63-5.243 5.63L74.88 80.787s7.21-2.357 5.767-9.29l6.947-1.83zM73.826 120.333l-.287 1.607-.233 1.238-.404 2.255-3.919 2.817s-.353-.308-.937-.798c-1.606-1.359-4.981-4.126-7.462-5.611a8.195 8.195 0 00-2.05-.971l15.292-.537z"
/>
<Path
fill="#000"
d="M73.826 120.333l-.287 1.566c-.865.047-1.732.002-2.588-.134l-9.15.131a28.647 28.647 0 01-1.216-.099 8.269 8.269 0 00-2.052-.946l15.293-.518z"
opacity={0.1}
/>
<Path
fill="#0B4870"
d="M71.053 121.771s4.603.737 4.864-1.107c.261-1.845-2.366-2.834-4.602-2.957-2.237-.124-15.644.739-15.644.739s-2.369 2.954 6.178 3.449l9.205-.124z"
/>
<Path
fill="#000"
d="M73.298 123.068l-.445 2.304-4.322 2.878s-.39-.315-1.033-.815l5.715-4.463.085.096z"
opacity={0.1}
/>
<Path
fill="#0B4870"
d="M99.66 153.533c-.183-.09-.365-.182-.545-.272l-.49-.617-6.428-8.142v.141c-.044 1.36-.506 12.134-4.117 13.129-3.852 1.061-8.5 1.327-10.617-5.838-2.119-7.166-5.99-22.824-9.965-23.754l5.913-4.843s3.915 4.574 5.51 8.952c-.06-.272-2.763-12.89-.544-15.122h19.399s2.994 8.519 5.047 12.74c1.598 3.277 3.997 11.024 5.541 16.267 1.53 5.178-3.842 9.749-8.704 7.359z"
/>
<Path
fill="#000"
d="M98.61 119.192c-2.993 1.753-16.13 1.039-20.405.754l-1.164-.083c-.125 0 .019-.07.019-.07l.12-1.193 3.185-8.009 17.059-9.785c-.346 1.03-.46 2.607-.433 4.413.08 5.803 1.62 13.973 1.62 13.973z"
opacity={0.1}
/>
<Path
fill="#B97A59"
d="M98.61 119.192c-2.973 1.753-16.025 1.039-20.272.754l-1.156-.081-.192-.016.21-.054 1.044-.269 2.24-8.934 16.948-9.786c-.344 1.031-.457 2.609-.43 4.415.078 5.8 1.608 13.971 1.608 13.971z"
/>
<Path
fill="#000"
d="M97.646 105.305c-3.5.808-11.202 3.178-14.161 8.9-1.974 3.81-3.635 5.444-4.793 6.128l-1.175-.082a.719.719 0 00.02-.071l1.059-.275 2.275-9.114 17.212-9.985c-.346 1.046-.464 2.656-.437 4.499zM38.283 107.667l3.903 2.201c-.392.093-.893.449-1.45.965-.326-.892-2.368-2.138-3.296-2.67.504-.318.843-.496.843-.496zM76.99 119.553a.46.46 0 01-.528-.074c.172.05.35.075.528.074z"
opacity={0.1}
/>
<Path
fill="#FDB32A"
d="M85.614 79.888s-3.574.396-6.088-2.252c0 0-10.575 3.047-14.157 9.93-3.582 6.883-27.929 20.39-27.929 20.39s4.236 2.382 3.837 3.573l16.012-9.268s5.694-4.103 7.275-5.03c1.58-.928 10.323-6.62 12.175 8.869 1.852 15.49 0 13.636 0 13.636s2.646.928 6.483-6.487c3.837-7.415 15.744-9.135 15.744-9.135l.661-7.809s2.362-5.177.543-7.326a4.611 4.611 0 01-1.06-2.24c-.302-1.984 0-5.289 4.213-8.034 6.483-4.238 8.997-7.679 8.997-7.679s.133-2.518-3.837-3.709c-3.969-1.19-20.112-7.678-20.112-7.678l-.542 2.252 12.736 8.994s-6.35 5.155-11.388 5.03c0 0 .935 3.84-3.563 3.973z"
/>
<Path
fill="#000"
d="M88.064 73.244c-.313-1-.558-2.02-.733-3.05l-7.017 1.748a6.855 6.855 0 01-.16 3.817c2.933.738 6.05-.253 7.91-2.515z"
opacity={0.1}
/>
<Path
fill="#B97A59"
d="M82.263 76a7.386 7.386 0 007.382-7.389 7.386 7.386 0 00-7.382-7.389 7.386 7.386 0 00-7.383 7.39A7.386 7.386 0 0082.263 76z"
/>
<Path
fill="#000"
d="M85.97 51.257c2.098.238 4.091 1.145 6.158 1.64a3.042 3.042 0 001.593.062c.802-.251 1.455-1.093 2.287-1.068.511 0 .965.366 1.387.702.676.52 1.313 1.09 1.903 1.705 1.425 1.555 2.308 3.648 3.608 5.34 1.3 1.691 3.35 3.006 5.196 2.23-1.256 4.918-5.37 8.665-9.82 8.971-1.776.12-3.596-.251-5.314.273-.428.175-.88.286-1.34.328-.99 0-1.787-.913-2.404-1.8-1.447-2.088-2.591-4.46-4.22-6.365-.544-.628-1.172-1.227-1.933-1.342-.761-.114-1.46.249-2.137.601-1.118.583-2.26 1.186-3.127 2.187-.868 1-1.414 2.486-1.055 3.825.193.727.633 1.383.642 2.143.016 1.21-1.05 2.098-1.26 3.279-.046.496-.064.994-.051 1.492-.092 1.618-1.145 2.943-2.243 3.96-.43.396-.903.82-1.028 1.431-.084.416 0 .859-.054 1.28-.16 1.049-1.202 1.582-2.124 1.72a6.153 6.153 0 01-3.187-.379c1.29-.615 2.083-2.355 1.784-3.919-.41-2.164-2.575-3.716-2.39-5.921a6.912 6.912 0 01.598-1.949c.472-1.189.815-2.426 1.023-3.689.163-.978.242-2.014-.063-2.943-.272-.85-.84-1.522-1.321-2.238a12.725 12.725 0 01-1.531-3.153 2.196 2.196 0 01-.147-1.041c.106-.425.338-.806.666-1.093 1.183-1.25 2.447-2.55 4.032-2.905a8.908 8.908 0 012.29-.09 26.514 26.514 0 003.978-.17c1.087-.128 2.925-.11 3.847-.82.86-.664 1.343-1.492 2.401-1.913a6.988 6.988 0 013.355-.371zM90.173 129.306s4.895 8.477 3.411 11.083l-3.411-11.083zM98.708 152.528l-6.373-8.22v.143s-.368-2.661.846-1.768c2.659 1.958 6.913 5.166 7.005 5.718.092.553-.862 2.76-1.478 4.127z"
opacity={0.1}
/>
<G fill="#000" opacity={0.1}>
<Path d="M89.354 75.965s.542 2.223-1.205 3.335c2.686-.456 2.806-2.537 2.713-3.44a8.564 8.564 0 01-1.508.105zM39.033 107.297s24.365-13.428 27.953-20.273c2.565-4.913 8.747-7.86 12.03-9.133-2.393.81-10.459 3.861-13.487 9.66-3.574 6.844-27.953 20.275-27.953 20.275l1.457-.529zM94.097 74.918c4.147-1.282 8.11-4.482 8.11-4.482L89.484 61.48l.29-1.225-1.218-.486-.53 2.24 12.715 8.952a30.755 30.755 0 01-6.644 3.958zM94.17 105.258a31.75 31.75 0 014.983-1.252l.022-.254a33.94 33.94 0 00-5.004 1.506zM78.761 119.05h-.116a.24.24 0 01-.272-.038c.088.026.18.039.272.038.434-.251 1.085-2.218-.272-13.598-1.46-12.141-7.205-11.194-10.348-9.797 3.214-.88 7.634-.118 8.891 10.323 1.37 11.38.716 13.347.271 13.598a2.94 2.94 0 001.574-.526zM77.187 119.579a.959.959 0 01-.271-.038.24.24 0 00.271.038z" />
</G>
<Path
fill="#0B4870"
d="M92.128 52.364a3.042 3.042 0 001.593.06c.802-.248 1.455-1.093 2.287-1.068.511.016.965.366 1.387.702.675.52 1.312 1.09 1.903 1.706 1.425 1.555 2.308 3.648 3.608 5.34 1.3 1.692 3.35 3.007 5.196 2.23-1.256 4.92-5.37 8.667-9.821 8.973-1.776.123-3.595-.248-5.313.274-.428.176-.88.287-1.34.328-.99 0-1.787-.913-2.404-1.802-1.447-2.088-2.591-4.457-4.22-6.362-.544-.632-1.172-1.23-1.933-1.345-.762-.115-1.46.251-2.138.604-1.117.582-2.259 1.183-3.126 2.187-.868 1.003-1.414 2.484-1.055 3.826.193.727.633 1.383.641 2.143.017 1.213-1.05 2.099-1.259 3.28a12.37 12.37 0 00-.051 1.492c-.093 1.618-1.145 2.94-2.243 3.96-.43.394-.903.82-1.028 1.43-.085.418 0 .858-.055 1.281-.16 1.05-1.202 1.583-2.123 1.72a6.096 6.096 0 01-3.187-.38c1.289-.613 2.083-2.356 1.784-3.917-.41-2.165-2.575-3.72-2.39-5.923a6.894 6.894 0 01.598-1.948c.472-1.19.814-2.429 1.022-3.693.163-.976.242-2.011-.062-2.944-.272-.847-.84-1.522-1.322-2.238a12.752 12.752 0 01-1.53-3.151 2.227 2.227 0 01-.147-1.044c.109-.42.34-.796.666-1.08 1.183-1.249 2.447-2.547 4.032-2.905a9.031 9.031 0 012.29-.088 26.89 26.89 0 003.977-.17c1.088-.128 2.926-.111 3.848-.82.86-.66 1.343-1.491 2.4-1.912a7.035 7.035 0 013.356-.386c2.1.24 4.092 1.146 6.159 1.64z"
/>
<Path
fill="#fff"
d="M136.05 140.917c8.446 0 15.293-6.853 15.293-15.306s-6.847-15.305-15.293-15.305c-8.446 0-15.292 6.852-15.292 15.305s6.846 15.306 15.292 15.306z"
/>
<Path
fill="#3ACC6C"
fillRule="evenodd"
d="M143.556 142.008a20.32 20.32 0 0012.533-18.772c0-11.222-9.09-20.319-20.302-20.319a20.3 20.3 0 00-18.756 12.543 20.332 20.332 0 004.4 22.144 20.29 20.29 0 0022.125 4.404zm4.945-23.089l-15.06 15.073v.011a1.311 1.311 0 01-1.853 0l-8.515-8.519a1.318 1.318 0 010-1.855l1.853-1.865a1.312 1.312 0 011.853 0l5.735 5.753 12.283-12.293a1.303 1.303 0 011.851 0l1.853 1.841a1.308 1.308 0 010 1.854z"
clipRule="evenodd"
/>
<Defs>
<LinearGradient
id="success_svg__paint0_linear"
x1={76.797}
x2={76.797}
y1={120.666}
y2={120.529}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="gray" stopOpacity={0.25} />
<Stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
<Stop offset={1} stopColor="gray" stopOpacity={0.1} />
</LinearGradient>
<LinearGradient
id="success_svg__paint1_linear"
x1={112.846}
x2={112.846}
y1={158.319}
y2={50.666}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="gray" stopOpacity={0.25} />
<Stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
<Stop offset={1} stopColor="gray" stopOpacity={0.1} />
</LinearGradient>
</Defs>
</Svg>
);
}
