react-native-svg#LinearGradient JavaScript Examples
The following examples show how to use
react-native-svg#LinearGradient.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Loading.mobile.js From actual with MIT License | 6 votes |
|
SvgLoading = props => {
let { color = '#fff' } = props;
return (
<Svg {...props} viewBox="0 0 38 38" style={{ ...props.style }}>
<Defs>
<LinearGradient
x1="8.042%"
y1="0%"
x2="65.682%"
y2="23.865%"
id="loading_svg__a"
>
<Stop stopColor={color} stopOpacity={0} offset="0%" />
<Stop stopColor={color} stopOpacity={0.631} offset="63.146%" />
<Stop stopColor={color} offset="100%" />
</LinearGradient>
</Defs>
<G transform="translate(1 2)" fill="none" fillRule="evenodd">
<Path
d="M36 18c0-9.94-8.06-18-18-18"
stroke="url(#loading_svg__a)"
strokeWidth={2}
fill="none"
/>
<Circle fill="#fff" cx={36} cy={18} r={1} />
</G>
</Svg>
);
}
Example #2
| Source File: CircleBlueGradient.js From react-native-ring-picker with GNU General Public License v3.0 | 6 votes |
|
CircleBlueGradient = () => (
<Svg width="100%" height="100%" viewBox="0 0 955 955">
<G id="layer_2">
<G id="layer_1-2">
<LinearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="477.3691" y1="0.2666" x2="477.3691" y2="955">
<Stop offset="0" stopColor="#5896D0"/>
<Stop offset="0.2815" stopColor="#3D8CCB"/>
<Stop offset="0.5674" stopColor="#1E80C6"/>
<Stop offset="0.8652" stopColor="#0060AD"/>
<Stop offset="0.9944" stopColor="#004886"/>
</LinearGradient>
<Path fill="url(#SVGID_1_)" d="M477.4,955C214.1,955,0,740.9,0,477.6S214.1,0.3,477.4,0.3s477.4,214.1,477.4,477.4S740.6,955,477.4,955z
M477.4,178.6c-164.9,0-299,134.1-299,299s134.1,299,299,299s299-134.1,299-299S642.2,178.6,477.4,178.6z"/>
</G>
</G>
</Svg>
)
Example #3
| Source File: Icons.js From rakning-c19-app with MIT License | 5 votes |
|
TestResults = props => (
<Svg width={375} height={335} {...props}>
<Defs>
<LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__c">
<Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
<Stop stopColor="#FEEFE8" offset="100%" />
</LinearGradient>
<Path id="prefix__a" d="M0 0h375v335H0z" />
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__b" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<G mask="url(#prefix__b)">
<G transform="translate(28 125)">
<Rect fill="#FFF" width={319} height={269} rx={12} />
<Text
fontFamily="OpenSansBold"
fontSize={15}
fontWeight="bold"
letterSpacing={-0.2}
>
<TSpan x={86.386} y={37.5} fill="#FE7A4C">
{'YOUR TEST RESULT'}
</TSpan>
</Text>
<Text
fontFamily="OpenSansBold"
fontSize={26}
fontWeight="bold"
letterSpacing={-0.347}
>
<TSpan x={51.092} y={69.702} fill="#263343">
{'You do not have '}
</TSpan>
<TSpan x={88.473} y={97.702} fill="#263343">
{'COVID-19'}
</TSpan>
</Text>
<Text fontFamily="OpenSans" fontSize={14} letterSpacing={-0.187}>
<TSpan x={37.792} y={133} fill="#606A77">
{'Vestibulum rutrum quam vitae fringilla '}
</TSpan>
<TSpan x={34.672} y={151} fill="#606A77">
{'tincidunt. Suspendisse nec tortor urna. '}
</TSpan>
<TSpan x={32.339} y={169} fill="#606A77">
{'Ut laoreet sodales nisi, quis iaculis nulla '}
</TSpan>
<TSpan x={43.127} y={187} fill="#606A77">
{'iaculis vitae. Donec sagittis faucibus '}
</TSpan>
<TSpan x={32.659} y={205} fill="#606A77">
{'lacus eget blandit. Mauris vitae ultricies '}
</TSpan>
<TSpan x={41.988} y={223} fill="#606A77">
{'metus, at condimentum nulla. Donec '}
</TSpan>
<TSpan x={36.904} y={241} fill="#606A77">
{'quis ornare lacus. Etiam gravida mollis '}
</TSpan>
<TSpan x={96.062} y={259} fill="#606A77">
{'tortor quis porttitor.'}
</TSpan>
</Text>
</G>
</G>
<Path
fill="url(#prefix__c)"
mask="url(#prefix__b)"
d="M0 251h375v84H0z"
/>
</G>
</Svg>
)
Example #4
| Source File: Icons.js From rakning-c19-app with MIT License | 5 votes |
|
OnboardingCardIcon = props => (
<Svg width="375px" height="100%" viewBox="0 0 375 335" {...props}>
<Defs>
<LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__c">
<Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
<Stop stopColor="#FEEFE8" offset="100%" />
</LinearGradient>
<Path id="prefix__a" d="M0 0h375v335H0z" />
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__b" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<G mask="url(#prefix__b)">
<G transform="translate(28 125)">
<Rect fill="#FFF" width={319} height={269} rx={12} />
<Rect
fill="#FF8F5E"
opacity={0.358}
x={97}
y={27}
width={125}
height={11}
rx={2}
/>
<Path
d="M226 80a2 2 0 012 2v17a2 2 0 01-2 2H97a2 2 0 01-2-2V82a2 2 0 012-2h129zm33-25a2 2 0 012 2v17a2 2 0 01-2 2H64a2 2 0 01-2-2V57a2 2 0 012-2h195z"
fill="#324355"
opacity={0.08}
/>
<Path
d="M272 197a2 2 0 012 2v6a2 2 0 01-2 2H46a2 2 0 01-2-2v-6a2 2 0 012-2h226zm-9-18a2 2 0 012 2v6a2 2 0 01-2 2H55a2 2 0 01-2-2v-6a2 2 0 012-2h208zm15-18a2 2 0 012 2v6a2 2 0 01-2 2H40a2 2 0 01-2-2v-6a2 2 0 012-2h238zm8-19a2 2 0 012 2v6a2 2 0 01-2 2H32a2 2 0 01-2-2v-6a2 2 0 012-2h254zm-8-18a2 2 0 012 2v6a2 2 0 01-2 2H40a2 2 0 01-2-2v-6a2 2 0 012-2h238z"
fill="#F7F7F7"
/>
</G>
</G>
<Path
fill="url(#prefix__c)"
mask="url(#prefix__b)"
d="M0 251h375v84H0z"
/>
<G mask="url(#prefix__b)">
<G transform="translate(299 115)">
<Circle fill="#FE7A4C" cx={27} cy={27} r={27} />
<Path
stroke="#FFF"
strokeWidth={5}
d="M14.07 26.432l11.414 9.26 14.748-18.294"
/>
</G>
</G>
</G>
</Svg>
)
Example #5
| Source File: Icons.js From rakning-c19-app with MIT License | 5 votes |
|
OnboardingChatIcon = props => (
<Svg width="375px" height="100%" viewBox="0 0 375 335" {...props}>
<Defs>
<Path id="prefix__a" d="M0 0h375v335H0z" />
<Path
d="M12 10a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2zm-8 0a1 1 0 110 2 1 1 0 010-2zm11.9 2.293c-.507 3.254-3.13 5.953-6.38 6.562a8.003 8.003 0 01-4.616-.487 3.215 3.215 0 00-1.253-.262c-.19 0-.378.018-.563.055l-2.812.562.563-2.817c.118-.585.046-1.21-.207-1.81a8.01 8.01 0 01-.487-4.617C4.754 6.23 7.452 3.607 10.707 3.1c2.59-.403 5.123.413 6.95 2.241 1.83 1.83 2.647 4.363 2.243 6.952m-.827-8.366c-2.285-2.284-5.445-3.303-8.674-2.804-4.077.636-7.457 3.92-8.22 7.987a10.007 10.007 0 00.61 5.765c.098.231.128.446.09.64l-.858 4.287a.997.997 0 00.274.903.996.996 0 00.903.274l4.283-.857a1.15 1.15 0 01.643.088 10.02 10.02 0 005.765.611c4.068-.763 7.352-4.143 7.988-8.22.502-3.227-.52-6.389-2.804-8.674"
id="prefix__d"
/>
<Path
d="M12 10a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2zm-8 0a1 1 0 110 2 1 1 0 010-2zm11.9 2.293c-.507 3.254-3.13 5.953-6.38 6.562a8.003 8.003 0 01-4.616-.487 3.215 3.215 0 00-1.253-.262c-.19 0-.378.018-.563.055l-2.812.562.563-2.817c.118-.585.046-1.21-.207-1.81a8.01 8.01 0 01-.487-4.617C4.754 6.23 7.452 3.607 10.707 3.1c2.59-.403 5.123.413 6.95 2.241 1.83 1.83 2.647 4.363 2.243 6.952m-.827-8.366c-2.285-2.284-5.445-3.303-8.674-2.804-4.077.636-7.457 3.92-8.22 7.987a10.007 10.007 0 00.61 5.765c.098.231.128.446.09.64l-.858 4.287a.997.997 0 00.274.903.996.996 0 00.903.274l4.283-.857a1.15 1.15 0 01.643.088 10.02 10.02 0 005.765.611c4.068-.763 7.352-4.143 7.988-8.22.502-3.227-.52-6.389-2.804-8.674"
id="prefix__f"
/>
<LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__g">
<Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
<Stop stopColor="#FEEFE8" offset="100%" />
</LinearGradient>
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__c" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<G filter="url(#prefix__b)" mask="url(#prefix__c)">
<G transform="translate(15 163)">
<Path
d="M275 0c6.627 0 12 5.373 12 12v108c0 6.627-5.373 12-12 12H30.061L18 147.833V132h-6c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h263z"
fill="#FFF"
/>
<Use
fill="#FE7A4C"
xlinkHref="#prefix__d"
transform="translate(17 17)"
/>
<Rect fill="#F0E5E0" x={52} y={22} width={95} height={14} rx={2} />
<Rect fill="#F0E5E0" x={52} y={54} width={181} height={10} rx={2} />
<Rect fill="#F0E5E0" x={52} y={75} width={201} height={10} rx={2} />
<Rect fill="#F0E5E0" x={52} y={94} width={115} height={10} rx={2} />
</G>
</G>
<G filter="url(#prefix__e)" mask="url(#prefix__c)">
<G transform="translate(67 87)">
<Path
d="M12 0C5.373 0 0 5.373 0 12v66c0 6.627 5.373 12 12 12h254.2l12.8 16V90h6c6.627 0 12-5.373 12-12V12c0-6.627-5.373-12-12-12H12z"
fill="#FFF"
/>
<Use
fill="#FE7A4C"
xlinkHref="#prefix__f"
transform="matrix(-1 0 0 1 287 13)"
/>
<Rect fill="#F0E5E0" x={72} y={18} width={183} height={14} rx={2} />
<Rect
fill="#F0E5E0"
transform="matrix(-1 0 0 1 280 0)"
x={25}
y={44}
width={230}
height={10}
rx={2}
/>
<Rect
fill="#F0E5E0"
transform="matrix(-1 0 0 1 364 0)"
x={109}
y={62}
width={146}
height={10}
rx={2}
/>
</G>
</G>
<Path
fill="url(#prefix__g)"
mask="url(#prefix__c)"
d="M0 251h375v84H0z"
/>
<Path fill="#FEEFE8" mask="url(#prefix__c)" d="M0 0h375v56H0z" />
</G>
</Svg>
)
Example #6
| Source File: logo_bluezone.js From bluezone-app with GNU General Public License v3.0 | 4 votes |
|
function LogoBluezone(props) {
return (
<Svg width={33.608} height={40.321} viewBox="0 0 33.608 40.321" {...props}>
<Defs>
<LinearGradient
id="prefix__a"
x1={0.502}
y1={0.026}
x2={0.497}
y2={0.949}
gradientUnits="objectBoundingBox"
>
<Stop offset={0} stopColor="#459fe5" />
<Stop offset={1} stopColor="#1c74c4" />
</LinearGradient>
</Defs>
<G data-name="Group 6548">
<G data-name="Group 6547">
<Path
data-name="Path 14790"
d="M287.686 152c-7.794.242-15.469 3.988-15.469 3.988v15.333s-.226 4.322 1.149 6.9c2.838 5.559 14.32 11.3 14.32 11.3s11.482-5.74 14.323-11.3c1.373-2.584 1.147-6.906 1.147-6.906v-15.329s-7.674-3.746-15.47-3.986z"
transform="translate(-270.881 -150.677)"
fill="url(#prefix__a)"
/>
<Path
data-name="Path 14791"
d="M16.804 40.321l-.59-.295c-.484-.242-11.9-6-14.906-11.881-1.464-2.75-1.315-7.057-1.293-7.536V4.484l.741-.362C1.08 3.964 8.778.249 16.763.001h.082c7.987.248 15.684 3.963 16.008 4.121l.741.362v16.125c.022.478.17 4.786-1.3 7.557-2.994 5.859-14.414 11.619-14.9 11.861zM2.655 6.16v14.552c-.056 1.1.014 4.371 1 6.215 2.049 4.015 9.689 8.622 13.151 10.435 2.328-1.233 10.892-5.992 13.152-10.415.99-1.865 1.06-5.133 1-6.237V6.16a41.93 41.93 0 00-14.15-3.517A41.822 41.822 0 002.655 6.16z"
fill="#fff"
/>
<G
data-name="Group 5872"
transform="translate(6.339 7.218)"
opacity={0.8}
>
<Circle
data-name="Ellipse 1142"
cx={0.935}
cy={0.935}
r={0.935}
transform="rotate(-62.45 14.194 8.546)"
/>
<Path
data-name="Path 14792"
d="M21.865 10.129a.934.934 0 00-1.613.137l-2.62.081a6.977 6.977 0 00-.849-2.217l1.716-.65a.729.729 0 10-.144-.46l-1.787.77c-.02-.03-.039-.061-.06-.091a7 7 0 00-1.7-1.717l1.273-3.021a1.332 1.332 0 10-1.217-.565 1.336 1.336 0 00.15.178l-1.19 2.825a7.067 7.067 0 00-3.21-.712l.122-2.906a.934.934 0 10-1.161-.313.931.931 0 00.351.3L9.82 4.744a7 7 0 00-2.585.874L5.192 2.76a1.318 1.318 0 10-.93.648L6.3 6.26a7.028 7.028 0 00-1.141 1.165L3.18 6.097a.934.934 0 10-.369.525.946.946 0 00.124-.1l1.941 1.3a7.056 7.056 0 00-1.182 3.8l-1.84-.174a.934.934 0 10-.388.916.945.945 0 00.146-.125l2.116.2a6.972 6.972 0 00.7 2.419l-2.391 1.263.3.572 2.4-1.269q.1.157.2.31a6.994 6.994 0 001.892 1.848l-1.675 1.781a.934.934 0 10.575.571l1.856-1.917a7.041 7.041 0 001.414.518l-.428 1.425a.735.735 0 10.454.178l.45-1.5a7.038 7.038 0 003.337-.212l1.407 3.226a1.629 1.629 0 101.026-.482l-1.383-3.171a7.114 7.114 0 00.865-.513 7.013 7.013 0 002.452-3.006l2.075 1.022a.938.938 0 10.31-.57l-2.156-1.062a7.065 7.065 0 00.32-2.717l2.518-.078a.934.934 0 101.6-.947z"
/>
</G>
<G data-name="Group 5907">
<G data-name="Group 5902">
<G data-name="Group 5873">
<Path
data-name="Rectangle 1791"
fill="#bf0000"
d="M23.213 21.395l.286-.581 2.404 1.184-.286.582z"
/>
</G>
<G data-name="Group 5874">
<Path
data-name="Path 14793"
d="M8.585 23.716l-.3-.572 2.749-1.452.3.572z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5878">
<G data-name="Group 5875">
<Path
data-name="Path 14794"
d="M22.875 15.208l-.3-.3 2.11-.909.188.448z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5876">
<Path
data-name="Path 14795"
d="M14.801 27.056l.543-1.811.466.137-.543 1.811z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5877">
<Path
data-name="Rectangle 1792"
fill="#bf0000"
d="M9.094 13.486l.271-.403 2.32 1.56-.27.403z"
/>
</G>
</G>
<G data-name="Group 5882">
<G data-name="Group 5879">
<Path
data-name="Path 14796"
d="M19.956 12.681l1.363-3.235 1.049.43-1.363 3.235z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5880">
<Path
data-name="Path 14797"
d="M20.627 29.028l-1.723-3.951 1.04-.451 1.723 3.951z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5881">
<Path
data-name="Path 14798"
d="M12.69 13.491l-2.22-3.106.931-.647 2.22 3.106z"
fill="#bf0000"
/>
</G>
</G>
<G data-name="Group 5887">
<G data-name="Group 5883">
<Path
data-name="Path 14799"
d="M23.658 18.185l-.028-.81 2.869-.089.028.81z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5884">
<Path
data-name="Path 14800"
d="M11.381 26.415l1.757-1.869.838.352-2.005 2.072z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5885">
<Path
data-name="Path 14801"
d="M7.81 19.258l.1-.8 2.383.225-.1.8z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5886">
<Path
data-name="Path 14802"
d="M16.057 12.044l.117-3.29.809.034-.126 2.957z"
fill="#bf0000"
/>
</G>
</G>
<G data-name="Group 5888">
<Ellipse
data-name="Ellipse 1143"
cx={7.039}
cy={7.027}
rx={7.039}
ry={7.027}
transform="rotate(-34.811 30.684 -2.955)"
fill="#bf0000"
/>
</G>
<G data-name="Group 5901">
<G data-name="Group 5889">
<Circle
data-name="Ellipse 1144"
cx={1.332}
cy={1.332}
r={1.332}
fill="#bf0000"
transform="translate(20.867 7.325)"
/>
</G>
<G data-name="Group 5890">
<Circle
data-name="Ellipse 1145"
cx={1.628}
cy={1.628}
r={1.628}
fill="#bf0000"
transform="translate(20.007 28.186)"
/>
</G>
<G data-name="Group 5891">
<Circle
data-name="Ellipse 1146"
cx={1.318}
cy={1.318}
r={1.318}
fill="#bf0000"
transform="translate(8.972 7.815)"
/>
</G>
<G data-name="Group 5892">
<Circle
data-name="Ellipse 1147"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(7.585 11.944)"
/>
</G>
<G data-name="Group 5893">
<Circle
data-name="Ellipse 1148"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(6.24 17.685)"
/>
</G>
<G data-name="Group 5894">
<Circle
data-name="Ellipse 1149"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(6.618 22.868)"
/>
</G>
<G data-name="Group 5895">
<Circle
data-name="Ellipse 1150"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(10.167 26.334)"
/>
</G>
<G data-name="Group 5896">
<Circle
data-name="Ellipse 1151"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(25.497 21.725)"
/>
</G>
<G data-name="Group 5897">
<Circle
data-name="Ellipse 1152"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(26.403 16.749)"
/>
</G>
<G data-name="Group 5898">
<Circle
data-name="Ellipse 1153"
cx={0.729}
cy={0.729}
r={0.729}
fill="#bf0000"
transform="translate(24.594 13.337)"
/>
</G>
<G data-name="Group 5899">
<Circle
data-name="Ellipse 1154"
cx={0.729}
cy={0.729}
r={0.729}
fill="#bf0000"
transform="translate(14.072 26.982)"
/>
</G>
<G data-name="Group 5900">
<Circle
data-name="Ellipse 1155"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(15.65 7.021)"
/>
</G>
</G>
</G>
<G data-name="Group 5906">
<G data-name="Group 5903">
<Circle
data-name="Ellipse 1156"
cx={0.947}
cy={0.947}
r={0.947}
fill="#fff"
transform="translate(19.708 20.338)"
/>
</G>
<G data-name="Group 5904">
<Circle
data-name="Ellipse 1157"
cx={1.162}
cy={1.162}
r={1.162}
fill="#fff"
transform="translate(15.002 13.261)"
/>
</G>
<G data-name="Group 5905">
<Circle
data-name="Ellipse 1158"
cx={0.802}
cy={0.802}
r={0.802}
fill="#fff"
transform="translate(11.629 18.382)"
/>
</G>
</G>
</G>
<Path
data-name="Rectangle 1793"
fill="#fff"
d="M4.614 30.662l26.25-26.25 1.819 1.817L6.432 32.48z"
/>
</G>
</G>
</Svg>
)
}
Example #7
| Source File: IconBluezone.js From bluezone-app with GNU General Public License v3.0 | 4 votes |
|
function SvgComponent(props) {
return (
<Svg width={164} height={164} viewBox="0 0 164 164" {...props}>
<Defs>
<LinearGradient
id="prefix__b"
x1={0.5}
x2={0.5}
y2={0.986}
gradientUnits="objectBoundingBox">
<Stop offset={0} stopColor="#459fe5" />
<Stop offset={1} stopColor="#1c74c4" />
</LinearGradient>
<ClipPath id="prefix__a">
<Path
d="M-861.42 175.542l-.005 42.156c-.162 3.194.04 12.662 2.885 18 5.937 11.63 28.067 24.978 38.1 30.229 6.744-3.572 31.552-17.359 38.1-30.172 2.869-5.4 3.072-14.871 2.909-18.068v-42.143c-5.978-2.615-23.511-9.617-40.991-10.189-17.525.573-35.029 7.571-40.998 10.187z"
transform="translate(861.466 -165.355)"
fill="none"
/>
</ClipPath>
</Defs>
<Circle cx={82} cy={82} r={82} fill="#015cd0" opacity={0.08} />
<G transform="translate(40.644 31.652)" clipPath="url(#prefix__a)">
<Path
d="M-827.2 111.815a33.011 33.011 0 00-18.331-19.19c-4.373-1.933-9.982-2.578-15.071-2.578h-72.683c-5.089 0-10.7.644-15.071 2.578a33.01 33.01 0 00-18.331 19.19c-1.426 3.839-2 9.3-2 13.639v72.684c0 4.335.579 9.8 2 13.639a33.012 33.012 0 0018.331 19.19c4.373 1.933 9.982 2.578 15.071 2.578h72.683c5.089 0 10.7-.645 15.071-2.578a33.012 33.012 0 0018.331-19.19c1.426-3.839 2-9.3 2-13.639v-72.684c0-4.335-.578-9.8-2-13.639z"
transform="translate(937.983 -111.617)"
fill="url(#prefix__b)"
/>
</G>
<G transform="translate(51.361 44.911)" opacity={0.8}>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
transform="rotate(-62.45 41.12 24.758)"
/>
<Path d="M63.34 29.344a2.708 2.708 0 00-3.769-.677 2.69 2.69 0 00-.9 1.075l-7.589.236a20.207 20.207 0 00-2.458-6.423l4.972-1.882a2.111 2.111 0 002.9.472 2.112 2.112 0 00.528-2.94 2.112 2.112 0 00-2.94-.528 2.107 2.107 0 00-.9 1.664l-5.176 2.23c-.059-.088-.114-.178-.174-.265a20.285 20.285 0 00-4.92-4.973l3.688-8.753a3.832 3.832 0 001.845-.672 3.859 3.859 0 00.966-5.371 3.859 3.859 0 00-5.371-.966 3.859 3.859 0 00-.966 5.371 3.867 3.867 0 00.435.516l-3.461 8.186a20.471 20.471 0 00-9.3-2.063l.354-8.419a2.733 2.733 0 00.406-.23 2.708 2.708 0 00.678-3.769 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.677 3.769 2.7 2.7 0 001.018.879l-.308 8.621a20.284 20.284 0 00-7.489 2.532l-5.918-8.28a3.814 3.814 0 00-.18-4.067 3.818 3.818 0 00-5.315-.955A3.818 3.818 0 008.595 8.3a3.815 3.815 0 003.755 1.584l5.9 8.262a20.355 20.355 0 00-3.306 3.374l-5.732-3.847a2.7 2.7 0 00-.391-2.247 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.677 3.769 2.708 2.708 0 003.769.677 2.733 2.733 0 00.359-.3l5.623 3.773a20.441 20.441 0 00-3.424 11.012l-5.329-.5a2.69 2.69 0 00-.448-1.116 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.678 3.769 2.708 2.708 0 003.769.677 2.733 2.733 0 00.422-.363l6.13.579a20.2 20.2 0 002.03 7.008l-6.927 3.66.883 1.656 6.958-3.676q.282.454.59.9a20.262 20.262 0 005.481 5.353l-4.851 5.161a2.7 2.7 0 00-2.433.332 2.708 2.708 0 00-.677 3.769 2.708 2.708 0 003.769.677 2.707 2.707 0 001.005-3.124l5.376-5.555a20.4 20.4 0 004.1 1.5l-1.239 4.128a2.1 2.1 0 00-1.272.375 2.112 2.112 0 00-.529 2.94 2.112 2.112 0 002.94.528 2.112 2.112 0 00.528-2.94 2.1 2.1 0 00-.352-.389l1.3-4.343a20.389 20.389 0 009.668-.615l4.077 9.346a4.716 4.716 0 00-.5 5.992 4.717 4.717 0 006.566 1.18 4.717 4.717 0 001.18-6.565 4.711 4.711 0 00-4.267-2l-4.007-9.185a20.6 20.6 0 002.506-1.487 20.315 20.315 0 007.1-8.708l6.01 2.962a2.7 2.7 0 00.453 1.937 2.708 2.708 0 003.769.677 2.708 2.708 0 00.677-3.769 2.708 2.708 0 00-3.769-.677 2.683 2.683 0 00-.233.182l-6.246-3.078a20.468 20.468 0 00.927-7.871l7.3-.227a2.74 2.74 0 00.2.347 2.708 2.708 0 003.769.677 2.708 2.708 0 00.681-3.783z" />
</G>
<Path
fill="#bf0000"
d="M100.245 85.978l.83-1.684 6.965 3.432-.83 1.684zM57.866 92.706l-.883-1.656 7.963-4.207.883 1.656zM99.264 68.055l-.859-.859 6.111-2.633.544 1.3zM75.876 102.385l1.574-5.247 1.351.4-1.574 5.247zM59.343 63.064l.786-1.169 6.723 4.52-.785 1.17zM90.808 60.736l3.949-9.373 3.039 1.247-3.949 9.373zM92.752 108.091l-4.993-11.444 3.013-1.307 4.993 11.444zM69.76 63.08l-6.432-9 2.7-1.875 6.432 9zM101.531 76.681l-.081-2.345 8.31-.259.081 2.345zM65.969 100.52l5.089-5.413 2.429 1.019-5.809 6zM55.617 79.786l.278-2.329 6.9.652-.278 2.329zM79.505 58.889l.34-9.531 2.343.1-.36 8.565z"
/>
<Ellipse
cx={20.391}
cy={20.357}
rx={20.391}
ry={20.357}
transform="rotate(-34.811 143.666 -49.192)"
fill="#bf0000"
/>
<Circle
cx={3.859}
cy={3.859}
r={3.859}
fill="#bf0000"
transform="translate(93.449 45.219)"
/>
<Circle
cx={4.717}
cy={4.717}
r={4.717}
fill="#bf0000"
transform="translate(90.957 105.651)"
/>
<Circle
cx={3.818}
cy={3.818}
r={3.818}
fill="#bf0000"
transform="translate(58.989 46.638)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(54.972 58.599)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(51.075 75.232)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(52.17 90.245)"
/>
<G transform="translate(62.45 100.286)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(106.861 86.935)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(109.484 72.519)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(104.245 62.636)">
<Circle cx={2.112} cy={2.112} r={2.112} fill="#bf0000" />
</G>
<G transform="translate(73.763 102.164)">
<Circle cx={2.112} cy={2.112} r={2.112} fill="#bf0000" />
</G>
<G transform="translate(78.335 44.338)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G>
<Circle
cx={2.745}
cy={2.745}
r={2.745}
fill="#fff"
transform="translate(90.093 82.913)"
/>
<Circle
cx={3.365}
cy={3.365}
r={3.365}
fill="#fff"
transform="translate(76.458 62.413)"
/>
<Circle
cx={2.323}
cy={2.323}
r={2.323}
fill="#fff"
transform="translate(66.688 77.249)"
/>
</G>
<Path
d="M130.318 83.701V36.99l-2.146-1.048c-.938-.457-23.237-11.221-46.375-11.938h-.238c-23.133.717-45.434 11.481-46.372 11.938l-2.146 1.048v46.714c-.063 1.388-.5 13.866 3.745 21.832 8.693 17.03 41.777 33.715 43.18 34.417l1.71.854 1.711-.854c1.4-.7 34.485-17.387 43.159-34.361 4.266-8.027 3.835-20.507 3.772-21.891zm-86.749 18.3c-2.845-5.343-3.046-14.811-2.885-18l.006-42.156c5.97-2.616 23.473-9.614 40.989-10.187 14.656.479 29.347 5.478 37.236 8.623l-69.461 69.46A33.145 33.145 0 0143.569 102zm76.2.057c-6.548 12.813-31.356 26.6-38.1 30.172a165.625 165.625 0 01-26.715-17.463l67.716-67.716v36.942c.167 3.193-.036 12.662-2.904 18.067z"
fill="#fff"
/>
</Svg>
);
}
Example #8
| Source File: IconBluezone.js From bluezone-app with GNU General Public License v3.0 | 4 votes |
|
function SvgComponent(props) {
return (
<Svg width={164} height={164} viewBox="0 0 164 164" {...props}>
<Defs>
<LinearGradient
id="prefix__b"
x1={0.5}
x2={0.5}
y2={0.986}
gradientUnits="objectBoundingBox">
<Stop offset={0} stopColor="#459fe5" />
<Stop offset={1} stopColor="#1c74c4" />
</LinearGradient>
<ClipPath id="prefix__a">
<Path
d="M-861.42 175.542l-.005 42.156c-.162 3.194.04 12.662 2.885 18 5.937 11.63 28.067 24.978 38.1 30.229 6.744-3.572 31.552-17.359 38.1-30.172 2.869-5.4 3.072-14.871 2.909-18.068v-42.143c-5.978-2.615-23.511-9.617-40.991-10.189-17.525.573-35.029 7.571-40.998 10.187z"
transform="translate(861.466 -165.355)"
fill="none"
/>
</ClipPath>
</Defs>
<Circle cx={82} cy={82} r={82} fill="#2b77d8" opacity={1} />
<G transform="translate(40.644 31.652)" clipPath="url(#prefix__a)">
<Path
d="M-827.2 111.815a33.011 33.011 0 00-18.331-19.19c-4.373-1.933-9.982-2.578-15.071-2.578h-72.683c-5.089 0-10.7.644-15.071 2.578a33.01 33.01 0 00-18.331 19.19c-1.426 3.839-2 9.3-2 13.639v72.684c0 4.335.579 9.8 2 13.639a33.012 33.012 0 0018.331 19.19c4.373 1.933 9.982 2.578 15.071 2.578h72.683c5.089 0 10.7-.645 15.071-2.578a33.012 33.012 0 0018.331-19.19c1.426-3.839 2-9.3 2-13.639v-72.684c0-4.335-.578-9.8-2-13.639z"
transform="translate(937.983 -111.617)"
fill="url(#prefix__b)"
/>
</G>
<G transform="translate(51.361 44.911)" opacity={0.8}>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
transform="rotate(-62.45 41.12 24.758)"
/>
<Path d="M63.34 29.344a2.708 2.708 0 00-3.769-.677 2.69 2.69 0 00-.9 1.075l-7.589.236a20.207 20.207 0 00-2.458-6.423l4.972-1.882a2.111 2.111 0 002.9.472 2.112 2.112 0 00.528-2.94 2.112 2.112 0 00-2.94-.528 2.107 2.107 0 00-.9 1.664l-5.176 2.23c-.059-.088-.114-.178-.174-.265a20.285 20.285 0 00-4.92-4.973l3.688-8.753a3.832 3.832 0 001.845-.672 3.859 3.859 0 00.966-5.371 3.859 3.859 0 00-5.371-.966 3.859 3.859 0 00-.966 5.371 3.867 3.867 0 00.435.516l-3.461 8.186a20.471 20.471 0 00-9.3-2.063l.354-8.419a2.733 2.733 0 00.406-.23 2.708 2.708 0 00.678-3.769 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.677 3.769 2.7 2.7 0 001.018.879l-.308 8.621a20.284 20.284 0 00-7.489 2.532l-5.918-8.28a3.814 3.814 0 00-.18-4.067 3.818 3.818 0 00-5.315-.955A3.818 3.818 0 008.595 8.3a3.815 3.815 0 003.755 1.584l5.9 8.262a20.355 20.355 0 00-3.306 3.374l-5.732-3.847a2.7 2.7 0 00-.391-2.247 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.677 3.769 2.708 2.708 0 003.769.677 2.733 2.733 0 00.359-.3l5.623 3.773a20.441 20.441 0 00-3.424 11.012l-5.329-.5a2.69 2.69 0 00-.448-1.116 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.678 3.769 2.708 2.708 0 003.769.677 2.733 2.733 0 00.422-.363l6.13.579a20.2 20.2 0 002.03 7.008l-6.927 3.66.883 1.656 6.958-3.676q.282.454.59.9a20.262 20.262 0 005.481 5.353l-4.851 5.161a2.7 2.7 0 00-2.433.332 2.708 2.708 0 00-.677 3.769 2.708 2.708 0 003.769.677 2.707 2.707 0 001.005-3.124l5.376-5.555a20.4 20.4 0 004.1 1.5l-1.239 4.128a2.1 2.1 0 00-1.272.375 2.112 2.112 0 00-.529 2.94 2.112 2.112 0 002.94.528 2.112 2.112 0 00.528-2.94 2.1 2.1 0 00-.352-.389l1.3-4.343a20.389 20.389 0 009.668-.615l4.077 9.346a4.716 4.716 0 00-.5 5.992 4.717 4.717 0 006.566 1.18 4.717 4.717 0 001.18-6.565 4.711 4.711 0 00-4.267-2l-4.007-9.185a20.6 20.6 0 002.506-1.487 20.315 20.315 0 007.1-8.708l6.01 2.962a2.7 2.7 0 00.453 1.937 2.708 2.708 0 003.769.677 2.708 2.708 0 00.677-3.769 2.708 2.708 0 00-3.769-.677 2.683 2.683 0 00-.233.182l-6.246-3.078a20.468 20.468 0 00.927-7.871l7.3-.227a2.74 2.74 0 00.2.347 2.708 2.708 0 003.769.677 2.708 2.708 0 00.681-3.783z" />
</G>
<Path
fill="#bf0000"
d="M100.245 85.978l.83-1.684 6.965 3.432-.83 1.684zM57.866 92.706l-.883-1.656 7.963-4.207.883 1.656zM99.264 68.055l-.859-.859 6.111-2.633.544 1.3zM75.876 102.385l1.574-5.247 1.351.4-1.574 5.247zM59.343 63.064l.786-1.169 6.723 4.52-.785 1.17zM90.808 60.736l3.949-9.373 3.039 1.247-3.949 9.373zM92.752 108.091l-4.993-11.444 3.013-1.307 4.993 11.444zM69.76 63.08l-6.432-9 2.7-1.875 6.432 9zM101.531 76.681l-.081-2.345 8.31-.259.081 2.345zM65.969 100.52l5.089-5.413 2.429 1.019-5.809 6zM55.617 79.786l.278-2.329 6.9.652-.278 2.329zM79.505 58.889l.34-9.531 2.343.1-.36 8.565z"
/>
<Ellipse
cx={20.391}
cy={20.357}
rx={20.391}
ry={20.357}
transform="rotate(-34.811 143.666 -49.192)"
fill="#bf0000"
/>
<Circle
cx={3.859}
cy={3.859}
r={3.859}
fill="#bf0000"
transform="translate(93.449 45.219)"
/>
<Circle
cx={4.717}
cy={4.717}
r={4.717}
fill="#bf0000"
transform="translate(90.957 105.651)"
/>
<Circle
cx={3.818}
cy={3.818}
r={3.818}
fill="#bf0000"
transform="translate(58.989 46.638)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(54.972 58.599)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(51.075 75.232)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(52.17 90.245)"
/>
<G transform="translate(62.45 100.286)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(106.861 86.935)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(109.484 72.519)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(104.245 62.636)">
<Circle cx={2.112} cy={2.112} r={2.112} fill="#bf0000" />
</G>
<G transform="translate(73.763 102.164)">
<Circle cx={2.112} cy={2.112} r={2.112} fill="#bf0000" />
</G>
<G transform="translate(78.335 44.338)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G>
<Circle
cx={2.745}
cy={2.745}
r={2.745}
fill="#fff"
transform="translate(90.093 82.913)"
/>
<Circle
cx={3.365}
cy={3.365}
r={3.365}
fill="#fff"
transform="translate(76.458 62.413)"
/>
<Circle
cx={2.323}
cy={2.323}
r={2.323}
fill="#fff"
transform="translate(66.688 77.249)"
/>
</G>
<Path
d="M130.318 83.701V36.99l-2.146-1.048c-.938-.457-23.237-11.221-46.375-11.938h-.238c-23.133.717-45.434 11.481-46.372 11.938l-2.146 1.048v46.714c-.063 1.388-.5 13.866 3.745 21.832 8.693 17.03 41.777 33.715 43.18 34.417l1.71.854 1.711-.854c1.4-.7 34.485-17.387 43.159-34.361 4.266-8.027 3.835-20.507 3.772-21.891zm-86.749 18.3c-2.845-5.343-3.046-14.811-2.885-18l.006-42.156c5.97-2.616 23.473-9.614 40.989-10.187 14.656.479 29.347 5.478 37.236 8.623l-69.461 69.46A33.145 33.145 0 0143.569 102zm76.2.057c-6.548 12.813-31.356 26.6-38.1 30.172a165.625 165.625 0 01-26.715-17.463l67.716-67.716v36.942c.167 3.193-.036 12.662-2.904 18.067z"
fill="#fff"
/>
</Svg>
);
}
Example #9
| Source File: Shadow.js From react-native-neu-element with MIT License | 4 votes |
|
Shadow = props => {
const {
width = 0,
height = 0,
color = '#000',
offsetX = 0,
offsetY = 0,
blur = 3,
spread = 0,
borderRadius: _borderRadius = 0,
opacity = '1',
style = {},
children,
} = props.setting;
const borderRadius =
_borderRadius > Math.min(width, height) / 2
? Math.min(width, height) / 2
: _borderRadius;
const rectInnerWidth = width + spread * 2 - blur;
const rectInnerHeight = height + spread * 2 - blur;
const rectOuterWidth = width + spread * 2 + blur;
const rectOuterHeight = height + spread * 2 + blur;
const innerRadius =
borderRadius > 0 ? Math.max(0, borderRadius + spread - blur / 2) : 0;
const outerRadius =
borderRadius > 0 ? Math.max(0, borderRadius + spread + blur / 2) : blur;
const borderWidth = (rectOuterWidth - rectInnerWidth) / 2;
const rgb = hexToRgb(color);
const linear = key => {
return [
<Stop
offset="0"
stopColor={color}
stopOpacity={opacity}
key={key + 'Linear0'}
/>,
<Stop
offset="1"
stopColor={color}
stopOpacity="0"
key={key + 'Linear1'}
/>,
];
};
const radial = key => {
return [
<Stop
offset="0"
stopColor={color}
stopOpacity={opacity}
key={key + 'Radial0'}
/>,
<Stop
offset={Math.max(0, innerRadius / outerRadius).toString()}
stopColor={color}
stopOpacity={opacity}
key={key + 'Radial1'}
/>,
<Stop
offset="1"
stopColor={color}
stopOpacity="0"
key={key + 'Radial2'}
/>,
];
};
const styles = StyleSheet.create({
viewContainer: {
width: rectOuterWidth,
height: rectOuterHeight,
position: 'absolute',
left: -blur / 2 - spread + offsetX,
top: -blur / 2 - spread + offsetY,
...style,
},
});
return (
<View style={styles.viewContainer}>
<Svg width={rectOuterWidth} height={rectOuterHeight}>
<Defs>
<LinearGradient id="top" x1="0%" x2="0%" y1="100%" y2="0%">
{linear('BoxTop')}
</LinearGradient>
<LinearGradient id="bottom" x1="0%" x2="0%" y1="0%" y2="100%">
{linear('BoxBottom')}
</LinearGradient>
<LinearGradient id="left" x1="100%" x2="0%" y1="0%" y2="0%">
{linear('BoxLeft')}
</LinearGradient>
<LinearGradient id="right" x1="0%" x2="100%" y1="0%" y2="0%">
{linear('BoxRight')}
</LinearGradient>
<RadialGradient
id="border-left-top"
rx="100%"
ry="100%"
cx="100%"
cy="100%"
fx="100%"
fy="100%">
{radial('BoxLeftTop')}
</RadialGradient>
<RadialGradient
id="border-left-bottom"
rx="100%"
ry="100%"
cx="100%"
cy="0%"
fx="100%"
fy="0%">
{radial('BoxLeftBottom')}
</RadialGradient>
<RadialGradient
id="border-right-top"
rx="100%"
ry="100%"
cx="0%"
cy="100%"
fx="0%"
fy="100%">
{radial('BoxRightTop')}
</RadialGradient>
<RadialGradient
id="border-right-bottom"
rx="100%"
ry="100%"
cx="0%"
cy="0%"
fx="0%"
fy="0%">
{radial('BoxRightBottom')}
</RadialGradient>
</Defs>
<Path
d={`
M 0 ${outerRadius},
a ${outerRadius} ${outerRadius} 0 0 1 ${outerRadius} ${-outerRadius}
v ${blur}
a ${innerRadius} ${innerRadius} 0 0 0 ${-innerRadius} ${innerRadius}
z
`}
fill="url(#border-left-top)"
/>
<Path
d={`
M ${rectOuterWidth - outerRadius} 0,
a ${outerRadius} ${outerRadius} 0 0 1 ${outerRadius} ${outerRadius}
h ${-blur}
a ${innerRadius} ${innerRadius} 0 0 0 ${-innerRadius} ${-innerRadius}
z
`}
fill="url(#border-right-top)"
/>
<Path
d={`
M ${rectOuterWidth} ${rectOuterHeight - outerRadius},
a ${outerRadius} ${outerRadius} 0 0 1 ${-outerRadius} ${outerRadius}
v ${-blur}
a ${innerRadius} ${innerRadius} 0 0 0 ${innerRadius} ${-innerRadius}
z
`}
fill="url(#border-right-bottom)"
/>
<Path
d={`
M ${outerRadius} ${rectOuterHeight},
a ${outerRadius} ${outerRadius} 0 0 1 ${-outerRadius} ${-outerRadius}
h ${blur}
a ${innerRadius} ${innerRadius} 0 0 0 ${innerRadius} ${innerRadius}
z
`}
fill="url(#border-left-bottom)"
/>
<Rect
x={outerRadius}
y={0}
width={rectInnerWidth - innerRadius * 2}
height={blur}
fill="url(#top)"
/>
<Rect
x={rectOuterWidth - blur}
y={outerRadius}
width={blur}
height={rectInnerHeight - innerRadius * 2}
fill="url(#right)"
/>
<Rect
x={outerRadius}
y={rectOuterHeight - blur}
width={rectInnerWidth - innerRadius * 2}
height={blur}
fill="url(#bottom)"
/>
<Rect
x={0}
y={outerRadius}
width={blur}
height={rectInnerHeight - innerRadius * 2}
fill="url(#left)"
/>
<Path
d={`
M ${borderWidth} ${borderWidth + innerRadius},
a ${innerRadius} ${innerRadius} 0 0 1 ${innerRadius} ${-innerRadius}
h ${rectInnerWidth - innerRadius * 2}
a ${innerRadius} ${innerRadius} 0 0 1 ${innerRadius} ${innerRadius}
v ${rectInnerHeight - innerRadius * 2}
a ${innerRadius} ${innerRadius} 0 0 1 ${-innerRadius} ${innerRadius}
h ${-rectInnerWidth + innerRadius * 2}
a ${innerRadius} ${innerRadius} 0 0 1 ${-innerRadius} ${-innerRadius}
z
`}
fill={`rgba(${rgb.r},${rgb.g},${rgb.b},${opacity || 1})`}
/>
{children}
</Svg>
</View>
);
}
Example #10
| Source File: Icons.js From rakning-c19-app with MIT License | 4 votes |
|
OnboardingPhoneIcon = props => (
<Svg width="375px" height="100%" viewBox="0 0 375 335" {...props}>
<Defs>
<LinearGradient
x1="50%"
y1="3.864%"
x2="34.509%"
y2="93.153%"
id="prefix__c"
>
<Stop stopOpacity={0} offset="0%" />
<Stop stopOpacity={0.433} offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="1.699%" x2="50%" y2="98.563%" id="prefix__g">
<Stop stopColor="#252525" offset="0%" />
<Stop stopColor="#5E5E5E" offset="5.164%" />
<Stop stopColor="#666" offset="92.073%" />
<Stop stopColor="#1E1E1E" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="1.699%" x2="50%" y2="98.563%" id="prefix__l">
<Stop stopColor="#252525" offset="0%" />
<Stop stopColor="#5E5E5E" offset="5.164%" />
<Stop stopColor="#666" offset="92.073%" />
<Stop stopColor="#1E1E1E" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="1.699%" x2="50%" y2="98.563%" id="prefix__q">
<Stop stopColor="#252525" offset="0%" />
<Stop stopColor="#5E5E5E" offset="5.164%" />
<Stop stopColor="#666" offset="92.073%" />
<Stop stopColor="#1E1E1E" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="8.515%" x2="50%" y2="91.923%" id="prefix__s">
<Stop stopColor="#111" offset="0%" />
<Stop stopColor="#FEFEFE" offset="15.353%" />
<Stop stopColor="#FEFEFE" offset="83.104%" />
<Stop stopColor="#1D1D1D" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="1.699%" x2="50%" y2="98.563%" id="prefix__w">
<Stop stopColor="#252525" offset="0%" />
<Stop stopColor="#5E5E5E" offset="5.164%" />
<Stop stopColor="#666" offset="92.073%" />
<Stop stopColor="#1E1E1E" offset="100%" />
</LinearGradient>
<LinearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="prefix__C">
<Stop stopColor="#363636" offset="0%" />
<Stop stopColor="#2B2B2B" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="prefix__J">
<Stop stopColor="#FFF" stopOpacity={0.2} offset="0%" />
<Stop stopOpacity={0.3} offset="100%" />
</LinearGradient>
<LinearGradient
x1="29.845%"
y1="100%"
x2="66.008%"
y2="11.545%"
id="prefix__K"
>
<Stop stopColor="#686868" offset="0%" />
<Stop stopColor="#191919" offset="100%" />
</LinearGradient>
<LinearGradient
x1="-24.631%"
y1="74.934%"
x2="90.63%"
y2="36.282%"
id="prefix__N"
>
<Stop stopColor="#484848" offset="0%" />
<Stop stopColor="#383838" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__W">
<Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
<Stop stopColor="#FEEFE8" offset="100%" />
</LinearGradient>
<Path id="prefix__a" d="M0 0h375v308H0z" />
<Path
d="M1.62 3.02c-.032-1.352 0-2.31-.394-2.836C.846.237.436.319 0 .43v27.897c.189.12.598.288 1.226.5.24-.362.313-.415.394-2.412 0-1.85.033-22.042 0-23.395z"
id="prefix__e"
/>
<Path
d="M1.62 3.02C1.588 1.669 1.467.307 1.24.127A8.985 8.985 0 000 .431v27.897c.062.188.456.348 1.181.48.256-.301.44-.719.44-2.392 0-1.85.032-22.042 0-23.395z"
id="prefix__j"
/>
<Path
d="M1.852 1.85c0-1.105-.28-1.85-.28-1.85H.432L0 .431v14.024l.462.503 1.11.003s.28-1.178.28-2.475V1.85z"
id="prefix__o"
/>
<Path
d="M.231 3.02C.264 1.669.478.643.613.247c1.08.263 1.239.185 1.239.185v45.006s-.337.509-1.239.63c-.122-.145-.3-.544-.382-2.541 0-1.85-.032-39.152 0-40.505z"
id="prefix__u"
/>
<Path
d="M164.336.925c22.649 0 34.738 12.066 34.738 34.685v65.781c-.223.236-.393.801-.446 1.5h-.017v43.236l.117 1.387c.083.37.204.656.346.807v216.994c0 22.614-12.088 34.685-34.738 34.685h-52.239c-.484-.257-1.359-.436-2.375-.46l-18.518-.002h-.232c-1.113 0-2.086.185-2.606.462h-52.24C13.478 400 1.39 387.931 1.39 365.318V158.085c.27-.163.463-.645.463-1.544v-26.613h-.017c-.053-.694-.224-.992-.446-1.096v-9.128c.27-.164.463-.645.463-1.545V91.546h-.017c-.053-.693-.224-.991-.446-1.096V76.09c.316-.673.324-2.826.463-4.414v-6.374c-.005-.705-.05-4.042-.464-4.955V35.61C1.389 12.99 13.479.925 36.128.925h128.21z"
id="prefix__z"
/>
<Path
d="M162.072 4.162c22.938 0 33.761 9.443 33.761 32.37v328.786c0 22.922-10.822 31.907-33.761 31.907H38.392c-22.94 0-34.225-8.985-34.225-31.907V36.532c0-22.927 11.286-32.37 34.224-32.37h123.68z"
id="prefix__D"
/>
<Path
d="M162.26 5.55c22.94 0 31.721 9.242 31.721 32.193v325.901c0 22.946-8.78 31.732-32.647 31.732H38.204c-22.48 0-32.185-8.786-32.185-31.27V37.744c0-22.95 9.244-32.194 32.184-32.194H162.26z"
id="prefix__F"
/>
<Path
d="M0 1.618c0 .894.725 1.619 1.618 1.619h20.838a1.618 1.618 0 000-3.237H1.618C.725 0 0 .725 0 1.618z"
id="prefix__H"
/>
<Path
d="M36.111 0a2.313 2.313 0 012.315 2.312V3.7c0 5.619 4.56 10.174 10.185 10.174H125c5.625 0 10.185-4.555 10.185-10.174V2.312A2.313 2.313 0 01137.5 0h18.056c9.971 0 18.055 8.074 18.055 18.035v339.422c0 9.96-8.084 18.034-18.055 18.034h-137.5C8.084 375.491 0 367.417 0 357.457V18.035C0 8.075 8.084 0 18.056 0H36.11z"
id="prefix__Q"
/>
<Path id="prefix__S" d="M.611 0h193v417h-193z" />
<Ellipse id="prefix__L" cx={3.704} cy={3.468} rx={2.775} ry={2.778} />
<Ellipse id="prefix__O" cx={3.704} cy={3.468} rx={1.85} ry={1.852} />
<Rect id="prefix__U" x={0} y={0} width={60} height={60} rx={14.609} />
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__b" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<G mask="url(#prefix__b)">
<Path
d="M30.092 146.817c-7.568-13.084-3.369-30.286 9.374-38.419l143.124-91.34 38.712 85.027c6.265 13.76.936 31.377-11.912 39.356L98.443 210.347c-12.843 7.976-29.394 3.826-36.957-9.25l-31.394-54.28z"
fill="url(#prefix__c)"
filter="url(#prefix__d)"
transform="scale(-1 1) rotate(-10 1520.311 2042.638)"
/>
<G transform="translate(88 94)">
<G transform="translate(.463 129.017)">
<Mask id="prefix__i" fill="#fff">
<Use xlinkHref="#prefix__e" />
</Mask>
<Use fill="#000" filter="url(#prefix__f)" xlinkHref="#prefix__e" />
<Use fill="url(#prefix__g)" xlinkHref="#prefix__e" />
<Use fill="#000" filter="url(#prefix__h)" xlinkHref="#prefix__e" />
<Path
d="M-.821-.462S.319-.61.463 2.775v22.119c0 3.822-1.11 4.026-1.284 4.239l-.105-.669c.642-.954.747-2.117.747-3.932V4.607C-.18 2.443-.643.343-.821.352v-.814z"
fill="#464646"
mask="url(#prefix__i)"
/>
</G>
<G transform="translate(.463 90.636)">
<Mask id="prefix__n" fill="#fff">
<Use xlinkHref="#prefix__j" />
</Mask>
<Use fill="#000" filter="url(#prefix__k)" xlinkHref="#prefix__j" />
<Use fill="url(#prefix__l)" xlinkHref="#prefix__j" />
<Use fill="#000" filter="url(#prefix__m)" xlinkHref="#prefix__j" />
<Path
d="M-.821-.462S.319-.61.463 2.775v22.119c0 3.822-1.11 4.026-1.284 4.239l-.105-.669c.642-.954.747-2.117.747-3.932V4.607C-.18 2.443-.643.343-.821.352v-.814z"
fill="#464646"
mask="url(#prefix__n)"
/>
</G>
<G transform="translate(0 60.578)">
<Mask id="prefix__t" fill="#fff">
<Use xlinkHref="#prefix__o" />
</Mask>
<Use fill="#000" filter="url(#prefix__p)" xlinkHref="#prefix__o" />
<Use fill="url(#prefix__q)" xlinkHref="#prefix__o" />
<Use fill="#000" filter="url(#prefix__r)" xlinkHref="#prefix__o" />
<Path
d="M0-.925c-.076 0 .694.835.694 2.909v10.264c0 3.272-.725 3.15-.85 3.365l-.075-.677c.462-.965.462-2.001.462-2.913V2.775c0-1.313-.259-2.885-.387-2.876L0-.925z"
fillOpacity={0.2}
fill="url(#prefix__s)"
mask="url(#prefix__t)"
/>
</G>
<G transform="translate(198.148 101.734)">
<Mask id="prefix__y" fill="#fff">
<Use xlinkHref="#prefix__u" />
</Mask>
<Use fill="#000" filter="url(#prefix__v)" xlinkHref="#prefix__u" />
<Use fill="url(#prefix__w)" xlinkHref="#prefix__u" />
<Use fill="#000" filter="url(#prefix__x)" xlinkHref="#prefix__u" />
<Path
d="M2.673-.462S1.533-.61 1.389 2.775v39.229c0 3.822 1.11 4.026 1.284 4.239l.105-.669c-.642-.954-.747-2.118-.747-3.933V4.607c0-2.164.464-4.264.642-4.255v-.814z"
fill="#464646"
mask="url(#prefix__y)"
/>
</G>
<Use fill="#3A3A3A" xlinkHref="#prefix__z" />
<Use fill="#000" filter="url(#prefix__A)" xlinkHref="#prefix__z" />
<Ellipse
fillOpacity={0.15}
fill="#4A4A4A"
style={{
mixBlendMode: 'multiply',
}}
filter="url(#prefix__B)"
cx={15.741}
cy={11.561}
rx={11.574}
ry={11.561}
/>
<Use fill="url(#prefix__C)" xlinkHref="#prefix__D" />
<Use fill="#000" filter="url(#prefix__E)" xlinkHref="#prefix__D" />
<Use fill="#2D2D2D" xlinkHref="#prefix__F" />
<Use fill="#000" filter="url(#prefix__G)" xlinkHref="#prefix__F" />
<G transform="translate(87.963 15.26)">
<Use fill="#343434" xlinkHref="#prefix__H" />
<Use fill="#000" filter="url(#prefix__I)" xlinkHref="#prefix__H" />
<Path
stroke="url(#prefix__J)"
strokeWidth={0.5}
d="M1.618.25A1.364 1.364 0 00.25 1.618a1.364 1.364 0 001.368 1.368l20.838.001a1.364 1.364 0 001.368-1.368A1.364 1.364 0 0022.456.25L1.618.249z"
strokeLinejoin="square"
/>
</G>
<G transform="rotate(-74 71.398 -67.852)">
<Use fill="url(#prefix__K)" xlinkHref="#prefix__L" />
<Use fill="#000" filter="url(#prefix__M)" xlinkHref="#prefix__L" />
</G>
<G transform="rotate(-74 71.398 -67.852)">
<Use fill="url(#prefix__N)" xlinkHref="#prefix__O" />
<Use fill="#000" filter="url(#prefix__P)" xlinkHref="#prefix__O" />
</G>
</G>
<G transform="translate(101.426 106.948)">
<Mask id="prefix__R" fill="#fff">
<Use xlinkHref="#prefix__Q" />
</Mask>
<G mask="url(#prefix__R)">
<G transform="translate(-9.426 -18.948)">
<Mask id="prefix__T" fill="#fff">
<Use xlinkHref="#prefix__S" />
</Mask>
<Use fill="#FEF2ED" xlinkHref="#prefix__S" />
<G opacity={0.152} mask="url(#prefix__T)">
<G transform="rotate(-15 -138.766 94.787)">
<Circle fill="#006DC2" cx={104.354} cy={103.612} r={29} />
<Circle fill="#D8C3B9" cx={104.636} cy={29.148} r={29} />
<Circle fill="#D8C3B9" cx={104.33} cy={177.111} r={29} />
<Circle
fill="#D8C3B9"
transform="rotate(-90 29.89 103.33)"
cx={29.889}
cy={103.33}
r={29}
/>
<Circle
fill="#D8C3B9"
transform="rotate(-90 177.852 103.636)"
cx={177.852}
cy={103.636}
r={29}
/>
</G>
</G>
</G>
</G>
<G mask="url(#prefix__R)">
<G transform="translate(57 38.052)">
<Mask id="prefix__V" fill="#fff">
<Use xlinkHref="#prefix__U" />
</Mask>
<Use fill="#D8D8D8" xlinkHref="#prefix__U" />
<Image
mask="url(#prefix__V)"
width={60}
height={60}
xlinkHref="data:image/png;base64,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"
/>
</G>
</G>
</G>
</G>
<Path
fill="url(#prefix__W)"
mask="url(#prefix__b)"
d="M0 225h375v84H0z"
/>
<G mask="url(#prefix__b)">
<G transform="translate(111 230)">
<Rect
fill="#D1B4A8"
opacity={0.284}
width={154}
height={42}
rx={4.702}
/>
<Path
d="M121.059 12.446c0-.534.746-.868 1.343-.6l3.758 1.68c.277.123.448.352.448.6V28.15c0 .248-.17.477-.448.6l-3.758 1.68c-.597.267-1.343-.066-1.343-.6zm6.728 3.007c0-.534.746-.867 1.343-.6l2.163.967c.277.123.448.352.448.6v9.436c0 .247-.17.476-.448.6l-2.163.967c-.597.267-1.343-.067-1.343-.6zm5.133 2.294c0-.533.746-.867 1.343-.6l2.163.967c.277.124.448.353.448.6v4.847c0 .248-.17.477-.448.6l-2.163.968c-.597.266-1.343-.067-1.343-.6zm5.133 2.295c0-.534.746-.867 1.343-.6l2.452 1.096c.597.266.597.933 0 1.2l-2.452 1.096c-.597.267-1.343-.066-1.343-.6z"
fill="#FEF5F1"
opacity={0.3}
/>
<Rect
fill="#FEF5F1"
opacity={0.267}
x={15}
y={17}
width={88}
height={8}
rx={4}
/>
</G>
</G>
</G>
</Svg>
)
Example #11
| Source File: index.js From react-native-circular-picker with MIT License | 4 votes |
|
CircularPicker = ({
size,
strokeWidth,
defaultPos,
steps,
gradients,
backgroundColor,
stepColor,
borderColor,
children,
onChange,
}) => {
const [pos, setPos] = useState(percentToPos(defaultPos));
const circle = useRef(null);
const padding = 8;
const radius = (size - strokeWidth) / 2 - padding;
const center = (radius + strokeWidth / 2);
const gradient = selectGradient(gradients, pos);
useEffect(()=>{
setPos(percentToPos(defaultPos));
}, [defaultPos]);
if (steps) {
steps = steps.map((p) => {
const pos = percentToPos(p);
const { x2, y2 } = calculateAngle(pos, radius);
const { endX: x, endY: y } = calculateRealPos(x2, y2, radius, strokeWidth);
return { x, y, p };
});
}
const { x1, y1, x2, y2 } = calculateAngle(pos, radius);
const { endX, endY } = calculateRealPos(x2, y2, radius, strokeWidth);
const goToPercent = (p) => {
const newPos = percentToPos(p);
setPos(newPos);
onChange(posToPercent(newPos));
}
const pan = PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: (_, { moveX, moveY }) => {
circle.current.measure((x, y, width, height, px, py) => {
const newPos = calculateMovement(moveX - px, moveY - py, radius, strokeWidth);
/**
* @TODO
*/
if ((newPos < -0.3 && pos > 1.3)
|| (newPos > 1.3 && pos < -0.3)) {
return;
}
setPos(newPos);
onChange(posToPercent(newPos));
});
}
});
const d = `
M ${x2.toFixed(3)} ${y2.toFixed(3)}
A ${radius} ${radius}
${(pos < 0.5) ? '1' : '0'} ${(pos > 0.5) ? '1' : '0'} 0
${x1.toFixed(3)} ${y1.toFixed(3)}
`;
return (
<Svg height={size} width={size} ref={circle}>
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
<Stop offset="0" stopColor={gradient[0]} />
<Stop offset="1" stopColor={gradient[1]} />
</LinearGradient>
</Defs>
<G transform={{ translate: `${strokeWidth / 2 + radius + padding}, ${strokeWidth / 2 + radius + padding}` }}>
<Circle
r={radius}
strokeWidth={strokeWidth}
fill="transparent"
stroke={backgroundColor}
/>
<Path
d={d}
strokeWidth={strokeWidth}
stroke={`url(#grad)`}
fill="none"
/>
</G>
<G transform={{ translate: `${center + padding}, ${strokeWidth / 2 + padding}` }}>
<Circle r={(strokeWidth) / 2} fill={backgroundColor} />
</G>
{steps && steps.map((step, index) => (
<G transform={{ translate: `${step.x + padding}, ${step.y + padding}` }} key={index}>
<Circle
r={strokeWidth}
fill="transparent"
strokeWidth="12"
onPress={() => goToPercent(step.p)}
/>
<Circle
r={(strokeWidth / 2.5) / 2}
fill={stepColor}
strokeWidth="12"
onPress={() => goToPercent(step.p)}
/>
</G>
))}
<G transform={{ translate: `${endX + padding}, ${endY + padding}` }} {...pan.panHandlers}>
<Circle
r={(strokeWidth) / 2 + (padding / 2)}
fill={gradient[1]}
stroke={borderColor}
strokeWidth={padding / 1.5}
/>
</G>
{children && (
<View style={{ height: size, alignItems: 'center', justifyContent: 'center' }}>
<View>{children}</View>
</View>
)}
</Svg>
);
}
