react-native-svg#Defs TypeScript Examples
The following examples show how to use
react-native-svg#Defs.
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: 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 #2
| 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 #3
| Source File: Search.tsx From react-native-meetio with MIT License | 6 votes |
|
function Search({ width = 24, height = 24, fillColor = "#757575" }: Props) {
return (
<Svg viewBox="0 0 24 24" {...{ width, height }}>
<Defs>
<ClipPath id="prefix__a">
<Path fill="none" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
<G data-name="Icons/search/gray" clipPath="url(#prefix__a)">
<Path fill="rgba(52,151,253,0)" d="M0 0h24v24H0z" />
<Path
// eslint-disable-next-line max-len
d="M16.117 14.96l4.643 4.64a.82.82 0 01-1.16 1.16l-4.64-4.643a7.363 7.363 0 111.157-1.157zm-5.753 1.131a5.727 5.727 0 10-5.728-5.727 5.727 5.727 0 005.728 5.727z"
fill={fillColor}
/>
</G>
</Svg>
);
}
Example #4
| Source File: Like.tsx From react-native-meetio with MIT License | 6 votes |
|
function Like({ width = 24, height = 24, strokeColor = "#757575" }: Props) {
return (
<Svg viewBox="0 0 24 24" {...{ width, height }}>
<Defs>
<ClipPath id="prefix__a">
<Path fill="none" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
<G data-name="icons/like" clipPath="url(#prefix__a)" fill="none">
<Path d="M0 0h24v24H0z" />
<Path
// eslint-disable-next-line max-len
d="M19.711 6.029a4.828 4.828 0 00-6.829 0l-.93.93-.93-.93a4.829 4.829 0 00-6.829 6.829l.93.93 6.829 6.828 6.829-6.829.93-.93a4.828 4.828 0 000-6.829z"
stroke={strokeColor}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
/>
</G>
</Svg>
);
}
Example #5
| Source File: Comment.tsx From react-native-meetio with MIT License | 6 votes |
|
function Comment({ width = 24, height = 24, strokeColor = "#757575" }: Props) {
return (
<Svg viewBox="0 0 24 24" {...{ width, height }}>
<Defs>
<ClipPath id="prefix__a">
<Path fill="none" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
<G data-name="icons/comment" clipPath="url(#prefix__a)" fill="none">
<Path d="M0 0h24v24H0z" />
<Path
// eslint-disable-next-line max-len
d="M20.5 15.167a1.778 1.778 0 01-1.778 1.778H8.056L4.5 20.5V6.278A1.778 1.778 0 016.278 4.5h12.444A1.778 1.778 0 0120.5 6.278z"
stroke={strokeColor}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
/>
</G>
</Svg>
);
}
Example #6
| Source File: Chevron.tsx From react-native-meetio with MIT License | 6 votes |
|
function Chevron({ width = 24, height = 24, fillColor = "#78849e" }: Props) {
return (
<Svg viewBox="0 0 24 24" {...{ width, height }}>
<Defs>
<ClipPath id="prefix__a">
<Path fill="none" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
<G data-name="icons/chevron" opacity={0.563} clipPath="url(#prefix__a)">
<Path fill="none" d="M0 0h24v24H0z" />
<Rect
width={8}
height={2}
rx={1}
transform="rotate(45 -6.01 14.389)"
fill={fillColor}
/>
<Rect
data-name="line"
width={8}
height={2}
rx={1}
transform="rotate(-45 22.696 -6.58)"
fill={fillColor}
/>
</G>
</Svg>
);
}
Example #7
| Source File: ArrowLeft.tsx From react-native-meetio with MIT License | 6 votes |
|
function ArrowLeft({
width = 24,
height = 24,
strokeColor = "#757575",
}: Props) {
return (
<Svg viewBox="0 0 24 24" {...{ width, height }}>
<Defs>
<ClipPath id="prefix__a">
<Path fill="none" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
<G data-name="icons/dark/back" clipPath="url(#prefix__a)" fill="none">
<Path d="M0 0h24v24H0z" />
<G
stroke={strokeColor}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
>
<Path data-name="Line 36" d="M19 12H5" />
<Path data-name="Path 12" d="M12 19l-7-7 7-7" />
</G>
</G>
</Svg>
);
}
Example #8
| Source File: Add.tsx From react-native-meetio with MIT License | 6 votes |
|
function Add({ width = 24, height = 24, fillColor = "#241332" }: Props) {
return (
<Svg viewBox="0 0 24 24" {...{ width, height }}>
<Defs>
<ClipPath id="prefix__a">
<Path fill="none" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
<G data-name="icon/add" clipPath="url(#prefix__a)">
<Path fill="none" d="M0 0h24v24H0z" />
<Path
// eslint-disable-next-line max-len
d="M11.25 19.25v-6.5h-6.5a.75.75 0 010-1.5h6.5v-6.5a.75.75 0 111.5 0v6.5h6.5a.75.75 0 010 1.5h-6.5v6.5a.75.75 0 11-1.5 0z"
fill={fillColor}
/>
</G>
</Svg>
);
}
Example #9
| Source File: Azerbaijan.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 SvgAzerbaijan(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(#azerbaijan_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="azerbaijan_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(#azerbaijan_svg__a)">
<Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
<Mask id="azerbaijan_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(#azerbaijan_svg__b)">
<Path fill="#24AAD5" fillRule="evenodd" d="M-8 13h56V0H-8v13z" clipRule="evenodd" />
<Path fill="#21BF75" fillRule="evenodd" d="M-8 40h56V27H-8v13z" clipRule="evenodd" />
<Path fill="#ED1845" fillRule="evenodd" d="M-8 27h56V13H-8v14z" clipRule="evenodd" />
<G filter="url(#azerbaijan_svg__filter0_d)">
<Path
fill="#fff"
fillRule="evenodd"
d="M20 23.5c.823 0 1.587-.248 2.223-.674a3.333 3.333 0 110-6.652A4 4 0 1020 23.5zm4-4a1.333 1.333 0 11-2.667 0 1.333 1.333 0 012.667 0z"
clipRule="evenodd"
/>
</G>
</G>
</G>
<Defs>
<Pattern
id="azerbaijan_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#azerbaijan_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #10
| Source File: hotel.tsx From react-native-paper-onboarding with MIT License | 5 votes |
|
HotelSVG = ({ color = '#fff' }: SVGProps) => (
<Svg width={197} height={199} viewBox="0 0 197 199">
<Defs>
<Path id="prefix__a" d="M0 0h197v199H0z" />
<Path
d="M94.09.797c51.914 0 94 42.086 94 94 0 24.413-9.307 46.652-24.566 63.364l31.386 31.382a5.011 5.011 0 01.004 7.078 5 5 0 01-7.078-.004l-31.435-31.44c-16.587 14.697-38.407 23.62-62.311 23.62-51.914 0-94-42.086-94-94s42.086-94 94-94zm0 10c-46.39 0-84 37.61-84 84s37.61 84 84 84 84-37.61 84-84-37.61-84-84-84z"
id="prefix__c"
/>
<Path id="prefix__e" d="M0 0h57v12H0z" />
<Path
d="M6.848 1.785c0-.2.035-.387.109-.558.074-.176.172-.325.293-.454.121-.132.266-.234.43-.304.16-.074.34-.11.527-.11.191 0 .371.036.531.11.164.07.309.172.434.304.125.13.223.278.293.454.07.171.105.359.105.558V9.57c0 .203-.035.387-.105.563a1.414 1.414 0 01-.727.758c-.16.074-.34.109-.531.109a1.25 1.25 0 01-.527-.11 1.344 1.344 0 01-.43-.304 1.473 1.473 0 01-.395-1.016l-.007-3.023H3.074V9.57c0 .203-.035.387-.105.563a1.414 1.414 0 01-.727.758c-.164.074-.34.109-.531.109a1.281 1.281 0 01-.957-.414A1.473 1.473 0 01.355 9.57V1.785c0-.2.04-.387.11-.558.07-.176.168-.325.289-.454A1.281 1.281 0 011.71.36c.191 0 .367.036.531.11.164.07.309.172.434.304.125.13.222.278.293.454.07.171.105.359.105.558v2.676h3.774V1.785zm9.117 3.906c0 1.211.195 2.125.578 2.743.387.617.988.925 1.812.925.805 0 1.403-.308 1.801-.921.395-.618.594-1.532.594-2.747 0-.586-.05-1.109-.145-1.566-.093-.457-.238-.84-.437-1.152a1.97 1.97 0 00-.742-.715c-.301-.164-.656-.246-1.07-.246-.41 0-.766.082-1.067.246-.3.164-.55.402-.746.715-.195.312-.34.695-.434 1.152-.097.457-.144.98-.144 1.566zm-2.848 0c0-.808.11-1.55.324-2.234a4.835 4.835 0 01.98-1.766A4.444 4.444 0 0116.056.535c.652-.281 1.418-.418 2.3-.418.852 0 1.606.133 2.262.403.653.27 1.2.648 1.64 1.136.438.492.77 1.078.997 1.762.223.684.336 1.441.336 2.273 0 .813-.11 1.563-.328 2.247a4.858 4.858 0 01-.989 1.761 4.509 4.509 0 01-1.64 1.149c-.656.273-1.414.41-2.278.41-.847 0-1.593-.133-2.246-.399a4.448 4.448 0 01-1.644-1.12 4.821 4.821 0 01-1.008-1.759c-.227-.683-.34-1.445-.34-2.289zm13.66-3.394a1.067 1.067 0 01-.965-.59.906.906 0 010-.754 1.052 1.052 0 01.965-.594h6.688a1.046 1.046 0 01.734.285.93.93 0 01.227.31.854.854 0 01.086.378.825.825 0 01-.086.375.914.914 0 01-.227.305 1.046 1.046 0 01-.734.285H31.5V9.57c0 .203-.035.387-.105.563a1.414 1.414 0 01-.727.758c-.16.074-.34.109-.531.109a1.25 1.25 0 01-.528-.11 1.344 1.344 0 01-.43-.304 1.473 1.473 0 01-.394-1.016V2.297h-2.008zM39.11 11c-.246 0-.457-.05-.625-.152a1.25 1.25 0 01-.406-.403 1.677 1.677 0 01-.219-.55 3.014 3.014 0 01-.066-.618v-6.98c0-.277.016-.535.05-.77.036-.238.11-.441.227-.613s.29-.305.516-.402c.223-.098.523-.149.906-.149h4.703a1.05 1.05 0 01.723.285.96.96 0 01.223.305.916.916 0 010 .742.988.988 0 01-.547.5c-.125.051-.258.075-.399.075h-3.773v2.375h3.441c.145 0 .278.023.403.07.12.05.23.117.324.207a.893.893 0 01.219.305.842.842 0 01.082.367.917.917 0 01-.3.672 1.023 1.023 0 01-.325.199c-.125.05-.258.074-.403.074h-3.441v2.563h3.957c.129 0 .254.027.367.074.117.05.219.117.305.207.09.086.156.187.207.3a.98.98 0 01.07.372.98.98 0 01-.07.37.941.941 0 01-.512.5.895.895 0 01-.367.075h-5.27zm16.364-1.95a1.014 1.014 0 01.691.285 1.014 1.014 0 01.285.692 1.014 1.014 0 01-.285.688 1.014 1.014 0 01-.691.285h-5.016c-.262 0-.484-.059-.66-.172a1.271 1.271 0 01-.422-.453 2.137 2.137 0 01-.219-.64A4.582 4.582 0 0149.094 9V1.785a1.466 1.466 0 01.394-1.012 1.27 1.27 0 01.43-.304c.164-.074.34-.11.531-.11.192 0 .367.036.531.11.165.07.31.172.434.304.125.13.223.278.293.454.07.171.105.359.105.558l.008 7.266h3.653z"
id="prefix__g"
/>
</Defs>
<G fill="none" fillRule="evenodd">
<G opacity={0.5}>
<Mask id="prefix__b" fill={color}>
<Use xlinkHref="#prefix__a" />
</Mask>
<G mask="url(#prefix__b)">
<Mask id="prefix__d" fill={color}>
<Use xlinkHref="#prefix__c" />
</Mask>
<Path
fill={color}
fillRule="nonzero"
mask="url(#prefix__d)"
d="M-45.918 94.797L94.09-45.211l174.863 174.863L128.945 269.66z"
/>
</G>
</G>
<Path
d="M53 86a2 2 0 011.996-2h76.008c1.101 0 1.996.902 1.996 2v19a2 2 0 01-1.996 2H54.996A2.003 2.003 0 0153 105V86zM57 107h72v40H57zM57 84h72V48c0-2.21-1.797-4-4-4H61c-2.21 0-4 1.797-4 4v36zM62 44h62v-3c0-1.656-1.352-3-2.992-3H64.992A3 3 0 0062 41v3z"
stroke={color}
strokeWidth={2}
/>
<Path
d="M78 147h30v-26.008a1.996 1.996 0 00-1.992-1.992H79.992A1.996 1.996 0 0078 120.992V147zM93 120v26"
stroke={color}
strokeWidth={2}
/>
<G transform="translate(66 90)">
<Mask id="prefix__f" fill={color}>
<Use xlinkHref="#prefix__e" />
</Mask>
<G mask="url(#prefix__f)">
<Mask id="prefix__h" fill={color}>
<Use xlinkHref="#prefix__g" />
</Mask>
<Path
fill={color}
fillRule="nonzero"
mask="url(#prefix__h)"
d="M-4.645-4.883H61.45v21.14H-4.645z"
/>
</G>
</G>
<Path
d="M67 60c0-3.313 2.691-6 6-6 3.313 0 6 2.676 6 6v13.008c0 .547-.457.992-1.004.992h-9.992A1.006 1.006 0 0167 73.008V60zM87 60c0-3.313 2.691-6 6-6 3.313 0 6 2.676 6 6v13.008c0 .547-.457.992-1.004.992h-9.992A1.006 1.006 0 0187 73.008V60zM107 60c0-3.313 2.691-6 6-6 3.313 0 6 2.676 6 6v13.008c0 .547-.457.992-1.004.992h-9.992a1.006 1.006 0 01-1.004-.992V60z"
stroke={color}
strokeWidth={2}
/>
<Path
stroke={color}
strokeWidth={2}
strokeLinecap="round"
d="M47 147h92M82 163h12M73 155h10M93 155h20M98 133v2M88 133v2"
/>
<Path stroke={color} strokeWidth={2} d="M58 111h70" />
</G>
</Svg>
)
Example #11
| Source File: store.tsx From react-native-paper-onboarding with MIT License | 5 votes |
|
StoreSVG = ({ color = '#fff' }: SVGProps) => (
<Svg width={197} height={199} viewBox="0 0 197 199">
<Defs>
<Path
d="M94.09 10.797c-46.392 0-84 37.609-84 84 0 46.392 37.608 84 84 84s84-37.608 84-84c0-46.391-37.608-84-84-84zm0-10c51.915 0 94 42.086 94 94 0 24.4-9.296 46.629-24.54 63.337l-.026.027 31.385 31.383a4.999 4.999 0 11-7.071 7.071L156.4 165.18l-.047.042c-16.22 14.352-37.436 23.187-60.708 23.564l-1.555.013c-51.914 0-94-42.086-94-94 0-51.915 42.086-94 94-94z"
id="prefix__a"
/>
<Path
d="M4.947.116a8.21 8.21 0 011.663.19c.288.064.565.146.831.246s.502.217.707.352c.205.134.37.286.494.457.125.171.187.362.187.572a.808.808 0 01-.256.6.879.879 0 01-.6.234.86.86 0 01-.404-.095 9.526 9.526 0 00-.64-.3 4.839 4.839 0 00-.59-.205 4.068 4.068 0 00-.604-.117 5.892 5.892 0 00-.685-.037c-.235 0-.465.02-.692.062-.227.042-.43.108-.608.198-.178.09-.323.206-.432.348a.823.823 0 00-.165.52.82.82 0 00.234.593c.156.162.36.3.612.418.251.117.536.22.853.308.317.087.637.178.96.27.517.157.987.323 1.41.498.422.176.783.386 1.083.63.3.245.533.534.696.868.164.335.246.736.246 1.205 0 .513-.102.974-.304 1.384-.203.41-.495.76-.876 1.048-.38.288-.84.509-1.38.663-.54.153-1.146.23-1.82.23a8.927 8.927 0 01-2.066-.241 7.04 7.04 0 01-.923-.286 4.026 4.026 0 01-.754-.38 1.915 1.915 0 01-.505-.466.901.901 0 01-.183-.538c0-.122.025-.242.076-.36.052-.116.118-.223.198-.318.08-.095.171-.172.271-.23a.584.584 0 01.297-.088c.088 0 .173.014.256.044.083.029.167.064.253.106.085.041.173.086.264.135.09.05.186.093.289.132.337.152.715.288 1.135.41.42.122.86.183 1.318.183.25 0 .485-.023.707-.07.222-.046.418-.116.586-.212.169-.095.302-.218.4-.37a.992.992 0 00.146-.549 1.02 1.02 0 00-.33-.765 1.615 1.615 0 00-.359-.25 3.438 3.438 0 00-.432-.186l-.33-.117A3.164 3.164 0 015 6.778a2.516 2.516 0 00-.19-.063l-.382-.11a4.31 4.31 0 01-.212-.054 2.417 2.417 0 01-.293-.103 3.326 3.326 0 00-.154-.055l-.688-.242a8.018 8.018 0 01-1.143-.505 3.011 3.011 0 01-.776-.593c-.2-.22-.348-.47-.443-.751a3.045 3.045 0 01-.143-.978c0-.488.101-.93.304-1.325A2.87 2.87 0 011.75.988 4.228 4.228 0 013.127.343a6.737 6.737 0 011.82-.227zm22.185 0c.855 0 1.61.135 2.263.403a4.414 4.414 0 011.641 1.139c.44.49.772 1.078.996 1.761.225.684.337 1.44.337 2.27 0 .816-.11 1.566-.33 2.25a4.81 4.81 0 01-.988 1.761c-.44.49-.986.873-1.64 1.146-.655.274-1.414.41-2.279.41-.844 0-1.593-.132-2.245-.395a4.455 4.455 0 01-1.644-1.124 4.806 4.806 0 01-1.007-1.755c-.227-.683-.34-1.447-.34-2.292 0-.806.108-1.55.325-2.234a4.858 4.858 0 01.978-1.765A4.473 4.473 0 0124.833.534c.654-.279 1.42-.418 2.3-.418zm-8.357.242c.19 0 .368.037.531.11.164.073.308.174.433.304a1.467 1.467 0 01.4 1.014l-.001 7.786c0 .2-.036.387-.107.56-.07.173-.168.325-.292.454-.125.13-.269.23-.433.304-.163.073-.34.11-.53.11-.191 0-.368-.037-.532-.11a1.33 1.33 0 01-.428-.304 1.458 1.458 0 01-.396-1.014l-.007-3.025h-3.772v3.025c0 .2-.035.387-.106.56-.07.173-.169.325-.293.454-.125.13-.269.23-.432.304-.164.073-.34.11-.531.11-.19 0-.368-.037-.531-.11a1.33 1.33 0 01-.429-.304 1.458 1.458 0 01-.395-1.014V1.786a1.468 1.468 0 01.395-1.014c.122-.13.265-.231.429-.304.163-.074.34-.11.53-.11.191 0 .368.037.532.11.163.073.307.174.432.304.124.13.222.28.293.454.07.173.106.36.106.56V4.46h3.772V1.787c0-.2.037-.387.11-.56.073-.173.17-.325.293-.454.122-.13.265-.231.428-.304.164-.074.341-.11.531-.11zm19.776 0a8.77 8.77 0 011.622.146c.52.098.98.27 1.38.517.401.246.72.582.96 1.007.24.425.36.962.36 1.611 0 .562-.105 1.049-.312 1.461-.208.413-.5.756-.88 1.03a3.963 3.963 0 01-1.365.611 7.218 7.218 0 01-1.765.201h-1.678v2.63c0 .2-.036.387-.11.56a1.477 1.477 0 01-.296.454c-.124.13-.268.23-.432.304-.164.073-.34.11-.531.11-.19 0-.367-.037-.531-.11a1.33 1.33 0 01-.429-.304 1.46 1.46 0 01-.395-1.014v-7.2c0-.278.018-.54.055-.787a1.56 1.56 0 01.234-.641c.12-.18.296-.324.528-.429.231-.105.545-.157.94-.157h2.645zM27.132 2.013c-.41 0-.765.082-1.065.246a2 2 0 00-.744.714c-.195.312-.34.697-.436 1.153a7.706 7.706 0 00-.142 1.564c0 1.21.192 2.125.578 2.743.386.617.989.926 1.81.926.805 0 1.406-.307 1.801-.922.396-.616.593-1.531.593-2.747 0-.586-.047-1.107-.143-1.564-.095-.456-.24-.84-.435-1.153a2 2 0 00-.744-.714c-.3-.164-.658-.246-1.073-.246zm11.096-.007h-1.355v3.303h1.231c.313 0 .598-.027.857-.08.259-.054.48-.143.663-.268.183-.124.326-.29.428-.494.103-.205.154-.481.154-.828 0-.342-.049-.611-.146-.81a1.257 1.257 0 00-.407-.479 1.714 1.714 0 00-.622-.264 3.703 3.703 0 00-.803-.08z"
id="prefix__c"
/>
</Defs>
<G fill="none" fillRule="evenodd">
<G opacity={0.5}>
<Mask id="prefix__b" fill={color}>
<Use xlinkHref="#prefix__a" />
</Mask>
<Path
fill={color}
mask="url(#prefix__b)"
d="M-45.917 94.797L94.09-45.21l174.863 174.863L128.946 269.66z"
/>
</G>
<Path
d="M127.562 90h-75.57c-.54 0-.992.449-.992 1.002v5.068c0 3.267 2.659 5.93 5.939 5.93a5.943 5.943 0 005.866-5h.289a5.944 5.944 0 005.865 5 5.943 5.943 0 005.867-5h.288a5.944 5.944 0 005.866 5 5.943 5.943 0 005.866-5h.289a5.944 5.944 0 005.866 5c2.49 0 4.63-1.537 5.51-3.715A5.946 5.946 0 00104.02 102a5.943 5.943 0 005.866-5h.289a5.944 5.944 0 005.866 5 5.943 5.943 0 005.866-5h.288a5.944 5.944 0 005.866 5c3.273 0 5.939-2.655 5.939-5.93v-5.068c0-.546-.444-1.002-.992-1.002h-5.446z"
stroke={color}
strokeWidth={2}
strokeLinejoin="round"
/>
<Path
stroke={color}
strokeWidth={2}
d="M104.071 102v34M130.071 102v34M126.071 102v34M59.071 102v34M55.071 102v34"
/>
<Path
stroke={color}
strokeWidth={2}
strokeLinecap="round"
d="M48.071 137h92M83.071 153h12M74.071 145h10M94.071 145h20M108.071 122v2"
/>
<Path
d="M109.071 114.01c0-.558.456-1.01 1.003-1.01h9.995a1 1 0 011.002 1.01v1.98a1.01 1.01 0 01-1.002 1.01h-9.995a1 1 0 01-1.003-1.01v-1.98z"
stroke={color}
strokeWidth={2}
/>
<Path
stroke={color}
strokeWidth={2}
strokeLinejoin="round"
d="M111.071 113l3.965-5h0l3.964 5"
/>
<Path
stroke={color}
strokeWidth={2}
d="M60 125h44M51 90c0-.552.323-1.297.74-1.68L63.34 77.68c.409-.376 1.183-.68 1.742-.68h54.997c.553 0 1.333.309 1.733.68l11.457 10.64c.404.376.732 1.133.732 1.68h0-83 0zM110.071 71v7M75.071 71v7M65 55c0-2.21 1.799-4 4-4h47a4 4 0 014 4v13c0 2.21-1.799 4-4 4H69a4 4 0 01-4-4V55z"
/>
<G transform="translate(71 56)">
<Mask id="prefix__d" fill={color}>
<Use xlinkHref="#prefix__c" />
</Mask>
<Path
fill={color}
mask="url(#prefix__d)"
d="M-4.564-4.884h52.436v21.14H-4.564z"
/>
</G>
</G>
</Svg>
)
Example #12
| Source File: FallAsleepWindow.tsx From nyxo-app with GNU General Public License v3.0 | 5 votes |
|
FallAsleepWindow: FC<FallAsleepWindowProps> = ({
goToSleepWindowStart,
goToSleepWindowEnd,
x,
y,
radius
}) => {
const startAngle = clockTimeToAngle(goToSleepWindowStart)
const endAngle = clockTimeToAngle(goToSleepWindowEnd)
const startTime = format(
new Date(goToSleepWindowStart ?? new Date()),
'HH:mm'
)
const endTime = format(new Date(goToSleepWindowEnd ?? new Date()), 'HH:mm')
if (
startAngle === undefined ||
endAngle === undefined ||
startAngle === null ||
endAngle === null
) {
return null
}
const path = describeArc(x, y, radius, startAngle, endAngle)
const textPath = describeReverseArc(x, y, radius - 10, startAngle, endAngle)
const time = `${startTime} - ${endTime}`
return (
<G>
<G>
<Defs>
<Path
id="textPath"
d={textPath}
fill="none"
stroke="none"
strokeWidth="1"
/>
</Defs>
<Backdrop d={textPath} fill="none" strokeOpacity={1} strokeWidth="20" />
<Text
fill={colors.fallAsleep}
fontSize="15"
fontWeight="bold"
fontFamily={fonts.bold}>
<TextPath
href="#textPath"
startOffset="50%"
textAnchor="end"
midLine="smooth">
<TSpan dy={5} transform={{ scaleX: 1 }} textAnchor="middle">
{time}
</TSpan>
</TextPath>
</Text>
</G>
<Path
d={path}
fill="transparent"
strokeLinecap="round"
stroke={colors.bedTimeColor}
strokeWidth={5}
/>
</G>
)
}
Example #13
| 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 #14
| Source File: Armenia.tsx From react-native-crypto-wallet-app with MIT License | 5 votes |
|
function SvgArmenia(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(#armenia_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="armenia_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(#armenia_svg__a)">
<Rect width={59} height={43} x={-9} y={-3} fill="#fff" rx={2} />
<Mask id="armenia_svg__b" width={59} height={43} x={-9} y={-3} maskUnits="userSpaceOnUse">
<Rect width={59} height={43} x={-9} y={-3} fill="#fff" rx={2} />
</Mask>
<G fillRule="evenodd" clipRule="evenodd" mask="url(#armenia_svg__b)">
<Path fill="#1047B9" d="M-9 28h59V13H-9v15z" />
<Path fill="#F01C31" d="M-9 13h59V0H-9v13z" />
<Path fill="#FECB2F" d="M-9 40h59V27H-9v13z" />
</G>
</G>
<Defs>
<Pattern
id="armenia_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#armenia_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #15
| Source File: Argentine.tsx From react-native-crypto-wallet-app with MIT License | 5 votes |
|
function SvgArgentine(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(#argentine_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="argentine_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(#argentine_svg__a)">
<Rect
width={55.5}
height={39.5}
x={-7.75}
y={0.25}
fill="#fff"
stroke="#F5F5F5"
strokeWidth={0.5}
rx={1.75}
/>
<Mask id="argentine_svg__b" width={56} height={40} x={-8} y={0} maskUnits="userSpaceOnUse">
<Rect
width={55.5}
height={39.5}
x={-7.75}
y={0.25}
fill="#fff"
stroke="#fff"
strokeWidth={0.5}
rx={1.75}
/>
</Mask>
<G mask="url(#argentine_svg__b)">
<Path
fill="#88BBE8"
fillRule="evenodd"
d="M-8 13h56V0H-8v13zM-8 40h56V27H-8v13z"
clipRule="evenodd"
/>
<Path
fill="#F4B32E"
stroke="#DB7A2C"
strokeWidth={0.667}
d="M20 24.333a4.333 4.333 0 100-8.666 4.333 4.333 0 000 8.666z"
/>
</G>
</G>
<Defs>
<Pattern
id="argentine_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#argentine_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #16
| 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 #17
| Source File: Albania.tsx From react-native-crypto-wallet-app with MIT License | 5 votes |
|
function SvgAlbania(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(#albania_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="albania_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(#albania_svg__a)">
<Mask id="albania_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(#albania_svg__b)">
<Path fill="#EE343C" d="M-8 0h56v40H-8z" />
<Path
fill="#262626"
fillRule="evenodd"
d="M16.959 8.915a.667.667 0 00-.848-.084l-2.53 1.71a.667.667 0 00.071 1.146l3.863 1.957a.667.667 0 01.365.595v1.577a.667.667 0 01-.667.667H15.42a.667.667 0 01-.3-.072l-4.664-2.362a.667.667 0 00-.776.126l-1.636 1.658a.667.667 0 00.173 1.063l3.413 1.729c.454.23.493.862.072 1.147L10.029 20.9a.667.667 0 00.24 1.206l3.547.718a.667.667 0 01.27 1.185l-2.49 1.891c-.508.387-.234 1.198.404 1.198h.557a.67.67 0 00.164-.02l3.494-.886a.667.667 0 01.721 1.013l-.996 1.514a.667.667 0 00.557 1.033h2.21c.288 0 .544.185.634.458l.525 1.598c.201.611 1.066.611 1.267 0l.526-1.598a.667.667 0 01.633-.458h2.21c.531 0 .849-.59.557-1.033l-.996-1.514a.667.667 0 01.72-1.012l3.495.885a.67.67 0 00.164.02h.557c.639 0 .912-.811.404-1.198l-2.49-1.891a.667.667 0 01.27-1.185l3.547-.718a.667.667 0 00.24-1.206L29.3 19.77a.667.667 0 01.072-1.146l3.412-1.73a.667.667 0 00.173-1.062l-1.636-1.658a.667.667 0 00-.776-.126l-4.663 2.362a.667.667 0 01-.301.072h-1.794a.667.667 0 01-.667-.667V14.24c0-.252.141-.481.365-.595l3.863-1.957a.666.666 0 00.072-1.147l-2.531-1.71a.667.667 0 00-.848.085l-3.066 3.106a.667.667 0 01-.949 0L16.96 8.915z"
clipRule="evenodd"
/>
</G>
</G>
<Defs>
<Pattern
id="albania_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#albania_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #18
| Source File: Afghanistan.tsx From react-native-crypto-wallet-app with MIT License | 5 votes |
|
function SvgAfganistan(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(#afganistan_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="afganistan_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(#afganistan_svg__a)">
<Rect width={56} height={40} x={-8} fill="#fff" rx={2} />
<Mask id="afganistan_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(#afganistan_svg__b)">
<Path fill="#1AB11F" d="M19 0h29v40H19z" />
<Path fill="#262626" fillRule="evenodd" d="M-8 40h19V0H-8v40z" clipRule="evenodd" />
<Path fill="#DC0D18" fillRule="evenodd" d="M10 40h19V0H10v40z" clipRule="evenodd" />
<Path
fill="#fff"
d="M17.09 22.43l.348-.569-.347.57zm-.693 1.14l-.347.569.347-.57zm6.434-.147l.372.554-.372-.554zm-.743-1.106l.371.553-.371-.553zM15.333 18c0-.736-.597-1.333-1.333-1.333V18h1.333zm2.105 3.861c-1.242-.756-2.105-2.189-2.105-3.861H14c0 2.136 1.103 4 2.744 5l.694-1.139zm.444 1.833a1.333 1.333 0 00-.444-1.833L16.744 23l1.138.694zm-1.832.445c.629.383 1.449.184 1.832-.445L16.744 23l-.694 1.139zM12.667 18c0 2.599 1.344 4.896 3.383 6.139L16.744 23C15.104 22 14 20.136 14 18h-1.333zM14 16.667c-.736 0-1.333.597-1.333 1.333H14v-1.333zM26.333 18c0-.736-.597-1.333-1.333-1.333V18h1.333zm-3.13 5.977c1.896-1.274 3.13-3.487 3.13-5.977H25c0 2.046-1.013 3.844-2.54 4.87l.743 1.107zm-1.85-.364c.41.612 1.239.774 1.85.364l-.744-1.107-1.106.743zm.363-1.85a1.333 1.333 0 00-.363 1.85l1.106-.743-.743-1.107zM23.666 18c0 1.602-.791 2.985-1.95 3.763l.743 1.107C23.987 21.844 25 20.046 25 18h-1.333zM25 16.667c-.736 0-1.333.597-1.333 1.333H25v-1.333z"
opacity={0.75}
/>
<Path
fill="#fff"
fillOpacity={0.5}
fillRule="evenodd"
d="M19.5 21c1.38 0 2.5-1.79 2.5-4s-1.12-4-2.5-4-2.5 1.79-2.5 4 1.12 4 2.5 4z"
clipRule="evenodd"
/>
</G>
</G>
<Defs>
<Pattern
id="afganistan_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.0039)" xlinkHref="#afganistan_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #19
| Source File: index.tsx From react-native-checkbox-reanimated with MIT License | 5 votes |
|
AnimatedCheckbox = (props: Props) => {
const { checked, checkmarkColor, highlightColor, boxOutlineColor } = props
const progress = useSharedValue(0)
useEffect(() => {
progress.value = withTiming(checked ? 1 : 0, {
duration: checked ? 300 : 100,
easing: Easing.linear
})
}, [checked])
const animatedBoxProps = useAnimatedProps(
() => ({
stroke: interpolateColor(
Easing.bezierFn(0.16, 1, 0.3, 1)(progress.value),
[0, 1],
[boxOutlineColor, highlightColor],
'RGB'
),
fill: interpolateColor(
Easing.bezierFn(0.16, 1, 0.3, 1)(progress.value),
[0, 1],
['#00000000', highlightColor],
'RGB'
)
}),
[highlightColor, boxOutlineColor]
)
return (
<Svg
viewBox={[-MARGIN, -MARGIN, vWidth + MARGIN, vHeight + MARGIN].join(' ')}
>
<Defs>
<ClipPath id="clipPath">
<Path
fill="white"
stroke="gray"
strokeLinejoin="round"
strokeLinecap="round"
d={outlineBoxPath}
/>
</ClipPath>
</Defs>
<AnimatedStroke
progress={progress}
d={checkMarkPath}
stroke={highlightColor}
strokeWidth={10}
strokeLinejoin="round"
strokeLinecap="round"
strokeOpacity={checked || false ? 1 : 0}
/>
<AnimatedPath
d={outlineBoxPath}
strokeWidth={7}
strokeLinejoin="round"
strokeLinecap="round"
animatedProps={animatedBoxProps}
/>
<G clipPath="url(#clipPath)">
<AnimatedStroke
progress={progress}
d={checkMarkPath}
stroke={checkmarkColor}
strokeWidth={10}
strokeLinejoin="round"
strokeLinecap="round"
strokeOpacity={checked || false ? 1 : 0}
/>
</G>
</Svg>
)
}
Example #20
| 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 #21
| 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 #22
| 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 #23
| Source File: Animated2DWithGradient.tsx From react-native-gifted-charts with MIT License | 4 votes |
|
Animated2DWithGradient = (props: propTypes) => {
const {
barBackgroundPattern,
patternId,
barWidth,
item,
opacity,
animationDuration,
noGradient,
noAnimation,
containerHeight,
maxValue,
barMarginBottom,
} = props;
const [height, setHeight] = useState(noAnimation ? props.height : 2);
const [initialRender, setInitialRender] = useState(
noAnimation ? false : true,
);
useEffect(() => {
if (!noAnimation) {
if (initialRender) {
setTimeout(() => layoutAppear(), 20);
} else {
elevate();
}
}
}, [props.height]);
const elevate = () => {
LayoutAnimation.configureNext({
duration: animationDuration,
update: {type: 'linear', property: 'scaleXY'},
});
setHeight(props.height);
};
const layoutAppear = () => {
LayoutAnimation.configureNext({
duration: Platform.OS == 'ios' ? animationDuration : 20,
create: {type: 'linear', property: 'opacity'},
update: {type: 'linear', property: 'scaleXY'},
});
setInitialRender(false);
setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
};
return (
<>
{!initialRender && (
<View
style={{
position: 'absolute',
bottom: 0,
width: '100%',
height:
(noAnimation
? (Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
: height) - (barMarginBottom || 0),
}}>
<View
style={{
width: '100%',
height:
(noAnimation
? (Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
: height) - (barMarginBottom || 0),
}}>
{noGradient ? (
<View
style={[
{
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor:
item.frontColor || props.frontColor || 'black',
borderRadius:
props.barBorderRadius || item.barBorderRadius || 0,
},
props.roundedBottom && {
borderBottomLeftRadius:
(item.barWidth || barWidth || 30) / 2,
borderBottomRightRadius:
(item.barWidth || barWidth || 30) / 2,
},
props.cappedBars && {
borderTopLeftRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
borderTopRightRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
},
props.roundedTop && {
borderTopLeftRadius: (item.barWidth || barWidth || 30) / 2,
borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
},
]}>
{props.cappedBars && (
<View
style={{
position: 'absolute',
width: '100%',
height:
item.capThickness === 0
? 0
: item.capThickness || props.capThickness || 6,
backgroundColor:
item.capColor || props.capColor || 'black',
borderTopLeftRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
borderTopRightRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
}}
/>
)}
</View>
) : (
<LinearGradient
style={[
{
position: 'absolute',
width: '100%',
height: '100%',
borderRadius:
props.barBorderRadius || item.barBorderRadius || 0,
},
props.roundedBottom && {
borderBottomLeftRadius:
(item.barWidth || barWidth || 30) / 2,
borderBottomRightRadius:
(item.barWidth || barWidth || 30) / 2,
},
props.cappedBars && {
borderTopLeftRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
borderTopRightRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
},
props.roundedTop && {
borderTopLeftRadius: (item.barWidth || barWidth || 30) / 2,
borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
},
]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
colors={[
item.gradientColor || props.gradientColor || 'white',
item.frontColor || props.frontColor || 'black',
]}>
{props.cappedBars && (
<View
style={{
position: 'absolute',
width: '100%',
height:
item.capThickness === 0
? 0
: item.capThickness || props.capThickness || 6,
backgroundColor:
item.capColor || props.capColor || 'black',
borderTopLeftRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
borderTopRightRadius:
item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
}}
/>
)}
</LinearGradient>
)}
{(item.barBackgroundPattern || barBackgroundPattern) && (
<Svg>
<Defs>
{item.barBackgroundPattern
? item.barBackgroundPattern()
: barBackgroundPattern()}
</Defs>
<Rect
stroke="transparent"
x="1"
y="1"
width={item.barWidth || props.barWidth || 30}
height={
noAnimation
? (Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
: height
}
fill={`url(#${item.patternId || patternId})`}
/>
</Svg>
)}
</View>
{item.topLabelComponent && (
<View
style={[
{
position: 'absolute',
top: (item.barWidth || barWidth || 30) * -1,
height: item.barWidth || barWidth || 30,
width: item.barWidth || barWidth || 30,
justifyContent:
(props.horizontal && !props.intactTopLabel) ||
item.value < 0
? 'center'
: 'flex-end',
alignItems: 'center',
opacity: opacity,
},
item.value < 0 && {transform: [{rotate: '180deg'}]},
props.horizontal &&
!props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle,
]}>
{item.topLabelComponent()}
</View>
)}
</View>
)}
</>
);
}
Example #24
| 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 #25
| 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 #26
| Source File: main.tsx From react-native-gifted-charts with MIT License | 4 votes |
|
PieChartMain = (props: propTypes) => {
const {data, isThreeD} = props;
const radius = props.radius || 120;
const canvasWidth = radius * 2;
const canvasHeight = isThreeD ? radius * 2.3 : radius * 2;
const shadowWidth = props.shadowWidth || radius / 5;
const backgroundColor = props.backgroundColor || 'transparent';
const shadowColor = props.shadowColor || 'lightgray';
const semiCircle = props.semiCircle || false;
let pi = Math.PI;
const initialAngle = props.initialAngle || (semiCircle ? pi / -2 : 0);
const shadow = props.shadow || false;
const donut = props.donut || false;
const strokeWidth = props.strokeWidth || 0;
const strokeColor =
props.strokeColor || (strokeWidth ? 'gray' : 'transparent');
const innerRadius = props.innerRadius || radius / 2.5;
const innerCircleColor =
props.innerCircleColor || props.backgroundColor || 'white';
const innerCircleBorderWidth =
props.innerCircleBorderWidth ||
(props.innerCircleBorderColor ? strokeWidth || 2 : 0);
const innerCircleBorderColor = props.innerCircleBorderColor || 'lightgray';
const shiftInnerCenterX = props.shiftInnerCenterX || 0;
const shiftInnerCenterY = props.shiftInnerCenterY || 0;
const showText = props.showText || false;
const textColor = props.textColor || '';
const textSize = props.textSize ? Math.min(props.textSize, radius / 5) : 16;
let tiltAngle = props.tiltAngle || '55deg';
if (
tiltAngle &&
!isNaN(Number(tiltAngle)) &&
!(tiltAngle + '').endsWith('deg')
) {
tiltAngle += 'deg';
}
// const tilt = props.tilt ? Math.min(props.tilt, 1) : props.isThreeD ? 0.5 : 1;
const labelsPosition = props.labelsPosition
? props.labelsPosition
: donut || props.centerLabelComponent
? 'outward'
: 'mid';
const showTextBackground = props.showTextBackground || false;
const textBackgroundColor = props.textBackgroundColor || 'white';
const showValuesAsLabels = props.showValuesAsLabels || false;
const showGradient = props.showGradient || false;
const gradientCenterColor = props.gradientCenterColor || 'white';
const toggleFocusOnPress = props.toggleFocusOnPress === false ? false : true;
let isDataShifted = false;
let minShiftX = 0,
maxShiftX = 0,
minShiftY = 0,
maxShiftY = 0;
data.forEach((item: any) => {
total += item.value;
if (item.shiftX || item.shiftY) {
isDataShifted = true;
if (minShiftX > item.shiftX) {
minShiftX = item.shiftX;
}
if (minShiftY > item.shiftY) {
minShiftY = item.shiftY;
}
if (maxShiftX < item.shiftX) {
maxShiftX = item.shiftX;
}
if (maxShiftY < item.shiftY) {
maxShiftY = item.shiftY;
}
}
});
const horizAdjustment = maxShiftX - minShiftX;
const vertAdjustment = maxShiftY - minShiftY;
if (semiCircle) {
pi = Math.PI / 2;
}
let cx = radius,
cy = radius;
let total =
data && data.length
? data.map(item => item.value).reduce((v, a) => v + a)
: 0;
let acc = 0;
let pData = data.map(item => {
acc += item.value / total;
return acc;
});
acc = 0;
let mData = data.map(item => {
let pAcc = acc;
acc += item.value / total;
return pAcc + (acc - pAcc) / 2;
});
pData = [0, ...pData];
return (
<View
style={[
{
backgroundColor: backgroundColor,
height: semiCircle ? canvasHeight / 2 : canvasHeight,
width: canvasWidth,
overflow: 'hidden',
},
isThreeD && {transform: [{rotateX: tiltAngle}]},
]}>
<Svg
viewBox={`${strokeWidth / -2 + minShiftX} ${
strokeWidth / -2 + minShiftY
} ${
(radius + strokeWidth) * 2 +
horizAdjustment +
(horizAdjustment ? strokeWidth : 0)
} ${
(radius + strokeWidth) * 2 +
+vertAdjustment +
(vertAdjustment ? strokeWidth : 0)
}`}
height={radius * 2 + strokeWidth}
width={radius * 2 + strokeWidth}>
<Defs>
{data.map((item, index) => {
return (
<RadialGradient
key={index + ''}
id={'grad' + index}
cx="50%"
cy="50%"
rx="50%"
ry="50%"
fx="50%"
fy="50%"
gradientUnits="userSpaceOnUse">
<Stop
offset="0%"
stopColor={item.gradientCenterColor || gradientCenterColor}
stopOpacity="1"
/>
<Stop
offset="100%"
stopColor={item.color || colors[index % 9]}
stopOpacity="1"
/>
</RadialGradient>
);
})}
</Defs>
{data.length === 1 ? (
<>
<Circle
cx={cx}
cy={cy}
r={radius}
fill={
showGradient ? `url(#grad${0})` : data[0].color || colors[0 % 9]
}
onPress={() => {
data[0].onPress
? data[0].onPress()
: props.onPress
? props.onPress(data[0], 0)
: null;
}}
/>
</>
) : (
data.map((item, index) => {
// console.log('index', index);
let nextItem;
if (index === pData.length - 1) nextItem = pData[0];
else nextItem = pData[index + 1];
let sx =
cx * (1 + Math.sin(2 * pi * pData[index] + initialAngle)) +
(item.shiftX || 0);
let sy =
cy * (1 - Math.cos(2 * pi * pData[index] + initialAngle)) +
(item.shiftY || 0);
let ax =
cx * (1 + Math.sin(2 * pi * nextItem + initialAngle)) +
(item.shiftX || 0);
let ay =
cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
(item.shiftY || 0);
return (
<Path
key={index + 'a'}
d={`M ${cx + (item.shiftX || 0)} ${
cy + (item.shiftY || 0)
} L ${sx} ${sy} A ${radius} ${radius} 0 ${
semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
} 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
cy + (item.shiftY || 0)
}`}
stroke={item.strokeColor || strokeColor}
strokeWidth={
props.focusOnPress && props.selectedIndex === index
? 0
: item.strokeWidth === 0
? 0
: item.strokeWidth || strokeWidth
}
fill={
props.selectedIndex === index || item.peripheral
? 'transparent'
: showGradient
? `url(#grad${index})`
: item.color || colors[index % 9]
}
onPress={() => {
if (item.onPress) {
item.onPress();
} else if (props.onPress) {
props.onPress(item, index);
}
if (props.focusOnPress) {
if (props.selectedIndex === index) {
if (toggleFocusOnPress) {
props.setSelectedIndex(-1);
}
} else {
props.setSelectedIndex(index);
}
}
}}
/>
);
})
)}
{showText &&
data.map((item, index) => {
let mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));
let my = cy * (1 - Math.cos(2 * pi * mData[index] + initialAngle));
let midx = (mx + cx) / 2;
let midy = (my + cy) / 2;
let x = midx,
y = midy;
const labelPosition = item.labelPosition || labelsPosition;
if (labelPosition === 'onBorder') {
x = mx;
y = my;
} else if (labelPosition === 'outward') {
x = (midx + mx) / 2;
y = (midy + my) / 2;
} else if (labelPosition === 'inward') {
x = (midx + cx) / 2;
y = (midy + cy) / 2;
}
x += item.shiftX || 0;
y += item.shiftY || 0;
if (data.length === 1) {
if (donut) {
y =
(radius -
innerRadius +
(item.textBackgroundRadius ||
props.textBackgroundRadius ||
item.textSize ||
textSize)) /
2;
} else {
y = cy;
}
}
// console.log('sx', sx);
// console.log('sy', sy);
// console.log('ax', ax);
// console.log('ay', ay);
return (
<>
{/* <Line x1={mx} x2={cx} y1={my} y2={cy} stroke="black" /> */}
{showTextBackground && (
<Circle
key={index + 'b'}
cx={x}
cy={y - (item.textSize || textSize) / 4}
r={
item.textBackgroundRadius ||
props.textBackgroundRadius ||
item.textSize ||
textSize
}
fill={item.textBackgroundColor || textBackgroundColor}
onPress={() => {
item.onLabelPress
? item.onLabelPress()
: props.onLabelPress
? props.onLabelPress(item, index)
: item.onPress
? item.onPress()
: props.onPress
? props.onPress(item, index)
: null;
if (props.focusOnPress) {
if (props.selectedIndex === index) {
if (toggleFocusOnPress) {
props.setSelectedIndex(-1);
}
} else {
props.setSelectedIndex(index);
}
}
}}
/>
)}
<SvgText
fill={item.textColor || textColor || colors[(index + 2) % 9]}
fontSize={item.textSize || textSize}
fontFamily={item.font || props.font}
fontWeight={item.fontWeight || props.fontWeight}
fontStyle={item.fontStyle || props.fontStyle || 'normal'}
x={
x +
(item.shiftTextX || 0) -
(item.textSize || textSize) / 1.8
}
y={y + (item.shiftTextY || 0)}
onPress={() => {
item.onLabelPress
? item.onLabelPress()
: props.onLabelPress
? props.onLabelPress(item, index)
: item.onPress
? item.onPress()
: props.onPress
? props.onPress(item, index)
: null;
if (props.focusOnPress) {
if (props.selectedIndex === index) {
if (toggleFocusOnPress) {
props.setSelectedIndex(-1);
}
} else {
props.setSelectedIndex(index);
}
}
}}>
{item.text || (showValuesAsLabels ? item.value + '' : '')}
</SvgText>
</>
);
})}
</Svg>
{(props.centerLabelComponent || (donut && !isDataShifted)) && (
<View
style={[
{
height: innerRadius * 2,
width: innerRadius * 2,
borderRadius: innerRadius,
position: 'absolute',
zIndex: 100,
alignSelf: 'center',
backgroundColor: innerCircleColor,
left: canvasWidth / 2 - innerRadius + shiftInnerCenterX,
top:
canvasHeight / 2 -
innerRadius +
shiftInnerCenterY -
(isThreeD ? radius / 5 : 0),
borderWidth: innerCircleBorderWidth,
borderColor: innerCircleBorderColor,
justifyContent: 'center',
alignItems: 'center',
},
isThreeD && {
borderTopWidth: innerCircleBorderWidth * 5,
borderLeftWidth: shiftInnerCenterX
? innerCircleBorderWidth * 2
: innerCircleBorderWidth,
},
semiCircle &&
isThreeD && {
borderTopWidth: isThreeD
? innerCircleBorderWidth * 5
: innerCircleBorderWidth,
borderLeftWidth: 0.5,
borderLeftColor: innerCircleColor,
borderBottomWidth: 0,
borderRightWidth: 0.5,
borderRightColor: innerCircleColor,
},
]}>
<View style={{marginTop: semiCircle ? -0.5 * innerRadius : 0}}>
{props.centerLabelComponent ? props.centerLabelComponent() : null}
</View>
</View>
)}
{isThreeD && shadow && !semiCircle ? (
<View
style={{
width: radius * 2,
height: radius * 2,
backgroundColor: shadowColor,
borderRadius: radius,
position: 'absolute',
top: shadowWidth,
zIndex: -1,
}}
/>
) : null}
</View>
);
}
Example #27
| 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 #28
| Source File: Social.tsx From react-native-crypto-wallet-app with MIT License | 4 votes |
|
function SvgSocial(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
fill="none"
viewBox="0 0 254 256"
{...props}
>
<Path
fill="#E0E9F8"
d="M126.533 255.074c69.883 0 126.534-4.434 126.534-9.904 0-5.469-56.651-9.903-126.534-9.903C56.651 235.267 0 239.701 0 245.17c0 5.47 56.65 9.904 126.533 9.904z"
/>
<Path
fill="#FA968C"
d="M190.115 221.254s-2.063 5.135-2.476 5.982c-.34.699-1.012 1.143-1.651 1.587-.204.142-.418.476-.6.758-.145.226-.152.503-.06.756 1.62 4.416 6.567 6.191 6.682 5.86.209-.598-.524-1.802-1.561-2.404-1.044-.606-1.646-1.761-1.692-2.968a5.593 5.593 0 01.615-2.766l2.016-3.824-1.273-2.981zM197.229 227.683l1.234 5.485a7.193 7.193 0 01-.667 4.955v.001a1.572 1.572 0 00.856 2.223c2.929 1.045 8.608 3.032 8.861 2.817 1.29-1.094-2.122-2.897-4.643-4.793-1.701-1.278-2.351-7.235-2.502-11.804l-2.705.681a.626.626 0 00-.434.435z"
/>
<Path
fill="#0E538C"
d="M202.418 240.154c1.212.399 2.541.528 3.76.679.14.017.273.071.385.157 1.168.906 1.758 1.817 1.074 2.397-.276.234-6.948-2.129-9.55-3.063a.943.943 0 01-.509-1.337l.495-.928c1.36.866 2.809 1.589 4.345 2.095zM199.531 166.621c-3.226.44-5.974 4.158-5.407 8.31.326 2.386 2.546 10.926 4.988 17.677.937 2.59.554 5.528-1.201 7.651a6.765 6.765 0 00-.732 1.068c-1.018 1.874-4.936 12.948-7.236 20.337.183.968.76 2.194 1.484 2.621 4.047-6.275 10.627-17.729 11.71-19.723.602-1.108 1.259-2.388 1.738-3.591 2.62-3.468 2.113-22.842 1.587-26.694-.566-4.151-3.705-8.096-6.931-7.656zM200.409 134.892s2.794 1.758 2.454 4.127c0 0 1.493-1.057 1.83-4.696.235-2.523-4.284.569-4.284.569z"
/>
<Path
fill="#EFA8A0"
d="M206.08 149.326c-.054 1.553.074 3.083.622 4.283.532 1.195 1.485 2.068 2.882 2.482 1.383.428 3.043.377 4.67.081 1.635-.309 3.27-.863 4.842-1.586l.006-.003a.584.584 0 01.58 1.007c-1.486 1.047-3.103 1.951-4.879 2.583-1.769.631-3.723 1.011-5.816.718a7.415 7.415 0 01-3.06-1.147 7.688 7.688 0 01-2.339-2.432c-1.156-1.932-1.479-4.025-1.57-5.986a2.034 2.034 0 114.064-.029l-.002.029z"
/>
<Path
fill="#FDB32A"
d="M203.537 161.601c1.118-3.369 3.366-10.502 3.174-12.834a2.875 2.875 0 00-2.87-2.638h-9.725a2.976 2.976 0 00-2.978 2.89c-.082 2.817 1.215 9.227 1.946 12.582h10.453z"
/>
<Path
fill="#0E538C"
d="M200.308 227.752a.503.503 0 00.233-.446c-.206-7.152-.64-16.269-.798-18.016-.018-.2-.042-.397-.071-.591 1.532-8.455 1.764-26.632 1.917-29.815.2-4.186-2.321-8.908-5.573-9.063-3.252-.156-6.781 3.21-7.825 7.045-.689 2.531 1.975 15.997 4.862 25.757.608 2.054.703 4.215.397 6.336-.211 1.466-.275 2.977-.171 4.133.155 1.719 2.081 8.721 3.887 14.716.052.173.191.31.368.349.935.206 1.91.121 2.774-.405z"
/>
<Path
fill="#FDB32A"
d="M191.971 165.872a9.226 9.226 0 00.443-4.408c-.49-3.447-1.347-9.939-1.269-12.695a2.719 2.719 0 012.723-2.639h1.442c.549 1.273 1.713 2.258 3.523 2.258 1.806 0 2.97-.984 3.52-2.258h1.354c-1.471 3.15-.942 7.306 1.589 9.731a81.503 81.503 0 00-1.162 4.693 9.17 9.17 0 00.5 5.487c1.243 2.983 2.228 7.766 1.934 9.662-10.229 2.899-17.303-2.232-17.303-2.232l2.706-7.599z"
/>
<Path fill="#FAB9AF" d="M200.409 146.799l-4.411-.464 1.396-4.827 2.853.353.162 4.938z" />
<Path
fill="#FA968C"
d="M200.247 141.861l-2.853-.353-.436 1.507c.638.72 1.46 2.276 2.497 2.276.33 0 .63-.093.9-.264l-.108-3.166z"
/>
<Path
fill="#FAB9AF"
d="M200.345 144.195c-.968 0-2.016-.485-3.46-1.746-.829-.724-1.443-1.986-1.443-2.84v-4.717h7.263s.545 2.505.016 4.99c-.396 1.865-1.614 4.313-2.376 4.313z"
/>
<Path
fill="#FAB9AF"
d="M196.674 138.717c0 .921-.44 1.667-.983 1.667-.544 0-1.143-1.206-1.143-2.127 0-.921.599-1.206 1.143-1.206.542 0 .983.746.983 1.666z"
/>
<Path
fill="#0E538C"
d="M194.547 135.464a2.666 2.666 0 012.667-2.667l2.452.001a4.01 4.01 0 001.977-.521c.864-.491 1.958-.327 2.548.473.638.865.913 2.024-.704 3.097-.804.533-1.979-.058-2.762.198-.048-.001-.091-.01-.142-.01h-2.16c-.751 0-1.325.614-1.348 1.365a.88.88 0 01-.881.855h-.095l-.346-1.109-1.207 1.627v-3.309h.001z"
/>
<Path
fill="#0E538C"
d="M202.164 134.81c-.243 1.077.116 1.667-3.417 3.349-3.532 1.682-4.65.963-5.753 2.774 0 0 .482-3 2.433-4.03 1.951-1.029 5.335-1.702 6.42-4.086 0 0 .483 1.256.317 1.993z"
/>
<Path
fill="#0E538C"
d="M201.485 135.01s.134 3.631 3.306 5.374c0 0-1.398-2.744-1.302-4.538.094-1.794-2.214-2.076-2.004-.836zM184.16 231.596a.646.646 0 01-.008-.842c.168-.2.616-.748.953-1.159a.31.31 0 01.521.071c1.128 2.358 3.011 4.198 5.466 4.535.796.538 1.304 1.755 1.139 2.228-.039.111-1.128.127-2.274-.529-5.086-2.912-5.797-4.304-5.797-4.304z"
/>
<Path
fill="#FAB9AF"
d="M195.062 147.747l-.009.301c-.001.122 0 .245.004.373.004.252.018.509.041.765.046.513.133 1.021.242 1.518.231.987.583 1.933 1.115 2.742a7.276 7.276 0 002 2.099c.816.571 1.779.981 2.809 1.299 1.029.329 2.157.453 3.29.554 1.144.049 2.31.054 3.488-.034 2.355-.167 4.732-.587 7.108-1.088l.008-.002a.582.582 0 01.343 1.109c-2.288.948-4.66 1.742-7.145 2.255-2.478.528-5.096.74-7.796.288a12.113 12.113 0 01-3.96-1.41 10.659 10.659 0 01-3.273-2.911c-.876-1.193-1.462-2.546-1.857-3.915a14.517 14.517 0 01-.476-3.15 9.778 9.778 0 01-.006-.543c.004-.196.006-.346.027-.614a2.03 2.03 0 014.051.212l-.004.152z"
/>
<Path
fill="#0E538C"
d="M218.751 156.854h-2.441a.984.984 0 01-.984-.983v-5.561c0-.543.441-.984.984-.984h2.441c.543 0 .984.441.984.984v5.561a.984.984 0 01-.984.983z"
/>
<Path fill="#F7F7F7" d="M216.132 151.057a.364.364 0 100-.729.364.364 0 000 .729z" />
<Path
fill="#FCD434"
d="M226.146 114.805c-3.51 1.481-7.082 6.499-3.477 13.654 3.605 7.156 16.244 2.657 16.77-2.611.674-6.735-4.295-14.841-13.293-11.043z"
/>
<Path
fill="#FDBD1A"
d="M225.429 124.968c-2.205-6.401 2.089-10.287 2.105-10.301-.42.126-.85.277-1.289.455-3.579 1.455-7.223 6.381-3.546 13.405 2.044 3.904 6.935 4.274 10.968 2.944-.001 0-6.03-.09-8.238-6.503z"
/>
<Path
fill="#F7F7F7"
d="M223.964 117.957s1.407-2.276 5.099-3.051c3.693-.775 3.561.533 1.49 1.096-2.071.563-8.311 4.567-6.589 1.955z"
opacity={0.4}
/>
<Path
fill="#F24D54"
d="M227.312 122.167s1.62-6.035-.851-7.241c-2.47-1.205-3.056 2.176-3.056 2.176s-3.002.376-3.071 2.607c-.069 2.231 6.978 2.458 6.978 2.458zM233.76 119.667s-3.887-2.965-3.381-4.82c.505-1.856 2.441-2.479 3.717-1.099 1.848-1.45 4.082-.505 3.693 1.416-.389 1.921-4.029 4.503-4.029 4.503z"
/>
<Path
fill="#782D10"
d="M228.667 126.85c-.034.357 1.615 1.912 4.392.688 2.778-1.224 2.348-3.35 2.07-3.675-.279-.324-2.258 2.089-3.663 2.373-1.406.283-2.739-.008-2.799.614z"
/>
<Path
fill="#F24D54"
d="M232.833 127.167s.836-1.925 2.5-1.638c-.593 1.058-2.105 1.509-2.5 1.638z"
/>
<Path
fill="#FAB9AF"
d="M54.012 234.971l.012 3.426a7.485 7.485 0 01-.281 2.063l-.298 1.055a1.354 1.354 0 001.307 1.723c2.334-.008 6.323-.002 7.35 0 .169 0 .334-.114.348-.281.087-1.001-2.803-1.671-4.98-2.513-1.657-.642-1.569-3.622-1.364-5.362a1.048 1.048 0 00-1.131-1.162 1.05 1.05 0 00-.963 1.051zM37.97 234.009l-1.18 3.921c-.052.173-.13.337-.231.488l-.837 1.243a1.415 1.415 0 00.76 2.144s1.689.594 3.428 1.166c1.78.585 4.02.096 4.02-.374 0-1.044-.973-.216-2.603-1.306a27.014 27.014 0 01-1.614-1.142c-1.403-1.102-.178-3.891.682-5.462a.963.963 0 00-.649-1.4l-.407-.086a1.171 1.171 0 00-1.368.808z"
/>
<Path
fill="#0E538C"
d="M50.031 188.157l12.935-1.085s1.302 9.414-1.967 26.455c-1.533 7.992-4.727 23.263-4.727 23.263-.792.346-1.597.433-2.417.229 0 0-.243-6.736-.391-13.991-.142-6.957-.18-14.391-.624-16.823-.906-4.969-2.809-18.048-2.809-18.048z"
/>
<Path
fill="#0E538C"
d="M52.701 188.322c1.335 7.167 4.319 17.883-1.428 27.951-5.746 10.068-11.781 20.535-11.781 20.535-.778.032-1.483-.25-2.139-.748 0 0 1.008-4.564 2.464-9.893 1.666-6.097 3.777-13.268 3.175-17.008-1.127-7.007-2.421-16.34-2.029-20.872.393-4.532 11.036-3.734 11.738.035z"
/>
<Path
fill="#FAB9AF"
d="M59.566 159.662s1.774-.848 2.553-1.292c.78-.443 2.782-1.053 2.944-1.197.161-.145 5.938-.501 6.289-.802.35-.302.69.707-.807 1.036-1.497.327-3.58 1.13-3.694 1.715-.114.586 1.537.724 1.705 1.205.167.482-.047.375-.283.478-.237.103-1.965-.854-2.725-.582s-1.921-.104-2.504.095c-.582.199-3.413 1.152-3.413 1.152l-.065-1.808z"
/>
<Path
fill="#F7F7F7"
d="M62.768 160.915l.914-.338s-1.14-2.675-1.637-2.61c-.573.075-1.288.264-1.288.264l2.01 2.684z"
/>
<Path
fill="#DA9B5B"
d="M62.977 161.377c-.118-.087-1.943-3.59-1.943-3.59l-3.901.529 2.108 4.149 3.736-1.088z"
/>
<Path
fill="#FAB9AF"
d="M73.101 166.545s1.49-1.341 2.211-1.903c.722-.561 2.075-2.212 2.275-2.307.199-.097 2.784-5.402 3.206-5.614.42-.212-.4-.927-1.292.356-.892 1.284-2.458 2.935-3.054 2.814-.596-.12-.083-1.731-.472-2.075-.39-.347-.37-.103-.56.08-.19.184.04 2.184-.513 2.795-.552.609-.65 1.851-1.064 2.321-.415.471-2.416 2.77-2.416 2.77l1.679.763zM49.337 133.44s4.473-1.671 6.535 1.735c2.062 3.404 1.864 10.219-.391 11.058-2.254.837-5.64.399-6.795-1.731-1.154-2.13-2.197-5.209-2.146-7.268.05-2.058 1.623-3.2 2.797-3.794z"
/>
<Path
fill="#FAB9AF"
d="M54.996 146.389s-.361 3.21-.054 3.806c.307.594-5.583 0-5.583 0s-.532-4.629-1.47-7.364c-.94-2.732 7.107 3.558 7.107 3.558z"
/>
<Path
fill="#0E538C"
d="M47.888 142.832s.217 3.446 1.936 3.176c1.719-.27 4.021-5.307 4.739-5.558.718-.252.724-.673.724-.673l.45.656.762.049s-.695-2.046.354-2.881c1.049-.833-1.09-6.623-6.602-4.696 0 0-4.235 1.168-4.081 3.576.154 2.409.77 5.152 1.718 6.351z"
/>
<Path
fill="#F7F7F7"
d="M55.64 150.911s-.018-1.136-.534-1.246c-.515-.108-5.687-.606-6.319-.357v1.324s1.219.75 6.854.279z"
/>
<Path
fill="#EEA886"
d="M55.173 138.901c-.096-.404-1.123-1.558-1.517-.322-.393 1.236.595 2.898 1.146 2.755.55-.141.616-1.408.371-2.433z"
/>
<Path
fill="#347AF0"
d="M40.18 193.354s2.742.808 7.42 1.324c4.677.515 16.363-.186 16.437-.739.074-.553-2.513-20.577-2.366-21.608.147-1.031.225-4.706.225-4.706.059 1.007 1.084 5.12 2.322 7.361.447.81 1.948 3.348 2.671 2.771 3.501-2.795 8.922-13.329 9.267-13.418-.29-.126-2.57-1.175-2.89-1.281-.28-.094-2.806 2.58-4.337 4.237-.682.739-1.166 1.276-1.166 1.276-.443-.994-2.052-7.258-2.552-9.426-1.128-4.889-.955-5.092-.955-5.092-3.422-1.035-8.616-3.142-8.616-3.142l-6.853-.279s-6.29 1.385-8.767 2.503c-.235.107-.236 5.612-.88 7.055l2.053 4.333s1.187 8.583 1.433 12.4c.113 1.752-2.447 16.431-2.447 16.431z"
/>
<Path
fill="#347AF0"
d="M38.855 167.338c.179.578.992 1.065 1.519 1.279.338.137.716.181 1.097.11l.269-.049v-.001l4.697-.872s1.027-11.834-6.417-14.67c-.196.065-2.809 8.904-1.165 14.203z"
/>
<Path
fill="#0E538C"
d="M48.064 133.842s-5.628.571-.1 9.114l.1-9.114zM53.445 241.514s4.03-.137 4.98-.723c0 0 3.217.566 4.028 1.25.81.684.918 1.908-1.566 1.908s-7.442-.359-7.442-.359-.961-1.235 0-2.076zM36.368 238.405s2.269.971 3.061.648c0 0 .36 1.89 2.952 2.412 2.593.523 2.179 1.927.703 2.088-1.477.162-6.697-.521-7.525-1.62-.83-1.098-.235-3.078.81-3.528zM82.525 153.435v.341l-4.4 5.392-2.386 1.809-3.474-1.881-.073-.205 10.334-5.456z"
/>
<Path
fill="#0E538C"
d="M78.4 158.453l4.125-5.018-4.896-2.161-5.437 7.617 4.213 2.249 1.995-2.687z"
/>
<Path
fill="#F7F7F7"
d="M77.782 151.778l4.024 1.738-4.447 5.805-3.888-1.71 4.311-5.833zM75.023 159.825a.572.572 0 100-1.143.572.572 0 000 1.143z"
/>
<Path
fill="#2A94F4"
d="M78.837 153.499l-1.203-.586a.301.301 0 11.264-.542l1.203.585a.302.302 0 11-.264.543zM77.145 155.786l-1.203-.586a.302.302 0 01.264-.543l1.203.586a.302.302 0 01-.264.543zM76.634 156.532l-1.203-.585a.302.302 0 01.264-.543l1.203.586a.302.302 0 01-.264.542zM79.809 154.94l-1.203-.586a.302.302 0 01.264-.543l1.203.586a.302.302 0 01-.264.543zM79.242 155.704l-1.203-.585a.302.302 0 01.264-.543l1.203.586a.302.302 0 01-.264.542zM77.457 158.018l-1.203-.586a.302.302 0 01.264-.543l1.203.586a.302.302 0 01-.264.543z"
/>
<Path
fill="#fff"
d="M77.994 88.427l-.66-1.894-.661 1.894c-.557 1.596-1.881 2.944-3.673 3.74 1.792.796 3.115 2.143 3.673 3.739l.66 1.894.661-1.894c.557-1.597 1.88-2.944 3.673-3.74-1.792-.795-3.115-2.143-3.673-3.74z"
/>
<Path
fill="#C5D6F1"
d="M122.833 97.8c18.907 0 34.234-15.327 34.234-34.233 0-18.907-15.327-34.234-34.234-34.234-18.906 0-34.233 15.327-34.233 34.234 0 18.906 15.327 34.233 34.233 34.233z"
/>
<Path
fill="#fff"
d="M145.624 28.059L144.5 25l-1.124 3.059c-.947 2.579-3.196 4.755-6.243 6.041 3.047 1.286 5.296 3.462 6.243 6.041L144.5 43.2l1.124-3.059c.947-2.579 3.196-4.755 6.243-6.041-3.047-1.287-5.296-3.463-6.243-6.041zM87.16 42.206l-.727-2.04-.727 2.04c-.612 1.72-2.068 3.17-4.04 4.027 1.972.858 3.428 2.309 4.04 4.028l.727 2.039.727-2.04c.613-1.718 2.069-3.17 4.04-4.027-1.971-.857-3.427-2.308-4.04-4.027z"
/>
<Path
fill="#fff"
fillRule="evenodd"
d="M35.527 65.927c6.849 0 12.4-5.551 12.4-12.4 0-6.848-5.551-12.4-12.4-12.4-6.848 0-12.4 5.552-12.4 12.4 0 6.849 5.552 12.4 12.4 12.4z"
clipRule="evenodd"
/>
<Path
fill="#C5D6F1"
fillRule="evenodd"
d="M24.072 53.463c0-6.28 5.11-11.391 11.391-11.391 6.282 0 11.392 5.11 11.392 11.391 0 6.282-5.11 11.392-11.392 11.392-6.281 0-11.391-5.11-11.391-11.392zm11.425 13.463a13.399 13.399 0 006.184-1.522 13.52 13.52 0 006.824-8.585c.275-1.073.422-2.197.422-3.356 0-.917-.093-1.812-.267-2.678C47.418 44.633 41.982 40 35.463 40 28.028 40 22 46.028 22 53.463c0 4.464 2.174 8.419 5.518 10.868a13.403 13.403 0 007.945 2.596l.034-.001z"
clipRule="evenodd"
/>
<Path
fill="#E0E9F8"
fillRule="evenodd"
d="M30.28 48.57a2.295 2.295 0 013.126.063c.716.705.864 1.764.449 2.618l.62.62a2.806 2.806 0 002.316.8l.87-.104a2.276 2.276 0 011.97-1.781 2.295 2.295 0 012.498 1.883 2.277 2.277 0 01-4.291 1.373l-.122.014a2.804 2.804 0 00-2.41 2.205 2.275 2.275 0 01-1.746 4.152 2.295 2.295 0 01-1.655-2.655 2.275 2.275 0 011.95-1.805l.14-.661a2.803 2.803 0 00-.762-2.563l-.428-.428a2.276 2.276 0 01-2.526-3.73zm16.575 4.894c0-6.282-5.11-11.392-11.391-11.392-6.282 0-11.392 5.11-11.392 11.392 0 6.28 5.11 11.391 11.392 11.391 6.281 0 11.391-5.11 11.391-11.391z"
clipRule="evenodd"
/>
<Path
fill="#E0E9F8"
d="M122.833 92.6C106.824 92.6 93.8 79.576 93.8 63.567c0-16.01 13.024-29.034 29.033-29.034s29.034 13.025 29.034 29.034S138.842 92.6 122.833 92.6z"
/>
<Path
fill="#fff"
fillRule="evenodd"
d="M129.5 62.115c2.141-.738 3.501-2.911 3.501-5.6 0-3.753-2.602-6.23-6.76-6.496v-3.352h-4.174v3.328h-1.916v-3.328h-4.174v3.328h-3.11v5.269h2.976v15.285h-2.976v5.266h3.11V79.6h4.174v-3.784h1.916V79.6h4.174v-3.791c4.549-.146 7.426-2.875 7.426-7.174-.001-3.316-1.592-5.857-4.167-6.52zm-8.392-6.851h4.081c.392 0 .746.064 1.052.19.828.338 1.32 1.112 1.32 2.24 0 1.181-.492 2.01-1.32 2.373-.306.133-.66.205-1.052.205h-4.081v-5.008zm4.081 15.322c.381 0 .733-.044 1.052-.128 1.227-.328 1.957-1.268 1.957-2.672 0-1.288-.73-2.203-1.957-2.524a4.116 4.116 0 00-1.052-.128h-4.081v5.415l4.081.037z"
clipRule="evenodd"
/>
<Path
stroke="#C5D6F1"
strokeDasharray={4.8}
strokeWidth={0.8}
d="M52.111 129.067s-2.073-43 34.556-58.067M202.952 127.305s1.781-46.282-46.752-62.924"
/>
<Path
fill="#fff"
fillRule="evenodd"
d="M216.378 79.794c5.483 1.47 11.119-1.784 12.588-7.267 1.469-5.483-1.785-11.119-7.268-12.588-5.483-1.47-11.118 1.785-12.588 7.268-1.469 5.483 1.785 11.118 7.268 12.588z"
clipRule="evenodd"
/>
<Path
fill="#C5D6F1"
fillRule="evenodd"
d="M228.099 72.375c-1.33 4.966-6.453 7.923-11.418 6.593-4.966-1.33-7.924-6.453-6.594-11.42 1.331-4.965 6.454-7.922 11.42-6.592 4.965 1.33 7.923 6.453 6.592 11.419zm-6.153-13.056c-5.879-1.576-11.921 1.913-13.496 7.791-1.575 5.879 1.913 11.92 7.792 13.496.091.025.183.044.274.066.693.167 1.386.265 2.072.297 2.578.12 5.066-.675 7.069-2.159a10.97 10.97 0 004.08-5.996c.67-2.5.421-5.03-.535-7.232a11 11 0 00-7.256-6.263z"
clipRule="evenodd"
/>
<Path
fill="#E0E9F8"
fillRule="evenodd"
d="M218.811 71.017l-2.863-2.413 4.685-4.389 1.864 6.144-3.686.658zm-1.257 4.692l-1.864-6.144 2.7 3.02 3.849-1.265-4.685 4.389zm3.953-14.753c-4.966-1.33-10.089 1.627-11.419 6.593-1.331 4.966 1.627 10.088 6.592 11.419 4.966 1.33 10.089-1.627 11.419-6.593 1.331-4.966-1.627-10.089-6.592-11.419z"
clipRule="evenodd"
/>
<Path
fill="#C5D6F1"
fillRule="evenodd"
d="M184.072 6.55c4.7 0 8.523 3.823 8.523 8.523 0 4.699-3.823 8.522-8.523 8.522-4.699 0-8.522-3.823-8.522-8.522 0-4.7 3.823-8.523 8.522-8.523zm0 18.595c5.563 0 10.073-4.51 10.073-10.072 0-2.69-1.055-5.13-2.772-6.936A10.041 10.041 0 00184.072 5c-5.552 0-10.054 4.492-10.071 10.04l-.001.033c0 5.562 4.51 10.072 10.072 10.072z"
clipRule="evenodd"
/>
<Path
fill="#E0E9F8"
fillRule="evenodd"
d="M184.934 14.169c.24-.107.382-.351.382-.7 0-.332-.142-.56-.382-.66a.79.79 0 00-.305-.055h-1.182v1.475h1.182a.75.75 0 00.305-.06zM184.934 17.23c.355-.096.567-.373.567-.787 0-.38-.212-.649-.567-.743a1.172 1.172 0 00-.305-.038h-1.182v1.595l1.182.011c.111 0 .213-.012.305-.037z"
clipRule="evenodd"
/>
<Path
fill="#E0E9F8"
fillRule="evenodd"
d="M183.17 10.22v.98h.555v-.98h1.209v.988c1.205.079 1.958.808 1.958 1.914 0 .792-.394 1.433-1.014 1.65.746.196 1.207.944 1.207 1.921 0 1.267-.833 2.072-2.151 2.114v1.118h-1.209v-1.116h-.555v1.116h-1.209v-1.116h-.901v-1.552h.862v-4.504h-.862v-1.552h.901v-.98h1.209zm-7.62 4.852c0 4.7 3.823 8.523 8.522 8.523 4.7 0 8.523-3.823 8.523-8.522 0-4.7-3.823-8.523-8.523-8.523-4.699 0-8.522 3.823-8.522 8.523z"
clipRule="evenodd"
/>
<Path
fill="#fff"
fillRule="evenodd"
d="M183.447 15.662h1.182c.111 0 .213.013.305.038.356.094.567.364.567.743 0 .414-.211.691-.567.788a1.172 1.172 0 01-.305.037l-1.182-.01v-1.596zm0-2.909h1.182a.79.79 0 01.305.056c.24.1.382.328.382.66 0 .349-.142.593-.382.7a.751.751 0 01-.305.06h-1.182v-1.476zm-1.486-1.552h-.901v1.552h.862v4.505h-.862v1.551h.901v1.116h1.209v-1.116h.555v1.116h1.209v-1.118c1.318-.043 2.151-.847 2.151-2.113 0-.978-.461-1.726-1.207-1.922.62-.217 1.014-.858 1.014-1.65 0-1.106-.754-1.835-1.958-1.914v-.988h-1.209v.98h-.555v-.98h-1.209v.98z"
clipRule="evenodd"
/>
<Path
fill="#fff"
d="M152.895 81.202L152.3 79.6l-.595 1.602c-.501 1.351-1.692 2.491-3.305 3.165 1.613.673 2.804 1.813 3.305 3.164l.595 1.602.595-1.602c.501-1.35 1.692-2.49 3.305-3.164-1.613-.674-2.804-1.814-3.305-3.165zM19.495 30.602L18.9 29l-.595 1.602c-.501 1.351-1.692 2.491-3.305 3.165 1.613.673 2.804 1.813 3.305 3.164l.595 1.602.595-1.602c.501-1.35 1.692-2.49 3.305-3.164-1.613-.674-2.804-1.814-3.305-3.165zM49.495 55.602L48.9 54l-.595 1.602c-.501 1.351-1.692 2.491-3.305 3.165 1.613.673 2.804 1.813 3.305 3.164l.595 1.602.595-1.602c.501-1.35 1.692-2.49 3.305-3.164-1.613-.674-2.804-1.814-3.305-3.165zM199.495 1.602L198.9 0l-.595 1.602c-.501 1.351-1.692 2.491-3.305 3.165 1.613.673 2.804 1.813 3.305 3.164l.595 1.602.595-1.602c.501-1.35 1.692-2.49 3.305-3.164-1.613-.674-2.804-1.814-3.305-3.165zM209.458 74.233L209 73l-.458 1.233c-.385 1.038-1.301 1.915-2.542 2.434 1.241.518 2.157 1.395 2.542 2.434l.458 1.232.458-1.232c.385-1.04 1.301-1.916 2.542-2.434-1.241-.519-2.157-1.396-2.542-2.434z"
/>
<Path
fill="url(#social_svg__pattern0)"
d="M10.289 116.801h20v20h-20z"
transform="rotate(-19 10.29 116.801)"
/>
<Defs>
<Pattern
id="social_svg__pattern0"
width={1}
height={1}
patternContentUnits="objectBoundingBox"
>
<Use transform="scale(.00417)" xlinkHref="#social_svg__image0" />
</Pattern>
</Defs>
</Svg>
);
}
Example #29
| 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>
);
}
