react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
383 lines (378 loc) • 12.4 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawCloudSync = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="4eea1ae6-5e32-40ef-85be-39d849886f06"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 873.79 740.57"
>
<defs>
<linearGradient
id="28f33bb1-3e6d-484b-8ded-bad4b26ea843"
x1={690.86}
y1={478.35}
x2={690.86}
y2={70}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="gray" stopOpacity={0.25} />
<stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
<stop offset={1} stopColor="gray" stopOpacity={0.1} />
</linearGradient>
<linearGradient
id="bbcc52f0-cf83-4fe3-8c9e-c71348f6c3ef"
x1={817.66}
y1={176.95}
x2={817.66}
y2={105.63}
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="a4718631-6639-4577-8a3c-c71be39eb5f6"
x1={817.66}
y1={309.58}
x2={817.66}
y2={238.27}
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="e7e3e382-488e-4923-ae42-61d63b76ac5f"
x1={817.66}
y1={441.33}
x2={817.66}
y2={370.02}
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="3b855c7b-c326-4e86-8f18-01df42ba4311"
x1={396.11}
y1={788.96}
x2={396.11}
y2={547.06}
gradientTransform="translate(0.01 -0.01)"
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="48ac54b8-ff6b-484d-9b70-d49eb1fb0324"
x1={246.98}
y1={374.4}
x2={246.98}
y2={249.5}
gradientTransform="translate(0.01 -0.01)"
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="de8733bd-ea48-4a82-8468-795d85a03869"
x1={359.21}
y1={674.95}
x2={359.21}
y2={188.22}
gradientTransform="translate(-163.09 -79.23)"
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="b6f39420-ab5d-4158-b296-45c146931e01"
x1={510.05}
y1={629.56}
x2={510.05}
y2={397.67}
gradientTransform="translate(0.01 -0.01)"
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="e0dd915e-f30f-4d18-88c2-53d223394458"
x1={436.5}
y1={819.79}
x2={436.5}
y2={762.08}
gradientTransform="translate(-163.09 -79.23)"
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="d1399af4-57ef-4ae9-86c3-f598ea04d411"
x1={226.52}
y1={546.99}
x2={226.52}
y2={443.79}
gradientTransform="translate(0.01 -0.01)"
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="4a4958f4-37fa-4130-9aba-cf91683c116e"
x1={222.5}
y1={632.54}
x2={222.5}
y2={540.94}
gradientTransform="translate(0.01 -0.01)"
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="89ac17f5-770b-461c-9865-cca003b4417d"
x1={196.1}
y1={427.59}
x2={196.1}
y2={277.14}
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
<linearGradient
id="aef3d74b-62ea-4515-b248-bc09651b6b12"
x1={234.19}
y1={462.07}
x2={234.19}
y2={347.46}
gradientTransform="translate(0.01 -0.01)"
xlinkHref="#28f33bb1-3e6d-484b-8ded-bad4b26ea843"
/>
</defs>
<title>cloud sync</title>
<g opacity={0.8}>
<rect
x={507.92}
y={70}
width={365.87}
height={408.35}
fill="url(#28f33bb1-3e6d-484b-8ded-bad4b26ea843)"
/>
</g>
<rect x={513.97} y={342.63} width={353.77} height={126.82} fill="#fff" />
<rect x={543.01} y={372.72} width={13.71} height={64.98} fill="#64ffda" />
<g opacity={0.7}>
<rect x={570.07} y={372.72} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.6}>
<rect x={597.13} y={372.72} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.5}>
<rect x={624.2} y={372.72} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.5}>
<rect x={651.26} y={372.72} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.4}>
<rect x={678.33} y={372.72} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.3}>
<rect x={705.39} y={372.72} width={13.71} height={64.98} fill="#64ffda" />
</g>
<circle cx={817.66} cy={404.79} r={33.08} fill={props.primaryColor} />
<rect x={513.97} y={210.88} width={353.77} height={126.82} fill="#fff" />
<rect x={543.01} y={240.96} width={13.71} height={64.98} fill="#64ffda" />
<g opacity={0.7}>
<rect x={570.07} y={240.96} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.6}>
<rect x={597.13} y={240.96} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.5}>
<rect x={624.2} y={240.96} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.5}>
<rect x={651.26} y={240.96} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.4}>
<rect x={678.33} y={240.96} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.3}>
<rect x={705.39} y={240.96} width={13.71} height={64.98} fill="#64ffda" />
</g>
<circle cx={817.66} cy={273.04} r={33.08} fill={props.primaryColor} />
<rect x={513.97} y={79.13} width={353.77} height={126.82} fill="#fff" />
<rect x={543.01} y={109.21} width={13.71} height={64.98} fill="#64ffda" />
<g opacity={0.7}>
<rect x={570.07} y={109.21} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.6}>
<rect x={597.13} y={109.21} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.5}>
<rect x={624.2} y={109.21} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.5}>
<rect x={651.26} y={109.21} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.4}>
<rect x={678.33} y={109.21} width={13.71} height={64.98} fill="#64ffda" />
</g>
<g opacity={0.3}>
<rect x={705.39} y={109.21} width={13.71} height={64.98} fill="#64ffda" />
</g>
<circle
cx={817.66}
cy={141.29}
r={35.66}
fill="url(#bbcc52f0-cf83-4fe3-8c9e-c71348f6c3ef)"
/>
<circle
cx={817.66}
cy={273.93}
r={35.66}
fill="url(#a4718631-6639-4577-8a3c-c71be39eb5f6)"
/>
<circle
cx={817.66}
cy={405.67}
r={35.66}
fill="url(#e7e3e382-488e-4923-ae42-61d63b76ac5f)"
/>
<circle cx={817.66} cy={141.29} r={33.08} fill={props.primaryColor} />
<path
d="M567.81,615a67.92,67.92,0,0,0-134.65-12.66l-208.75-5.66,2.29,35.87s-29.76,68.68,126.67,87V789H534.23V673.57A67.88,67.88,0,0,0,567.81,615Z"
transform="translate(-163.1 -79.21)"
fill="url(#3b855c7b-c326-4e86-8f18-01df42ba4311)"
/>
<path
d="M233.87,634s-28.5,65.77,121.32,83.32v66.51H528.39V607.71l-296.72-8Z"
transform="translate(-163.1 -79.21)"
fill="#fda57d"
/>
<path
d="M320.43,359.55h0a31.93,31.93,0,0,1-43.91,10l-93-61.28a31.93,31.93,0,0,1-10-43.91h0a31.93,31.93,0,0,1,43.91-10l93,61.28A31.93,31.93,0,0,1,320.43,359.55Z"
transform="translate(-163.1 -79.21)"
fill="url(#48ac54b8-ff6b-484d-9b70-d49eb1fb0324)"
/>
<path
d="M315.26,356.2h0a29.69,29.69,0,0,1-40.82,9.28l-86.45-57a29.69,29.69,0,0,1-9.28-40.82h0a29.69,29.69,0,0,1,40.82-9.28l86.45,57A29.69,29.69,0,0,1,315.26,356.2Z"
transform="translate(-163.1 -79.21)"
fill="#fda57d"
/>
<circle cx={332.4} cy={538} r={65.04} fill="#fda57d" />
<rect
x={61.27}
y={109}
width={269.65}
height={486.73}
rx={10.24}
ry={10.24}
fill="url(#de8733bd-ea48-4a82-8468-795d85a03869)"
/>
<rect
x={64.92}
y={115.58}
width={262.37}
height={473.58}
rx={13.64}
ry={13.64}
fill="#fff"
/>
<path
d="M425.12,206.67a21.27,21.27,0,0,1-21,18.09H313.54a21.27,21.27,0,0,1-21-18.09h-48a10,10,0,0,0-10,10v429.9a10,10,0,0,0,10,10H473.84a10,10,0,0,0,10-10V216.63a10,10,0,0,0-10-10Z"
transform="translate(-163.1 -79.21)"
fill={props.primaryColor}
/>
<rect
x={167.24}
y={133.12}
width={58.47}
height={3.65}
rx={1.83}
ry={1.83}
fill="#dbdbdb"
/>
<circle cx={238.13} cy={134.58} r={2.19} fill="#dbdbdb" />
<path
d="M537.55,628.68h0c-18.87,4.36-31.83-7.94-36.2-26.82L458,440.82a35.32,35.32,0,0,1,26.38-42.25h0A35.32,35.32,0,0,1,526.61,425L562,590.17C566.37,609,556.42,624.32,537.55,628.68Z"
transform="translate(-163.1 -79.21)"
fill="url(#b6f39420-ab5d-4158-b296-45c146931e01)"
/>
<rect
x={483.27}
y={403.64}
width={59.2}
height={236.37}
rx={29.6}
ry={29.6}
transform="translate(-267.45 49.69) rotate(-13.01)"
fill="#fda57d"
/>
<rect
x={149.61}
y={682.86}
width={247.56}
height={57.71}
fill="url(#e0dd915e-f30f-4d18-88c2-53d223394458)"
/>
<rect x={156.3} y={689.55} width={234.18} height={45.16} fill="#4d8af0" />
<path
d="M284.32,532.32h0a31.55,31.55,0,0,1-43.38,9.86l-62.36-40.35a31.55,31.55,0,0,1-9.86-43.38h0a31.55,31.55,0,0,1,43.38-9.86l62.36,40.35A31.55,31.55,0,0,1,284.32,532.32Z"
transform="translate(-163.1 -79.21)"
fill="url(#d1399af4-57ef-4ae9-86c3-f598ea04d411)"
/>
<path
d="M268.68,617.74h0a31.83,31.83,0,0,1-43.77,9.95l-38.63-28.18a31.83,31.83,0,0,1-9.95-43.77h0a31.83,31.83,0,0,1,43.77-9.95L258.73,574A31.83,31.83,0,0,1,268.68,617.74Z"
transform="translate(-163.1 -79.21)"
fill="url(#4a4958f4-37fa-4130-9aba-cf91683c116e)"
/>
<g opacity={0.5}>
<circle
cx={196.1}
cy={352.37}
r={75.22}
fill="url(#89ac17f5-770b-461c-9865-cca003b4417d)"
/>
</g>
<circle cx={196.1} cy={352.37} r={70.8} fill="#69f0ae" />
<polygon
points="165.37 342.93 191.92 367.26 229.53 311.95 242.81 323.01 191.92 389.39 154.31 347.35 165.37 342.93"
fill="#fff"
/>
<path
d="M265.56,615.64h0a29.69,29.69,0,0,1-40.82,9.28l-36-26.27a29.69,29.69,0,0,1-9.28-40.82h0a29.69,29.69,0,0,1,40.82-9.28l36,26.27A29.69,29.69,0,0,1,265.56,615.64Z"
transform="translate(-163.1 -79.21)"
fill="#fda57d"
/>
<path
d="M280.91,530.14h0a29.69,29.69,0,0,1-40.82,9.28l-58.68-38a29.69,29.69,0,0,1-9.28-40.82h0A29.69,29.69,0,0,1,213,451.35l58.68,38A29.69,29.69,0,0,1,280.91,530.14Z"
transform="translate(-163.1 -79.21)"
fill="#fda57d"
/>
<path
d="M300.46,447.33h0a31.69,31.69,0,0,1-43.58,9.91l-79-51.46a31.69,31.69,0,0,1-9.91-43.58h0a31.69,31.69,0,0,1,43.58-9.91l79,51.46A31.69,31.69,0,0,1,300.46,447.33Z"
transform="translate(-163.1 -79.21)"
fill="url(#aef3d74b-62ea-4515-b248-bc09651b6b12)"
/>
<path
d="M296.26,444.63h0a29.69,29.69,0,0,1-40.82,9.28l-74-48.2a29.69,29.69,0,0,1-9.28-40.82h0A29.69,29.69,0,0,1,213,355.61l74,48.2A29.69,29.69,0,0,1,296.26,444.63Z"
transform="translate(-163.1 -79.21)"
fill="#fda57d"
/>
<polyline
points="207.36 91 207.36 1 603.36 1 603.36 55"
fill="none"
stroke="#3ad29f"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
<polyline
points="441.36 586 612.36 586 612.36 496"
fill="none"
stroke="#3ad29f"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
</svg>
);
UndrawCloudSync.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawCloudSync.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawCloudSync;