react-native-svg#Circle TypeScript Examples
The following examples show how to use
react-native-svg#Circle.
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: Wink.tsx From react-native-bigheads with MIT License | 6 votes |
|
WinkEyes = ({ withLashes }: EyeProps) => {
const { colors, skin } = useTheme()
return (
<>
<Path
d="M271.4,576.82c-1-28.36,18-52.36,43.28-63.56a62.37,62.37,0,0,1,8.16-2.7,70,70,0,0,1,42.21,2.68A71.67,71.67,0,0,1,374,517.4c29.53,15.88,42.79,53.25,31.36,83.46a61.68,61.68,0,0,1-4.18,8.82,54.68,54.68,0,0,1-17.51,20.83,69.25,69.25,0,0,1-7.85,5c-27.38,13-64.38,9-86.45-11.4a69.35,69.35,0,0,1-6.11-7.47,64.89,64.89,0,0,1-5.57-9.5A55.78,55.78,0,0,1,272,585.39,75.67,75.67,0,0,1,271.4,576.82Z"
fill={skin.shadow}
/>
<Path
d="M269.77,558.47c-1-28.36,18-52.36,43.28-63.56a62.23,62.23,0,0,1,8.15-2.7,70,70,0,0,1,42.22,2.68,71.54,71.54,0,0,1,8.92,4.16c29.53,15.89,42.79,53.25,31.36,83.46a59.6,59.6,0,0,1-4.18,8.82,63.85,63.85,0,0,1-4.71,7.8,64.78,64.78,0,0,1-5.68,7,63.08,63.08,0,0,1-7.12,6.07,68.37,68.37,0,0,1-7.85,5c-27.38,13-64.38,9-86.44-11.4a67.24,67.24,0,0,1-6.11-7.47,65,65,0,0,1-5.58-9.5A55.59,55.59,0,0,1,270.32,567,71.3,71.3,0,0,1,269.77,558.47Z"
fill={colors.white}
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="12px"
/>
<Circle cx="338.51" cy="559.08" r="12.24" fill={colors.outline} />
<Line
x1="715.03"
y1="559.08"
x2="603.4"
y2="559.08"
fill="none"
stroke={colors.outline}
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="16px"
/>
<Path
d="M627,574.16a114.14,114.14,0,0,1,13.07-1.56c4.36-.3,8.72-.43,13.08-.44s8.71.14,13.07.43a114.34,114.34,0,0,1,13.08,1.57,112.18,112.18,0,0,1-13.08,1.58q-6.54.43-13.07.42t-13.08-.43A112,112,0,0,1,627,574.16Z"
fill={colors.outline}
/>
{withLashes && <LeftLash />}
</>
)
}
Example #2
| Source File: React.tsx From react-native-bigheads with MIT License | 6 votes |
|
ReactGraphic = () => {
const { colors } = useTheme()
return (
<>
<Path
d="M566.88,917.83c0-8.86-11.1-17.26-28.11-22.47,3.93-17.34,2.18-31.13-5.51-35.55a9.56,9.56,0,0,0-6.08-1.56c-8,.13-17.31,5.35-27.23,14.62C490,863.65,479,858.2,472.71,858.36c-3.16.09-4.37.52-6.16,1.56-7.67,4.41-9.38,18.18-5.43,35.47-17,5.23-28,13.61-28,22.44s11.1,17.26,28.11,22.47c-3.93,17.34-2.18,31.13,5.51,35.55a11.93,11.93,0,0,0,6.13,1.53c7.5,0,17.31-5.35,27.24-14.62,9.92,9.22,19.74,14.51,27.24,14.51a12.11,12.11,0,0,0,6.16-1.53c7.66-4.42,9.38-18.19,5.42-35.47C555.84,935.06,566.88,926.66,566.88,917.83Zm-39.72-53.49v0a6.32,6.32,0,0,1,3.1.71c3.71,2.13,5.32,10.23,4.07,20.64-.3,2.56-.79,5.26-1.39,8a133,133,0,0,0-17.32-3,132.78,132.78,0,0,0-11.34-13.63C513.16,868.87,521.49,864.35,527.16,864.34Zm-51.32,67.45q1.92,3.27,3.93,6.38c-3.87-.57-7.61-1.28-11.18-2.15,1-3.52,2.26-7.15,3.68-10.77C473.39,927.43,474.56,929.61,475.84,931.79Zm-7.33-32.15c3.57-.84,7.33-1.58,11.23-2.15-1.33,2.1-2.67,4.25-3.92,6.46s-2.43,4.36-3.55,6.54A114.8,114.8,0,0,1,468.51,899.64Zm6.95,18.27c1.69-3.65,3.6-7.31,5.65-10.88s4.3-7.17,6.57-10.41c4.06-.36,8.18-.55,12.32-.55s8.23.19,12.27.52c2.26,3.24,4.47,6.71,6.6,10.36s4,7.2,5.67,10.85c-1.72,3.66-3.6,7.31-5.65,10.88s-4.3,7.17-6.57,10.42c-4.06.35-8.18.54-12.32.54s-8.23-.19-12.27-.52c-2.26-3.24-4.47-6.7-6.6-10.36S477.18,921.56,475.46,917.91Zm48.7,13.8c1.25-2.18,2.42-4.39,3.54-6.57A114.8,114.8,0,0,1,531.46,936c-3.57.87-7.33,1.61-11.23,2.18C521.57,936.07,522.9,933.92,524.16,931.71Zm0-27.84c-1.25-2.18-2.59-4.31-3.93-6.38q5.82.85,11.18,2.15c-1,3.52-2.26,7.15-3.68,10.77C526.58,908.23,525.41,906.05,524.13,903.87ZM507.5,890.15c-2.46-.1-5-.19-7.5-.19s-5.1.06-7.58.19a105.71,105.71,0,0,1,7.5-8.72A114.37,114.37,0,0,1,507.5,890.15Zm-37.93-25a6.08,6.08,0,0,1,3.14-.71v0c5.64,0,14,4.5,22.9,12.71a129.42,129.42,0,0,0-11.26,13.6,129.07,129.07,0,0,0-17.34,3c-.63-2.72-1.09-5.37-1.42-7.9C464.31,875.43,465.89,867.33,469.57,865.18Zm-6.87,69.23c-2.7-.85-5.26-1.78-7.63-2.78-9.66-4.12-15.9-9.52-15.9-13.8s6.24-9.71,15.9-13.8c2.34-1,4.9-1.91,7.55-2.75a130.83,130.83,0,0,0,6.13,16.6A130.68,130.68,0,0,0,462.7,934.41Zm10.12,36.91a6.43,6.43,0,0,1-3.08-.73c-3.71-2.13-5.32-10.23-4.07-20.64.3-2.57.79-5.26,1.39-8a131.33,131.33,0,0,0,17.32,3,131.87,131.87,0,0,0,11.34,13.64C486.83,966.8,478.49,971.32,472.82,971.32Zm27.23-17.09a114.59,114.59,0,0,1-7.58-8.73c2.46.11,5,.19,7.5.19s5.1-.05,7.58-.19A105.91,105.91,0,0,1,500.05,954.23Zm30.38,16.25a6.08,6.08,0,0,1-3.14.71c-5.64,0-14-4.5-22.9-12.71a129.42,129.42,0,0,0,11.26-13.6,129.07,129.07,0,0,0,17.34-3,75.63,75.63,0,0,1,1.42,7.93C535.69,960.23,534.11,968.32,530.43,970.48Zm14.48-38.85c-2.35,1-4.91,1.9-7.56,2.75a131.52,131.52,0,0,0-6.13-16.61,129,129,0,0,0,6-16.52c2.7.85,5.26,1.77,7.66,2.78,9.66,4.12,15.9,9.52,15.9,13.8S554.56,927.54,544.91,931.63Z"
stroke={colors.white}
strokeWidth="16px"
/>
<Circle cx="499.97" cy="917.83" r="12.46" stroke={colors.white} strokeWidth="24px" />
<Path
d="M566.88,917.83c0-8.86-11.1-17.26-28.11-22.47,3.93-17.34,2.18-31.13-5.51-35.55a9.56,9.56,0,0,0-6.08-1.56c-8,.13-17.31,5.35-27.23,14.62C490,863.65,479,858.2,472.71,858.36c-3.16.09-4.37.52-6.16,1.56-7.67,4.41-9.38,18.18-5.43,35.47-17,5.23-28,13.61-28,22.44s11.1,17.26,28.11,22.47c-3.93,17.34-2.18,31.13,5.51,35.55a11.93,11.93,0,0,0,6.13,1.53c7.5,0,17.31-5.35,27.24-14.62,9.92,9.22,19.74,14.51,27.24,14.51a12.11,12.11,0,0,0,6.16-1.53c7.66-4.42,9.38-18.19,5.42-35.47C555.84,935.06,566.88,926.66,566.88,917.83Zm-39.72-53.49v0a6.32,6.32,0,0,1,3.1.71c3.71,2.13,5.32,10.23,4.07,20.64-.3,2.56-.79,5.26-1.39,8a133,133,0,0,0-17.32-3,132.78,132.78,0,0,0-11.34-13.63C513.16,868.87,521.49,864.35,527.16,864.34Zm-51.32,67.45q1.92,3.27,3.93,6.38c-3.87-.57-7.61-1.28-11.18-2.15,1-3.52,2.26-7.15,3.68-10.77C473.39,927.43,474.56,929.61,475.84,931.79Zm-7.33-32.15c3.57-.84,7.33-1.58,11.23-2.15-1.33,2.1-2.67,4.25-3.92,6.46s-2.43,4.36-3.55,6.54A114.8,114.8,0,0,1,468.51,899.64Zm6.95,18.27c1.69-3.65,3.6-7.31,5.65-10.88s4.3-7.17,6.57-10.41c4.06-.36,8.18-.55,12.32-.55s8.23.19,12.27.52c2.26,3.24,4.47,6.71,6.6,10.36s4,7.2,5.67,10.85c-1.72,3.66-3.6,7.31-5.65,10.88s-4.3,7.17-6.57,10.42c-4.06.35-8.18.54-12.32.54s-8.23-.19-12.27-.52c-2.26-3.24-4.47-6.7-6.6-10.36S477.18,921.56,475.46,917.91Zm48.7,13.8c1.25-2.18,2.42-4.39,3.54-6.57A114.8,114.8,0,0,1,531.46,936c-3.57.87-7.33,1.61-11.23,2.18C521.57,936.07,522.9,933.92,524.16,931.71Zm0-27.84c-1.25-2.18-2.59-4.31-3.93-6.38q5.82.85,11.18,2.15c-1,3.52-2.26,7.15-3.68,10.77C526.58,908.23,525.41,906.05,524.13,903.87ZM507.5,890.15c-2.46-.1-5-.19-7.5-.19s-5.1.06-7.58.19a105.71,105.71,0,0,1,7.5-8.72A114.37,114.37,0,0,1,507.5,890.15Zm-37.93-25a6.08,6.08,0,0,1,3.14-.71v0c5.64,0,14,4.5,22.9,12.71a129.42,129.42,0,0,0-11.26,13.6,129.07,129.07,0,0,0-17.34,3c-.63-2.72-1.09-5.37-1.42-7.9C464.31,875.43,465.89,867.33,469.57,865.18Zm-6.87,69.23c-2.7-.85-5.26-1.78-7.63-2.78-9.66-4.12-15.9-9.52-15.9-13.8s6.24-9.71,15.9-13.8c2.34-1,4.9-1.91,7.55-2.75a130.83,130.83,0,0,0,6.13,16.6A130.68,130.68,0,0,0,462.7,934.41Zm10.12,36.91a6.43,6.43,0,0,1-3.08-.73c-3.71-2.13-5.32-10.23-4.07-20.64.3-2.57.79-5.26,1.39-8a131.33,131.33,0,0,0,17.32,3,131.87,131.87,0,0,0,11.34,13.64C486.83,966.8,478.49,971.32,472.82,971.32Zm27.23-17.09a114.59,114.59,0,0,1-7.58-8.73c2.46.11,5,.19,7.5.19s5.1-.05,7.58-.19A105.91,105.91,0,0,1,500.05,954.23Zm30.38,16.25a6.08,6.08,0,0,1-3.14.71c-5.64,0-14-4.5-22.9-12.71a129.42,129.42,0,0,0,11.26-13.6,129.07,129.07,0,0,0,17.34-3,75.63,75.63,0,0,1,1.42,7.93C535.69,960.23,534.11,968.32,530.43,970.48Zm14.48-38.85c-2.35,1-4.91,1.9-7.56,2.75a131.52,131.52,0,0,0-6.13-16.61,129,129,0,0,0,6-16.52c2.7.85,5.26,1.77,7.66,2.78,9.66,4.12,15.9,9.52,15.9,13.8S554.56,927.54,544.91,931.63Z"
fill="#61dafb"
/>
<Circle cx="499.97" cy="917.83" r="12.46" fill="#61dafb" />
</>
)
}
Example #3
| Source File: NormalEyes.tsx From react-native-bigheads with MIT License | 6 votes |
|
NormalEyes = ({ withLashes }: EyeProps) => {
const { skin, colors } = useTheme()
return (
<>
<Path
d="M271.4,568.53c-1-28.36,18-52.36,43.28-63.56a62.37,62.37,0,0,1,8.16-2.7A70,70,0,0,1,365.05,505a71.67,71.67,0,0,1,8.93,4.16c29.53,15.89,42.79,53.25,31.36,83.46a61.68,61.68,0,0,1-4.18,8.82,54.68,54.68,0,0,1-17.51,20.83,69.25,69.25,0,0,1-7.85,5c-27.38,13-64.38,9-86.45-11.4a68.39,68.39,0,0,1-6.11-7.47,64.89,64.89,0,0,1-5.57-9.5A55.78,55.78,0,0,1,272,577.1,75.67,75.67,0,0,1,271.4,568.53Z"
fill={skin.shadow}
/>
<Path
d="M269.77,550.18c-1-28.36,18-52.36,43.28-63.56a62.23,62.23,0,0,1,8.15-2.7,70,70,0,0,1,42.22,2.68,71.54,71.54,0,0,1,8.92,4.16c29.53,15.89,42.79,53.26,31.36,83.46a59.6,59.6,0,0,1-4.18,8.82,63.85,63.85,0,0,1-4.71,7.8,64.78,64.78,0,0,1-5.68,7,63.08,63.08,0,0,1-7.12,6.07,68.37,68.37,0,0,1-7.85,5c-27.38,13-64.38,9-86.44-11.39a68.28,68.28,0,0,1-6.11-7.48,65,65,0,0,1-5.58-9.5,55.59,55.59,0,0,1-5.71-21.73A71.3,71.3,0,0,1,269.77,550.18Z"
fill={colors.white}
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="12px"
/>
<Circle cx="338.51" cy="550.79" r="12.24" fill={colors.outline} />
<Path
d="M583.89,560.47c.43-15.13,6.67-30.09,15.1-41.33a72.82,72.82,0,0,1,7.12-8.53,69.73,69.73,0,0,1,90.17-8.95,73.27,73.27,0,0,1,6.53,5.13c27,21.45,30.12,63.14,15.32,93.23a62.31,62.31,0,0,1-4.78,6.86,72.09,72.09,0,0,1-7.58,8.13c-20.27,17.83-51.81,22.13-77.41,12.42a71.34,71.34,0,0,1-10.55-5c-17.9-10.78-30.37-31.09-33.43-52.23A62.93,62.93,0,0,1,583.89,560.47Z"
fill={skin.shadow}
/>
<Path
d="M589.38,549c.42-14.15,6.42-28.15,14.52-38.66a70.56,70.56,0,0,1,6.86-8A68.55,68.55,0,0,1,697.53,494a69.81,69.81,0,0,1,6.28,4.79c26,20.07,29,59.07,14.74,87.22a56.5,56.5,0,0,1-4.6,6.42,68.91,68.91,0,0,1-7.29,7.6c-19.51,16.68-49.86,20.71-74.49,11.62A68.79,68.79,0,0,1,622,606.9c-17.22-10.08-29.22-29.08-32.17-48.85A56.34,56.34,0,0,1,589.38,549Z"
fill={colors.white}
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="12px"
/>
<Circle cx="659.21" cy="550.79" r="12.24" fill={colors.outline} />
{withLashes && (
<G transform="translate(0 -5)">
<LeftLash />
<RightLash />
</G>
)}
</>
)
}
Example #4
| Source File: Withdrawal.tsx From react-native-crypto-wallet-app with MIT License | 6 votes |
|
function SvgWithdrawal(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
rotation={-135}
{...props}
>
<Circle cx={12} cy={12} r={10} />
<Path d="M12 16l4-4-4-4M8 12h8" />
</Svg>
);
}
Example #5
| Source File: User.tsx From react-native-crypto-wallet-app with MIT License | 6 votes |
|
function SvgUser(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
className="user_svg__feather user_svg__feather-user"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
>
<Path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
<Circle cx={12} cy={7} r={4} />
</Svg>
);
}
Example #6
| Source File: Send.tsx From react-native-crypto-wallet-app with MIT License | 6 votes |
|
function SvgSent(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
rotation={-45}
{...props}
>
<Circle cx={12} cy={12} r={10} />
<Path d="M12 16l4-4-4-4M8 12h8" />
</Svg>
);
}
Example #7
| Source File: PlusCircle.tsx From react-native-crypto-wallet-app with MIT License | 6 votes |
|
function SvgPlusCircle(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
className="plus-circle_svg__feather plus-circle_svg__feather-plus-circle"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
>
<Circle cx={12} cy={12} r={10} />
<Path d="M12 8v8M8 12h8" />
</Svg>
);
}
Example #8
| Source File: Eye.tsx From react-native-crypto-wallet-app with MIT License | 6 votes |
|
function SvgEye(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
className="eye_svg__feather eye_svg__feather-eye"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
>
<Path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<Circle cx={12} cy={12} r={3} />
</Svg>
);
}
Example #9
| Source File: Deposit.tsx From react-native-crypto-wallet-app with MIT License | 6 votes |
|
function SvgDeposited(props: SvgProps) {
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
rotation={45}
{...props}
>
<Circle cx={12} cy={12} r={10} />
<Path d="M12 16l4-4-4-4M8 12h8" />
</Svg>
);
}
Example #10
| Source File: SimpleEyes.tsx From react-native-bigheads with MIT License | 6 votes |
|
SimpleEyes = () => {
const { colors } = useTheme()
return (
<>
<Circle cx="341.06" cy="569.08" r="20.96" fill={colors.outline} />
<Path
d="M340.93,586c1.79-.1,3.79-.26,5.7-.46s3.86-.44,5.79-.74,3.87-.65,5.81-1,3.92-.68,6-.83a24.74,24.74,0,0,1-5.31,3.12,48.86,48.86,0,0,1-5.78,2,50.61,50.61,0,0,1-6,1.36,36.13,36.13,0,0,1-6.24.54Z"
fill={colors.outline}
/>
<Circle cx="661.77" cy="569.08" r="20.96" fill={colors.outline} />
<Path
d="M661.77,586c1.8-.1,3.79-.26,5.7-.46s3.87-.44,5.8-.74,3.87-.65,5.81-1,3.92-.68,6-.83a25,25,0,0,1-5.31,3.12,48.86,48.86,0,0,1-5.78,2,51.06,51.06,0,0,1-6,1.36,36.22,36.22,0,0,1-6.24.54Z"
fill={colors.outline}
/>
</>
)
}
Example #11
| Source File: Stubble.tsx From react-native-bigheads with MIT License | 6 votes |
|
StubbleBeard = () => {
const { colors } = useTheme()
return (
<>
<Path
d="M664.05,702.32c28.31-23,54.41-54.72,70.68-86.1-.06-.1-3.49,3.38-3.55,3.28S710.11,638.28,649.66,638c-76.3-.31-60.54-21.68-152.51-21.68-81.42,0-68.49,11.89-145.15,16.15-62.09,3.45-83.62-13-83.62-13l-.2.33a261.18,261.18,0,0,0,40.56,57.53c4.32,4.65,8.86,9.18,13.48,13.48a193.3,193.3,0,0,0,15.35,13c5.18,3.95,10.67,7.72,16.33,11.21,21.71,12,46.48,21.14,73.63,27.13,6.49,1.43,13,2.64,19.31,3.6,65.81,5.85,141.08,6.7,200.74-31.12C653.21,710.78,658.75,706.63,664.05,702.32Z"
opacity={0.15}
/>
<Circle cx="311.51" cy="659.14" r="4.18" fill={colors.outline} />
<Circle cx="338.51" cy="663.32" r="2.96" fill={colors.outline} />
<Circle cx="401.05" cy="707.98" r="2.96" fill={colors.outline} />
<Circle cx="506.83" cy="711.31" r="2.96" fill={colors.outline} />
<Circle cx="517.63" cy="704.5" r="2.96" fill={colors.outline} />
<Circle cx="578.33" cy="701.54" r="2.96" fill={colors.outline} />
<Circle cx="581.29" cy="683.15" r="2.96" fill={colors.outline} />
<Circle cx="391.69" cy="690.72" r="5.37" fill={colors.outline} />
<Circle cx="600.44" cy="707.45" r="2.09" fill={colors.outline} />
<Circle cx="642.96" cy="696.08" r="4.18" fill={colors.outline} />
<Circle cx="462.56" cy="724.04" r="4.18" fill={colors.outline} />
<Circle cx="642.96" cy="663.22" r="2.96" fill={colors.outline} />
<Circle cx="654.05" cy="673.06" r="2.96" fill={colors.outline} />
</>
)
}
Example #12
| Source File: OpenMouth.tsx From react-native-bigheads with MIT License | 6 votes |
|
OpenMouth = () => {
const { colors } = useTheme()
return (
<>
<Circle cx="499.7" cy="642.93" r="53.95" fill={colors.outline} />
<Path
d="M491.21,663.39c-14.07-3.37-27.62,1-33.45,9.87a48.46,48.46,0,0,0,52.82,20.14,49.33,49.33,0,0,0,6-2C517.93,679.39,507.08,667.18,491.21,663.39Z"
fill={colors.tongue}
/>
<Path
d="M478.65,652l.8,0h.65c.43,0,.84,0,1.25.06a17.92,17.92,0,0,1,2.44.35,21,21,0,0,1,4.74,1.53,18.15,18.15,0,0,1,7.78,6.65,17.17,17.17,0,0,1,2.77,9.28,14.75,14.75,0,0,1-2.69,8.47c-1.3-2.76-2.24-5.2-3.31-7.29a24,24,0,0,0-1.62-2.87,12.38,12.38,0,0,0-1.95-2.21,13,13,0,0,0-4.82-2.66,24.72,24.72,0,0,0-2.85-.69c-.49-.07-1-.16-1.47-.22l-.73-.07-.33,0c-.08,0-.26,0-.19,0Z"
fill={colors.outline}
/>
<Circle
cx="499.7"
cy="642.93"
r="53.95"
fill="none"
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="8px"
/>
</>
)
}
Example #13
| Source File: PiercedTongue.tsx From react-native-bigheads with MIT License | 6 votes |
|
PiercedTongue = () => {
const { colors } = useTheme()
return (
<G>
<Path d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z" fill={colors.outline} />
<Path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="none"
stroke={colors.outline}
strokeMiterlimit="10"
strokeWidth="6px"
/>
<Circle cx="500.5" cy="721.5" r="6.5" fill="#FFC227" stroke={colors.outline} strokeWidth="3" />
<Path
d="M532.49,646.6c0-8.06-14.55-14.6-32.49-14.6s-32.49,6.54-32.49,14.6h0v44.34c0,14.41,14.55,26.08,32.49,26.08s32.49-11.67,32.49-26.08V646.61Z"
fill={colors.tongue}
/>
<Path
d="M532.49,646.6c0-8.06-14.55-14.6-32.49-14.6s-32.49,6.54-32.49,14.6h0v44.34c0,14.41,14.55,26.08,32.49,26.08s32.49-11.67,32.49-26.08V646.61Z"
fill="none"
stroke={colors.outline}
strokeMiterlimit="10"
strokeWidth="8px"
/>
<Path
d="M479.31,626.6l.91-.21.76-.14c.49-.08,1-.14,1.46-.18a21.42,21.42,0,0,1,2.89-.1,25,25,0,0,1,5.79.81,21.39,21.39,0,0,1,10.34,6.11A20.07,20.07,0,0,1,506.54,643a17.19,17.19,0,0,1-1.37,10.35c-2.08-2.93-3.66-5.55-5.32-7.76a27.26,27.26,0,0,0-2.46-3,14.09,14.09,0,0,0-2.69-2.16,15.31,15.31,0,0,0-6.11-2.08,25.67,25.67,0,0,0-3.43-.22c-.59,0-1.18,0-1.76,0l-.85.06-.4,0c-.09,0-.29,0-.22,0Z"
fill={colors.outline}
/>
<Rect x="498" y="685" width="5" height="19" rx="2.5" fill="#FFC227" stroke={colors.outline} strokeWidth="2" />
<Circle cx="500.5" cy="684.5" r="8.5" fill="#FFC227" stroke={colors.outline} strokeWidth="3" />
</G>
)
}
Example #14
| Source File: ProgressBarCircle.tsx From companion-kit with MIT License | 6 votes |
|
export function ProgressBarCircle(this: never, props: Props) {
const { style, diameter, progress } = props;
const length = Math.round(diameter * Math.PI);
const offset = getOffset(diameter, progress);
return (
<View style={style}>
<Svg id="progress-bar-circle" width="100%" height="100%" viewBox={`0 0 ${diameter + 2} ${diameter + 2}`} fill="none">
<G x={1} y={1}>
<Circle
opacity="0.2"
cx={diameter / 2}
cy={diameter / 2}
r={diameter / 2}
stroke={Colors.ProgressBarCircle.progressBarCircleLine}
strokeWidth="1"
/>
<Circle
cx={diameter / 2}
cy={diameter / 2}
r={diameter / 2}
stroke={Colors.ProgressBarCircle.progressBarCircleLine}
strokeWidth="1"
strokeDasharray={length}
strokeDashoffset={offset}
origin={`${diameter / 2}, ${diameter / 2}`}
rotation={-90}
/>
</G>
</Svg>
</View>
);
}
Example #15
| Source File: TextLengthIndicator.tsx From nyxo-app with GNU General Public License v3.0 | 6 votes |
|
TextLengthIndicator: FC<Props> = ({ radius, percentage }) => {
const circumference = returnCircumference(radius)
const progress = returnProgress(percentage, circumference)
return (
<Svg height="25" width="25" viewBox="0 0 100 100">
<Circle
cx="50"
cy="50"
r={radius}
stroke={colors.gray}
strokeWidth="8"
fill="transparent"
/>
<AnimatedCircle
cx="-50"
cy="50"
r={radius}
stroke="blue"
strokeWidth="8"
fill="transparent"
strokeDasharray={`${circumference}`}
strokeDashoffset={`${progress}`}
rotation={-90}
/>
</Svg>
)
}
Example #16
| Source File: BunHair.tsx From react-native-bigheads with MIT License | 5 votes |
|
Front = ({ hairColor, hasHat = false }: HairProps) => {
const { colors, skin } = useTheme()
const { base, shadow } = colors.hair[hairColor]
return (
<>
{!hasHat && (
<>
<Circle cx="499.7" cy="170.67" r="107.58" fill={base} />
<Path d="M559.29,397.34c-12.87,24-60,37.44-63.83,31.42-4.3-6.73,37.84-55.32,13.9-106.14" fill={skin.shadow} />
<Path
d="M420.82,134.59A71.58,71.58,0,0,1,433,112.84c1.37-1.59,2.72-3.21,4.16-4.74s3-3,4.53-4.41,3.21-2.73,4.88-4,3.41-2.5,5.17-3.65,3.6-2.21,5.47-3.19l2.82-1.43a31,31,0,0,1,2.86-1.35c2-.76,3.89-1.62,5.89-2.29s4-1.32,6-1.81a72,72,0,0,1,24.86-2,112.32,112.32,0,0,0-24,5c-1,.26-1.9.7-2.85,1l-2.85,1c-1.88.73-3.69,1.65-5.54,2.45s-3.58,1.85-5.38,2.77-3.44,2.09-5.17,3.12-3.33,2.28-5,3.41-3.15,2.52-4.76,3.75-3,2.68-4.53,4l-4.28,4.31A110.47,110.47,0,0,0,420.82,134.59Z"
fill={colors.white}
/>
<Path
d="M409.8,229.76C429,259,435.67,233.25,498,233.25c107.21,0,73.62,25,92.69-5.15-27.59-9.65-44-19.39-88.13-19.39C460.26,208.71,438.69,219.05,409.8,229.76Z"
fill={shadow}
/>
<Circle
cx="499.7"
cy="170.67"
r="107.58"
fill="none"
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="12px"
/>
</>
)}
<Path
d="M421.52,244.56C335.16,273.62,263.78,346.74,245.06,429.8,213,556.34,262.89,634,307.17,681.6c4.37,4.7-69.46-138.26-2.43-241,61.1-2.32,152.42-14.38,195.78-62.86C496.18,398.87,484,415,486,418.18c2.88,4.51,38.19-5.53,47.84-23.54l.83-3.61c34.72,12.58,91.76,26.59,144,6.61C801.81,535.94,691.29,689,700.3,679a265.78,265.78,0,0,0,69-179c0-86.42-44.28-148.89-44.28-148.89C694.5,296.7,641.5,259.24,580.22,242"
fill={base}
/>
<Path
d="M326.66,439.38c5.38-52.22,25-112.5,64.7-181.9h0q-4.07,1.88-8.06,3.88l-.59.29c-1.22.61-2.44,1.24-3.65,1.88l-1,.53q-5.64,3-11.13,6.23l-.9.53c-1.16.69-2.31,1.39-3.46,2.1l-.86.54q-5.37,3.35-10.56,6.93l-1.08.75c-1.08.76-2.16,1.52-3.23,2.29l-.65.47q-3.27,2.39-6.47,4.84l-.62.48c-1,.78-2,1.58-3,2.39l-1.18.94c-1,.81-2,1.62-3,2.45l0,0c-2.11,1.75-4.18,3.55-6.24,5.37l-1.14,1-2.69,2.45L320.53,305q-4.27,4-8.37,8.17l-1.37,1.41c-.8.82-1.59,1.64-2.37,2.47l-1.37,1.48Q305,320.77,303,323c-.46.51-.92,1-1.37,1.54-.71.81-1.41,1.63-2.11,2.46-.51.59-1,1.18-1.51,1.78-.68.81-1.36,1.62-2,2.44-.54.66-1.07,1.33-1.61,2-1.06,1.33-2.11,2.66-3.15,4-.55.7-1.09,1.4-1.62,2.11s-1.2,1.59-1.79,2.4l-1.59,2.18c-.56.78-1.13,1.55-1.68,2.33-.94,1.34-1.88,2.69-2.8,4.05-.5.73-1,1.48-1.48,2.22s-1.11,1.66-1.65,2.5-1,1.54-1.48,2.31-1.13,1.8-1.69,2.71c-.43.69-.86,1.38-1.28,2.07q-1.32,2.19-2.6,4.4c-.42.72-.82,1.44-1.23,2.16-.54.95-1.08,1.91-1.61,2.87-.4.73-.8,1.46-1.19,2.19-.64,1.19-1.27,2.39-1.89,3.59-.41.78-.81,1.56-1.21,2.34-.64,1.28-1.28,2.55-1.9,3.84-.34.69-.67,1.39-1,2.09-.52,1.09-1,2.19-1.54,3.29l-.91,2q-1.11,2.47-2.17,5c-.22.52-.43,1.05-.65,1.57-.53,1.27-1,2.54-1.56,3.82-.26.67-.53,1.34-.79,2-.49,1.26-1,2.53-1.45,3.8l-.61,1.65q-1,2.63-1.86,5.26l-.56,1.7q-.66,2-1.29,4c-.2.63-.4,1.27-.59,1.91q-.72,2.31-1.38,4.63c-.1.33-.2.66-.29,1q-.78,2.76-1.5,5.54l-.45,1.78c-.19.74-.37,1.49-.55,2.24-1.56,6.69-2.88,13.23-4,19.64-.1.65-.22,1.3-.32,1.95l-.24,1.51q-.45,2.94-.82,5.89c-.06.43-.11.87-.16,1.3-.2,1.59-.38,3.19-.55,4.79l-.18,1.81c-.17,1.68-.32,3.37-.45,5.06l-.09,1q-.23,3-.38,6.05c0,.53-.05,1.07-.08,1.6q-.11,2.36-.18,4.71c0,.59,0,1.18-.05,1.77,0,2.05-.07,4.11-.07,6.17v.1q0,3.31.08,6.62c0,.76.06,1.52.08,2.28.05,1.47.1,2.94.17,4.41.05.89.11,1.77.16,2.66.08,1.33.16,2.66.25,4,.07,1,.16,1.89.24,2.83.11,1.26.21,2.52.34,3.77.09,1,.21,1.94.31,2.91.14,1.21.27,2.43.42,3.64.12,1,.26,2,.39,2.95.16,1.18.33,2.37.5,3.55.15,1,.31,2,.47,3,.19,1.16.37,2.33.58,3.49.17,1,.35,2,.54,3,.21,1.15.43,2.3.66,3.44s.4,2,.61,3c.24,1.14.48,2.27.74,3.4s.45,2,.68,2.93c.26,1.13.54,2.25.82,3.36s.49,1.95.75,2.91c.29,1.12.59,2.23.9,3.34.27,1,.53,1.92.81,2.87.32,1.11.65,2.21,1,3.31s.57,1.89.87,2.84.71,2.19,1.07,3.28c.31.93.61,1.87.93,2.8l1.15,3.27,1,2.74c.41,1.09.83,2.18,1.25,3.27.34.89.68,1.79,1,2.68.44,1.09.89,2.19,1.34,3.28.36.86.71,1.73,1.08,2.59.48,1.12,1,2.22,1.46,3.33.36.83.72,1.65,1.09,2.47.52,1.16,1.07,2.3,1.61,3.44.36.77.71,1.54,1.08,2.3.6,1.26,1.23,2.5,1.86,3.75l.95,1.9q2.88,5.61,6,11.07c.36.62.73,1.23,1.09,1.84.7,1.2,1.39,2.4,2.11,3.58.44.72.89,1.42,1.33,2.14.66,1.07,1.32,2.14,2,3.19.48.76,1,1.5,1.47,2.24.65,1,1.31,2,2,3,.51.76,1,1.52,1.56,2.28.66,1,1.32,1.92,2,2.88.54.77,1.1,1.53,1.65,2.3s1.34,1.85,2,2.77,1.15,1.53,1.72,2.29l2.07,2.7c.59.76,1.19,1.51,1.79,2.26s1.41,1.76,2.12,2.63,1.23,1.49,1.85,2.23,1.44,1.72,2.17,2.57,1.27,1.47,1.91,2.2l2.22,2.5c.65.73,1.31,1.44,2,2.16l1.15,1.25c2.9,1.92-68.91-139.3-2.51-241.08C311.7,440.33,319,439.94,326.66,439.38Z"
fill={shadow}
/>
<Path
d="M657.94,378.93s-2.1,20.81-50.63,28.22c23.11,1.6,47.74-.46,71.38-9.51C681.91,401.25,657.94,378.93,657.94,378.93Z"
fill={shadow}
/>
<Path d="M304.74,441s-11,1.14-30.77-1.89" fill={base} />
<Path
d="M305.35,447c-.51.08-.81.11-1.19.15s-.71.07-1.07.1c-.7,0-1.39.08-2.08.08-1.37,0-2.73,0-4.08-.16a61,61,0,0,1-8-1.22c-1.31-.29-2.61-.59-3.9-1a31.69,31.69,0,0,1-3.83-1.25,22.55,22.55,0,0,1-7.25-4.59,23.84,23.84,0,0,1,4.11-1.63,31.51,31.51,0,0,1,3.95-.91c2.59-.42,5.12-.55,7.64-.79s5-.39,7.45-.53c1.22-.08,2.44-.12,3.63-.17l1.78,0c.29,0,.59,0,.86,0s.6,0,.73,0Z"
fill={colors.outline}
/>
<Path d="M677,396.19s-10.71-14.3-40.38-31" fill={base} />
<Path
d="M672.14,399.78l-1.77-1.91-2-2.12c-1.39-1.41-2.82-2.85-4.27-4.25-2.92-2.82-5.95-5.62-9-8.4s-6.3-5.44-9.43-8.32c-1.56-1.44-3.13-2.91-4.63-4.52a48,48,0,0,1-4.39-5.1,43.5,43.5,0,0,1,6.65,1.34,60,60,0,0,1,6.24,2.24c2,.89,4,1.83,5.91,2.91s3.84,2.13,5.72,3.29A96.15,96.15,0,0,1,672,382.62c1.71,1.45,3.43,2.91,5,4.53.82.79,1.61,1.63,2.39,2.5.39.45.78.87,1.16,1.35s.72.89,1.22,1.59Z"
fill={colors.outline}
/>
<Path
d="M421.52,244.56C335.16,273.62,263.78,346.74,245.06,429.8,213,556.34,262.89,634,307.17,681.6c4.37,4.7-69.46-138.26-2.43-241,61.1-2.32,152.42-14.38,195.78-62.86C496.18,398.87,484,415,486,418.18c2.88,4.51,38.19-5.53,47.84-23.54l.83-3.61c34.72,12.58,91.76,26.59,144,6.61C801.81,535.94,691.29,689,700.3,679a265.78,265.78,0,0,0,69-179c0-86.42-44.28-148.89-44.28-148.89C694.5,296.7,641.5,259.24,580.22,242"
fill="none"
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="12px"
/>
<Path
d="M520.11,249.17a367.15,367.15,0,0,0-42.48,4.93c-3.49.68-7,1.42-10.44,2.06s-6.9,1.61-10.35,2.41l-10.27,2.72c-3.39,1-6.76,2.08-10.14,3.11A312.8,312.8,0,0,0,397,280.14a347.55,347.55,0,0,0-37.25,21A183.48,183.48,0,0,1,394.83,276a218.27,218.27,0,0,1,39.76-17.3c3.47-1,6.93-2.08,10.42-3.05s7-1.82,10.54-2.59,7.1-1.41,10.66-2,7.15-1.08,10.74-1.52A189.39,189.39,0,0,1,520.11,249.17Z"
fill={colors.white}
/>
<Path
d="M529.83,233.83a70.16,70.16,0,0,1,15.44-1.92c2.56-.06,5.11,0,7.67.13s5.12.3,7.68.52a138.69,138.69,0,0,1,15.35,2.2A95.37,95.37,0,0,1,591.05,239l-3.9,11.35c-4.61-1.38-9.24-2.78-13.94-4.07s-9.45-2.51-14.25-3.71l-7.25-1.76c-2.43-.57-4.87-1.15-7.3-1.81A85.14,85.14,0,0,1,529.83,233.83Z"
fill={colors.outline}
/>
<Path
d="M412.45,241.49a96.65,96.65,0,0,1,13.65-4.15,138.88,138.88,0,0,1,14-2.45c2.34-.28,4.68-.53,7-.71s4.69-.33,7-.34a57.35,57.35,0,0,1,14.27,1.58,77.5,77.5,0,0,1-13.13,5.5c-2.19.73-4.39,1.37-6.59,2l-6.55,1.93c-4.34,1.32-8.67,2.6-12.94,4s-8.52,2.72-12.79,4Z"
fill={colors.outline}
/>
<Circle cx="514.26" cy="233.25" r="5.84" fill={colors.outline} />
<Circle cx="497.99" cy="233.25" r="4.13" fill={colors.outline} />
</>
)
}
Example #17
| Source File: BgCircle.tsx From react-native-bigheads with MIT License | 5 votes |
|
BgCircle = ({ bgColor }: BgShapeProps) => {
const { colors } = useTheme()
const color = colors.bgColors[bgColor]
return <Circle cx="500" cy="630.1601" r="332.441995" fill={color} />
}
Example #18
| Source File: SquintEyes.tsx From react-native-bigheads with MIT License | 5 votes |
|
SquintEyes = ({ withLashes }: EyeProps) => {
const { colors, skin } = useTheme()
return (
<>
<Path
d="M271.4,576.82c-1-28.36,18-52.36,43.28-63.56a62.37,62.37,0,0,1,8.16-2.7,70,70,0,0,1,42.21,2.68A71.67,71.67,0,0,1,374,517.4c29.53,15.88,42.79,53.25,31.36,83.46a61.68,61.68,0,0,1-4.18,8.82,54.68,54.68,0,0,1-17.51,20.83,69.25,69.25,0,0,1-7.85,5c-27.38,13-64.38,9-86.45-11.4a69.35,69.35,0,0,1-6.11-7.47,64.89,64.89,0,0,1-5.57-9.5A55.78,55.78,0,0,1,272,585.39,75.67,75.67,0,0,1,271.4,576.82Z"
fill={skin.shadow}
/>
<Path
d="M269.77,558.47c-1-28.36,18-52.36,43.28-63.56a62.23,62.23,0,0,1,8.15-2.7,70,70,0,0,1,42.22,2.68,71.54,71.54,0,0,1,8.92,4.16c29.53,15.89,42.79,53.25,31.36,83.46a59.6,59.6,0,0,1-4.18,8.82,63.85,63.85,0,0,1-4.71,7.8,64.78,64.78,0,0,1-5.68,7,63.08,63.08,0,0,1-7.12,6.07,68.37,68.37,0,0,1-7.85,5c-27.38,13-64.38,9-86.44-11.4a67.24,67.24,0,0,1-6.11-7.47,65,65,0,0,1-5.58-9.5A55.59,55.59,0,0,1,270.32,567,71.3,71.3,0,0,1,269.77,558.47Z"
fill={colors.white}
/>
<Circle cx="338.51" cy="559.08" r="12.24" fill={colors.outline} />
<Path
d="M339.2,490.12a68.31,68.31,0,0,0-48.45,20.07,69.79,69.79,0,0,0-6.86,8,73.12,73.12,0,0,0-10.3,18.39H403.92a58.59,58.59,0,0,0-20.12-30,69.37,69.37,0,0,0-6.28-4.79A68.21,68.21,0,0,0,339.2,490.12Z"
fill={skin.base}
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="8px"
/>
<Path
d="M274.09,581.45c5.5,13.75,15.3,25.93,27.92,33.32a68.27,68.27,0,0,0,10.15,4.7c24.63,9.09,55,5.07,74.49-11.61a69.9,69.9,0,0,0,7.29-7.61,55.62,55.62,0,0,0,4.6-6.42,77.37,77.37,0,0,0,4.94-12.38Z"
fill={skin.base}
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="8px"
/>
<Path
d="M269.77,558.47c-1-28.36,18-52.36,43.28-63.56a62.23,62.23,0,0,1,8.15-2.7,70,70,0,0,1,42.22,2.68,71.54,71.54,0,0,1,8.92,4.16c29.53,15.89,42.79,53.25,31.36,83.46a59.6,59.6,0,0,1-4.18,8.82,63.85,63.85,0,0,1-4.71,7.8,64.78,64.78,0,0,1-5.68,7,63.08,63.08,0,0,1-7.12,6.07,68.37,68.37,0,0,1-7.85,5c-27.38,13-64.38,9-86.44-11.4a67.24,67.24,0,0,1-6.11-7.47,65,65,0,0,1-5.58-9.5A55.59,55.59,0,0,1,270.32,567,71.3,71.3,0,0,1,269.77,558.47Z"
fill="none"
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="12px"
/>
<Path
d="M583.89,568.76c.43-15.13,6.67-30.09,15.1-41.33a72.82,72.82,0,0,1,7.12-8.53A69.73,69.73,0,0,1,696.28,510a73.27,73.27,0,0,1,6.53,5.13c27,21.45,30.12,63.14,15.32,93.23a62.31,62.31,0,0,1-4.78,6.86,72.09,72.09,0,0,1-7.58,8.13c-20.27,17.83-51.81,22.13-77.41,12.42a71.34,71.34,0,0,1-10.55-5c-17.9-10.78-30.37-31.09-33.43-52.23A62.93,62.93,0,0,1,583.89,568.76Z"
fill={skin.shadow}
/>
<Path
d="M589.38,557.26c.42-14.15,6.42-28.15,14.52-38.66a70.56,70.56,0,0,1,6.86-8,68.55,68.55,0,0,1,86.77-8.37,69.81,69.81,0,0,1,6.28,4.79c26,20.07,29,59.07,14.74,87.22a56.5,56.5,0,0,1-4.6,6.42,68.91,68.91,0,0,1-7.29,7.6C687.15,625,656.8,629,632.17,619.9A68.79,68.79,0,0,1,622,615.19c-17.22-10.08-29.22-29.08-32.17-48.85A56.34,56.34,0,0,1,589.38,557.26Z"
fill={colors.white}
/>
<Circle cx="659.21" cy="559.08" r="12.24" fill={colors.outline} />
<Path
d="M659.21,490.55a68.31,68.31,0,0,0-48.45,20.07,70.56,70.56,0,0,0-6.86,8A73.3,73.3,0,0,0,593.6,537H723.93A58.63,58.63,0,0,0,703.81,507a69.81,69.81,0,0,0-6.28-4.79A68.21,68.21,0,0,0,659.21,490.55Z"
fill={skin.base}
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="8px"
/>
<Path
d="M594.1,581.87c5.51,13.76,15.3,25.94,27.92,33.32a68.79,68.79,0,0,0,10.15,4.71c24.63,9.09,55,5.06,74.49-11.62a68.91,68.91,0,0,0,7.29-7.6,56.5,56.5,0,0,0,4.6-6.42,76.19,76.19,0,0,0,4.94-12.39Z"
fill={skin.base}
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="8px"
/>
<Path
d="M589.38,557.26c.42-14.15,6.42-28.15,14.52-38.66a70.56,70.56,0,0,1,6.86-8,68.55,68.55,0,0,1,86.77-8.37,69.81,69.81,0,0,1,6.28,4.79c26,20.07,29,59.07,14.74,87.22a56.5,56.5,0,0,1-4.6,6.42,68.91,68.91,0,0,1-7.29,7.6C687.15,625,656.8,629,632.17,619.9A68.79,68.79,0,0,1,622,615.19c-17.22-10.08-29.22-29.08-32.17-48.85A56.34,56.34,0,0,1,589.38,557.26Z"
fill="none"
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="12px"
/>
{withLashes && (
<>
<LeftLash />
<RightLash />
</>
)}
</>
)
}
Example #19
| Source File: BackgroundCircle.tsx From react-native-paper-onboarding with MIT License | 5 votes |
|
AnimatedCircle = Animated.createAnimatedComponent(
Circle
) as React.ComponentClass<
Animated.AnimateProps<ViewStyle, CircleProps & { style?: any }>
>
Example #20
| Source File: Indicator.tsx From react-native-paper-onboarding with MIT License | 5 votes |
|
AnimatedCircle = Animated.createAnimatedComponent(
Circle
) as React.ComponentClass<
Animated.AnimateProps<ViewStyle, CircleProps & { style?: any }>
>
Example #21
| Source File: TextLengthIndicator.tsx From nyxo-app with GNU General Public License v3.0 | 5 votes |
|
AnimatedCircle = Animated.createAnimatedComponent(Circle)
Example #22
| Source File: Points.tsx From nyxo-app with GNU General Public License v3.0 | 5 votes |
|
ThemedCircle = styled(Circle).attrs(({ theme }) => ({
fill: theme.SECONDARY_BACKGROUND_COLOR
}))``
Example #23
| Source File: LeftTwitchEyes.tsx From react-native-bigheads with MIT License | 5 votes |
|
LeftTwitchEyes = ({ withLashes }: EyeProps) => {
const { skin, colors } = useTheme()
return (
<>
<Path
d="M271.4,568.53c-1-28.36,18-52.36,43.28-63.56a62.37,62.37,0,0,1,8.16-2.7A70,70,0,0,1,365.05,505a71.67,71.67,0,0,1,8.93,4.16c29.53,15.89,42.79,53.25,31.36,83.46a61.68,61.68,0,0,1-4.18,8.82,54.68,54.68,0,0,1-17.51,20.83,69.25,69.25,0,0,1-7.85,5c-27.38,13-64.38,9-86.45-11.4a68.39,68.39,0,0,1-6.11-7.47,64.89,64.89,0,0,1-5.57-9.5A55.78,55.78,0,0,1,272,577.1,75.67,75.67,0,0,1,271.4,568.53Z"
fill={skin.shadow}
/>
<Path
d="M269.77,550.18c-1-28.36,18-52.36,43.28-63.56a62.23,62.23,0,0,1,8.15-2.7,70,70,0,0,1,42.22,2.68,71.54,71.54,0,0,1,8.92,4.16c29.53,15.89,42.79,53.26,31.36,83.46a59.6,59.6,0,0,1-4.18,8.82,63.85,63.85,0,0,1-4.71,7.8,64.78,64.78,0,0,1-5.68,7,63.08,63.08,0,0,1-7.12,6.07,68.37,68.37,0,0,1-7.85,5c-27.38,13-64.38,9-86.44-11.39a68.28,68.28,0,0,1-6.11-7.48,65,65,0,0,1-5.58-9.5,55.59,55.59,0,0,1-5.71-21.73A71.3,71.3,0,0,1,269.77,550.18Z"
fill={colors.white}
/>
<Circle cx="338.51" cy="541.79" r="12.24" fill={colors.outline} />
<Path
d="M399.52,583a59.6,59.6,0,0,0,4.18-8.82,62.5,62.5,0,0,0,2.57-8.64c-68.32-7.75-127,20.81-127,20.81l1.1,1.75c.41.62.82,1.24,1.25,1.84a68.28,68.28,0,0,0,6.11,7.48c22.06,20.36,59.06,24.36,86.44,11.39a68.37,68.37,0,0,0,7.85-5,63.08,63.08,0,0,0,7.12-6.07,64.78,64.78,0,0,0,5.68-7A63.85,63.85,0,0,0,399.52,583Z"
fill={skin.base}
stroke={colors.outline}
strokeMiterlimit={10}
strokeWidth="6px"
/>
<Path
d="M269.77,550.18c-1-28.36,18-52.36,43.28-63.56a62.23,62.23,0,0,1,8.15-2.7,70,70,0,0,1,42.22,2.68,71.54,71.54,0,0,1,8.92,4.16c29.53,15.89,42.79,53.26,31.36,83.46a59.6,59.6,0,0,1-4.18,8.82,63.85,63.85,0,0,1-4.71,7.8,64.78,64.78,0,0,1-5.68,7,63.08,63.08,0,0,1-7.12,6.07,68.37,68.37,0,0,1-7.85,5c-27.38,13-64.38,9-86.44-11.39a68.28,68.28,0,0,1-6.11-7.48,65,65,0,0,1-5.58-9.5,55.59,55.59,0,0,1-5.71-21.73A71.3,71.3,0,0,1,269.77,550.18Z"
stroke={colors.outline}
strokeMiterlimit={10}
fill="none"
strokeWidth="12px"
/>
<Path
d="M583.89,560.47c.43-15.13,6.67-30.09,15.1-41.33a72.82,72.82,0,0,1,7.12-8.53,69.73,69.73,0,0,1,90.17-8.95,73.27,73.27,0,0,1,6.53,5.13c27,21.45,30.12,63.14,15.32,93.23a62.31,62.31,0,0,1-4.78,6.86,72.09,72.09,0,0,1-7.58,8.13c-20.27,17.83-51.81,22.13-77.41,12.42a71.34,71.34,0,0,1-10.55-5c-17.9-10.78-30.37-31.09-33.43-52.23A62.93,62.93,0,0,1,583.89,560.47Z"
fill={skin.base}
/>
<Path
d="M589.38,549c.42-14.15,6.42-28.15,14.52-38.66a70.56,70.56,0,0,1,6.86-8A68.55,68.55,0,0,1,697.53,494a69.81,69.81,0,0,1,6.28,4.79c26,20.07,29,59.07,14.74,87.22a56.5,56.5,0,0,1-4.6,6.42,68.91,68.91,0,0,1-7.29,7.6c-19.51,16.68-49.86,20.71-74.49,11.62A68.79,68.79,0,0,1,622,606.9c-17.22-10.08-29.22-29.08-32.17-48.85A56.34,56.34,0,0,1,589.38,549Z"
stroke={colors.outline}
fill={colors.white}
strokeMiterlimit={10}
strokeWidth="12px"
/>
<Circle cx="659.21" cy="550.79" r="12.24" fill={colors.outline} />
<Path
d="M718.86,618.11c-10.23,5-20.32,9.55-31.34,12.69a97.34,97.34,0,0,1-16.46,3.3,141.1,141.1,0,0,1-17.69.3A144.2,144.2,0,0,1,633,632.48c-1.93-.31-4.13.51-4.62,2.62-.41,1.81.55,4.28,2.62,4.62a164.26,164.26,0,0,0,19.66,2.1c3.19.13,6.37.06,9.56.16a78.25,78.25,0,0,0,9.06-.21c12-1,23.62-4.28,34.76-8.76,6.32-2.55,12.52-5.4,18.63-8.42a3.77,3.77,0,0,0,1.34-5.13,3.83,3.83,0,0,0-5.13-1.35Z"
fill={colors.outline}
/>
<Path
d="M365.31,627.42c-11.37,2.16-22.4,3.8-34.06,3.83a95.68,95.68,0,0,1-17-1.36,171.78,171.78,0,0,1-35.56-11.64,3.85,3.85,0,0,0-5.13,1.35c-.95,1.62-.5,4.27,1.34,5.13a164.42,164.42,0,0,0,17.87,7.1c2.91,1,5.87,1.7,8.78,2.6a91.22,91.22,0,0,0,8.91,2.35c11.95,2.42,24.22,2.37,36.31,1,6.88-.76,13.71-1.88,20.51-3.17,2-.37,3.12-2.77,2.62-4.61a3.83,3.83,0,0,0-4.62-2.62Z"
fill={colors.outline}
/>
{withLashes && (
<G transform="translate(0 -5)">
<LeftLash />
<RightLash />
</G>
)}
</>
)
}
Example #24
| Source File: ProgressCircle.tsx From orangehrm-os-mobile with GNU General Public License v3.0 | 5 votes |
|
render() {
const {
theme,
height = 200,
mainColor = '#bdbdbd',
lightColor = '#ececec',
usedDays = '0.00',
progress = 0,
} = this.props;
const fontColor = theme.typography.primaryColor;
const backgroundColor = theme.palette.background;
const ratio = 400 / height;
const fontSize = theme.typography.fontSize * ratio;
const headerFontSize = theme.typography.headerFontSize * ratio;
const data = [
{x: 1, y: progress},
{x: 2, y: 1 - progress},
];
return (
<>
<View style={[styles.container, {height, backgroundColor}]}>
<Svg viewBox="0 0 400 400" width="100%" height="100%">
<Circle cx="200" cy="200" r="150" fill={lightColor} />
<Circle cx="200" cy="200" r="120" fill={backgroundColor} />
<VictoryPie
standalone={false}
animate={{duration: 500}}
width={400}
height={400}
data={data}
innerRadius={120}
cornerRadius={theme.borderRadius * 4}
labels={() => null}
style={{
data: {
fill: ({datum}) => {
return datum.x === 1 ? mainColor : 'transparent';
},
},
}}
/>
<VictoryLabel
textAnchor="middle"
verticalAnchor="middle"
x={200}
y={150}
text={'Used'}
style={{fontSize: fontSize, fill: fontColor}}
/>
<VictoryLabel
textAnchor="middle"
verticalAnchor="middle"
x={200}
y={200}
text={usedDays}
style={{fontSize: headerFontSize, fill: fontColor}}
/>
<VictoryLabel
textAnchor="middle"
verticalAnchor="middle"
x={200}
y={250}
text={'Day(s)'}
style={{fontSize: fontSize, fill: fontColor}}
/>
</Svg>
</View>
</>
);
}
Example #25
| 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 #26
| Source File: ConcentricCircles.tsx From companion-kit with MIT License | 5 votes |
|
AnimatedContainer = Animated.createAnimatedComponent(Circle)
Example #27
| Source File: ConcentricCircles.tsx From companion-kit with MIT License | 5 votes |
|
export function ConcentricCircle(props: ConcentricCircleProps) {
const { strokeBgColor, strokeColor, strokeWidth, radiusDecremented, radius, progress, animationStep } = props;
const diameter = radiusDecremented * 2;
const length = Math.round(diameter * Math.PI);
const offset = React.useMemo(() => {
if (!animationStep) {
return null;
}
const startProgress = progress - animationStep;
return new Animated.Value(getOffset(diameter, startProgress));
}, [animationStep, diameter, progress]);
React.useEffect(() => {
if (offset != null) {
Animated.timing(offset, {
toValue: getOffset(diameter, progress),
duration: 1500,
easing: Easing.inOut(Easing.ease),
}).start();
}
}, [progress]);
return (
<>
<Circle
cx={radius}
cy={radius}
r={radiusDecremented}
strokeWidth={strokeWidth}
stroke={strokeBgColor}
fill="none"
/>
<AnimatedContainer
fill="none"
cx={radius}
cy={radius}
r={radiusDecremented}
strokeWidth={strokeWidth}
stroke={strokeColor}
strokeDasharray={length}
strokeDashoffset={offset}
origin={`${radius}, ${radius}`}
rotation={-90}
/>
</>
);
}
Example #28
| 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 #29
| 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>
);
}
