react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
431 lines (426 loc) • 15 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawConnected = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="390bda19-a7d2-4807-bf84-0b71cfc4032d"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 874.11 733.63"
>
<defs>
<linearGradient
id="cc82a564-ea96-4f3a-b817-d04de3d3185f"
x1={875.04}
y1={475.49}
x2={303.77}
y2={474.73}
gradientTransform="matrix(0, 1, -1.02, 0, 1081.62, -103.54)"
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="e2d916eb-0c16-4978-ba1c-6a4f2feb782d"
x1={590.41}
y1={841.63}
x2={590.41}
y2={111.52}
gradientTransform="matrix(0, 1, -1.02, 0, 1082.43, -102.87)"
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.09} />
<stop offset={0.55} stopOpacity={0.07} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="7dc82f8a-aae8-4c14-8443-a0bee5c82ac4"
x1={837.64}
y1={295.46}
x2={837.64}
y2={83.19}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#cc82a564-ea96-4f3a-b817-d04de3d3185f"
/>
<linearGradient
id="10911ca7-360a-4a17-aa6c-ba55de6df86c"
x1={305.44}
y1={442.78}
x2={305.44}
y2={230.5}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#cc82a564-ea96-4f3a-b817-d04de3d3185f"
/>
<linearGradient
id="b1d6e2ae-fbc3-4669-9109-ab786db17612"
x1={-537.55}
y1={760.23}
x2={-537.55}
y2={547.95}
gradientTransform="matrix(-1, 0, 0, 1, 48, 0)"
xlinkHref="#cc82a564-ea96-4f3a-b817-d04de3d3185f"
/>
<linearGradient
id="014d2d59-4ea0-44d4-9011-1415ae1e0169"
x1={137.34}
y1={416.18}
x2={137.34}
y2={343.15}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#cc82a564-ea96-4f3a-b817-d04de3d3185f"
/>
<linearGradient
id="3edc3864-c137-45a8-b4cb-910029123495"
x1={677.83}
y1={259.53}
x2={677.83}
y2={186.5}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#cc82a564-ea96-4f3a-b817-d04de3d3185f"
/>
<linearGradient
id="526052fb-0a4d-4689-9c8f-871db821c2c2"
x1={425.74}
y1={733.63}
x2={425.74}
y2={660.6}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#cc82a564-ea96-4f3a-b817-d04de3d3185f"
/>
</defs>
<title>connected</title>
<g opacity={0.5}>
<path
d="M163.68,752.21,162.94,222a20,20,0,0,1,20-20l833.41-1.11a20,20,0,0,1,20,20l.73,530.21a20,20,0,0,1-20,20l-833.41,1.11A20,20,0,0,1,163.68,752.21Z"
transform="translate(-162.94 -83.19)"
fill="url(#cc82a564-ea96-4f3a-b817-d04de3d3185f)"
/>
</g>
<rect
x={227.85}
y={241.33}
width={741.32}
height={492.4}
transform="translate(-163.62 -82.36) rotate(-0.08)"
fill="url(#e2d916eb-0c16-4978-ba1c-6a4f2feb782d)"
/>
<rect
x={180.15}
y={218.77}
width={843.16}
height={535.49}
rx={12.68}
ry={12.68}
transform="translate(-163.61 -82.36) rotate(-0.08)"
fill="#fff"
/>
<rect
x={374.09}
y={133.87}
width={462.44}
height={707.19}
transform="matrix(0, 1, -1, 0, 928.99, -201.71)"
fill={props.primaryColor}
opacity={0.2}
/>
<ellipse
cx={216.59}
cy={489.24}
rx={19.52}
ry={19.06}
transform="matrix(1, 0, 0, 1, -163.62, -82.89)"
fill="#dbdbdb"
/>
<ellipse
cx={989.37}
cy={406.92}
rx={6.51}
ry={6.35}
transform="matrix(1, 0, 0, 1, -163.5, -81.82)"
fill="#dbdbdb"
/>
<rect
x={948.83}
y={476.71}
width={82.58}
height={6.51}
rx={0.76}
ry={0.76}
transform="translate(1305.78 -594) rotate(89.92)"
fill="#dbdbdb"
/>
<g opacity={0.5}>
<path
d="M943.46,189A105.82,105.82,0,1,0,778.6,276.83l.07.47a36.22,36.22,0,0,0,12,7.64l.14-.47c5,4.25,25.81,11.05,49.79,11h.52c15.18,0,31.66-2.68,46.16-10.52,0,0,.13-.28.33-.8a37.7,37.7,0,0,0,10-6.83q.09-.61.17-1.2A105.7,105.7,0,0,0,943.46,189Z"
transform="translate(-162.94 -83.19)"
fill="url(#7dc82f8a-aae8-4c14-8443-a0bee5c82ac4)"
/>
</g>
<circle cx={674.7} cy={105.83} r={102.64} fill="#f5f5f5" />
<path
d="M798.43,231.22s-24.46,2-18,46.56a35.13,35.13,0,0,0,11.64,7.41l13.76-46.56Z"
transform="translate(-162.94 -83.19)"
fill="#fda57d"
/>
<path
d="M877.79,231.22s24.46,2,18,46.56a35.13,35.13,0,0,1-11.64,7.41l-13.76-46.56Z"
transform="translate(-162.94 -83.19)"
fill="#fda57d"
/>
<path
d="M799.49,158.2s-11.64,33.86-18,30.69c0,0,61.26,52.91,115.34,0,0,0-9.52-16.93-23.28-30.69Z"
transform="translate(-162.94 -83.19)"
fill="#333"
/>
<circle cx={675.81} cy={71.84} r={45.5} fill="#333" />
<path
d="M877.32,231.22H798L790.55,263s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06a41.4,41.4,0,0,0,1.06-26.45c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<path
d="M878.38,231.22H799L791.61,263s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06a41.4,41.4,0,0,0,1.06-26.45c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<path
d="M877.79,231.22H798.43L791,263s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06a41.4,41.4,0,0,0,1.06-26.45c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
fill={props.primaryColor}
/>
<path
d="M659.82,121.7h31.75a0,0,0,0,1,0,0v26a15.3,15.3,0,0,1-15.3,15.3h-1.15a15.3,15.3,0,0,1-15.3-15.3v-26A0,0,0,0,1,659.82,121.7Z"
opacity={0.1}
/>
<path
d="M659.82,120.52h31.75a0,0,0,0,1,0,0v26a15.3,15.3,0,0,1-15.3,15.3h-1.15a15.3,15.3,0,0,1-15.3-15.3v-26A0,0,0,0,1,659.82,120.52Z"
fill="#fda57d"
/>
<path
d="M822.83,208.28a45.69,45.69,0,0,0,31.75.09v-3.9H822.83Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<circle cx={675.81} cy={81.72} r={45.5} fill="#fda57d" />
<path
d="M795.25,147.62H882s-7.41-35-40.21-32.8S795.25,147.62,795.25,147.62Z"
transform="translate(-162.94 -83.19)"
fill="#333"
/>
<ellipse cx={631.25} cy={79.78} rx={4.23} ry={7.94} fill="#fda57d" />
<ellipse cx={720.14} cy={79.78} rx={4.23} ry={7.94} fill="#fda57d" />
<path
d="M795.25,148.8H882s-7.41-35-40.21-32.8S795.25,148.8,795.25,148.8Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<g opacity={0.5}>
<path
d="M411.26,336.32a105.82,105.82,0,1,0-164.85,87.83l.07.47a36.22,36.22,0,0,0,12,7.64l.14-.47c5,4.25,25.81,11.05,49.79,11h.52c15.18,0,31.66-2.68,46.16-10.52,0,0,.13-.28.33-.8a37.7,37.7,0,0,0,10-6.83q.09-.61.17-1.2A105.7,105.7,0,0,0,411.26,336.32Z"
transform="translate(-162.94 -83.19)"
fill="url(#10911ca7-360a-4a17-aa6c-ba55de6df86c)"
/>
</g>
<circle cx={142.5} cy={253.14} r={102.64} fill="#f5f5f5" />
<path
d="M261,376.46s-24.46,2-18,46.56a35.13,35.13,0,0,0,11.64,7.41l13.76-46.56Z"
transform="translate(-162.94 -83.19)"
fill={props.primaryColor}
/>
<path
d="M340.41,376.46s24.46,2,18,46.56a35.13,35.13,0,0,1-11.64,7.41L333,383.86Z"
transform="translate(-162.94 -83.19)"
fill={props.primaryColor}
/>
<circle cx={138.43} cy={217.08} r={45.5} fill="#333" />
<path
d="M339.94,376.46H260.57l-7.41,31.75s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06A41.4,41.4,0,0,0,348.4,404c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
fill="#4d8af0"
/>
<path
d="M341,376.46H261.63l-7.41,31.75s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06A41.4,41.4,0,0,0,349.46,404c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
fill="#4d8af0"
/>
<path
d="M340.41,376.46H261l-7.41,31.75s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06A41.4,41.4,0,0,0,348.87,404c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
fill={props.primaryColor}
/>
<path
d="M122.44,266.93h31.75a0,0,0,0,1,0,0v26a15.3,15.3,0,0,1-15.3,15.3h-1.15a15.3,15.3,0,0,1-15.3-15.3v-26a0,0,0,0,1,0,0Z"
opacity={0.1}
/>
<path
d="M122.44,265.76h31.75a0,0,0,0,1,0,0v26a15.3,15.3,0,0,1-15.3,15.3h-1.15a15.3,15.3,0,0,1-15.3-15.3v-26a0,0,0,0,1,0,0Z"
fill="#fdb797"
/>
<path
d="M285.44,353.52a45.69,45.69,0,0,0,31.75.09v-3.9H285.44Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<circle cx={138.43} cy={226.96} r={45.5} fill="#fdb797" />
<path
d="M257.87,294h86.77s-7.41-35-40.21-32.8S257.87,294,257.87,294Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<path
d="M257.87,292.86h86.77s-7.41-35-40.21-32.8S257.87,292.86,257.87,292.86Z"
transform="translate(-162.94 -83.19)"
fill="#333"
/>
<ellipse cx={93.87} cy={225.02} rx={4.23} ry={7.94} fill="#fdb797" />
<ellipse cx={182.75} cy={225.02} rx={4.23} ry={7.94} fill="#fdb797" />
<path
d="M264.61,269.65a16.13,16.13,0,0,1,5.85-8.67c2.22-1.54,4.87-2.28,7.41-3.18a56.65,56.65,0,0,0,10.78-5.15c3.86-2.38,7.48-5.24,11.73-6.81,7.31-2.7,15.45-1.24,23,.7a19.35,19.35,0,0,1,5.38,2,20.36,20.36,0,0,1,4.77,4.62l12,14.45a23,23,0,0,1,3,4.19,14.43,14.43,0,0,1,1.36,4.73,12.38,12.38,0,0,1-1.28,7.76c-2,3.46-6.2,5.2-10.2,5.36s-7.93-1-11.78-2.13c-12.4-3.63-25-7-37.82-8.52a106.67,106.67,0,0,0-19.24-.62c-2,.13-4.68,1.06-5.9-1C262.56,275.59,264.06,271.43,264.61,269.65Z"
transform="translate(-162.94 -83.19)"
fill="#333"
/>
<g opacity={0.5}>
<path
d="M479.73,653.77A105.82,105.82,0,1,1,644.58,741.6l-.07.47a36.22,36.22,0,0,1-12,7.64l-.14-.47c-5,4.25-25.81,11.05-49.79,11h-.52c-15.18,0-31.66-2.68-46.16-10.52,0,0-.13-.28-.33-.8a37.7,37.7,0,0,1-10-6.83q-.09-.61-.17-1.2A105.7,105.7,0,0,1,479.73,653.77Z"
transform="translate(-162.94 -83.19)"
fill="url(#b1d6e2ae-fbc3-4669-9109-ab786db17612)"
/>
</g>
<circle cx={422.6} cy={570.59} r={102.64} fill="#f5f5f5" />
<path
d="M545.3,692.87s-24.46,2-18,46.56a35.13,35.13,0,0,0,11.64,7.41l13.76-46.56Z"
transform="translate(-162.94 -83.19)"
fill="#be7c5e"
/>
<path
d="M624.66,692.87s24.46,2,18,46.56A35.13,35.13,0,0,1,631,746.84l-13.76-46.56Z"
transform="translate(-162.94 -83.19)"
fill="#be7c5e"
/>
<path
d="M546.36,619.86s-1.88,5.48-4.55,11.82c-5.82,13.87.82,67.13,14.75,72.8,15.63,6.37,36.18,10.45,57.53,2.66,18.56-6.77,24.28-67.39,11.16-82.16-1.54-1.73-3.15-3.45-4.83-5.13Z"
transform="translate(-162.94 -83.19)"
fill="#333"
/>
<circle cx={422.68} cy={533.5} r={45.5} fill="#333" />
<path
d="M624.19,692.87H544.83l-7.41,31.75s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06a41.4,41.4,0,0,0,1.06-26.45c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<path
d="M625.25,692.87H545.89l-7.41,31.75s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06a41.4,41.4,0,0,0,1.06-26.45c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<path
d="M624.66,692.87H545.3l-7.41,31.75s-4.35,14.7,1.06,21.16,56,21.16,93.12,1.06a41.4,41.4,0,0,0,1.06-26.45c-4.23-14.81-1.06-1.06-1.06-1.06Z"
transform="translate(-162.94 -83.19)"
fill={props.primaryColor}
/>
<path
d="M406.69,583.35h31.75a0,0,0,0,1,0,0v26a15.3,15.3,0,0,1-15.3,15.3H422a15.3,15.3,0,0,1-15.3-15.3v-26A0,0,0,0,1,406.69,583.35Z"
opacity={0.1}
/>
<path
d="M406.69,582.17h31.75a0,0,0,0,1,0,0v26a15.3,15.3,0,0,1-15.3,15.3H422a15.3,15.3,0,0,1-15.3-15.3v-26A0,0,0,0,1,406.69,582.17Z"
fill="#be7c5e"
/>
<path
d="M569.7,669.93a45.69,45.69,0,0,0,31.75.09v-3.9H569.7Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<circle cx={422.68} cy={543.37} r={45.5} fill="#be7c5e" />
<path
d="M542.12,609.28h86.77s-7.41-35-40.21-32.8S542.12,609.28,542.12,609.28Z"
transform="translate(-162.94 -83.19)"
fill="#333"
/>
<ellipse cx={378.12} cy={541.43} rx={4.23} ry={7.94} fill="#be7c5e" />
<ellipse cx={467.01} cy={541.43} rx={4.23} ry={7.94} fill="#be7c5e" />
<path
d="M542.12,610.45h86.77s-7.41-35-40.21-32.8S542.12,610.45,542.12,610.45Z"
transform="translate(-162.94 -83.19)"
opacity={0.1}
/>
<polyline
points="672.1 240.44 672.1 623.25 569.4 623.25"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
<polyline
points="139.91 380.49 139.91 623.25 289.29 623.25"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
<g opacity={0.5}>
<circle
cx={137.34}
cy={379.66}
r={36.52}
fill="url(#014d2d59-4ea0-44d4-9011-1415ae1e0169)"
/>
</g>
<circle cx={137.34} cy={379.66} r={34.37} fill="#69f0ae" />
<polygon
points="122.42 375.08 135.31 386.89 153.56 360.04 160.01 365.41 135.31 397.63 117.05 377.23 122.42 375.08"
fill="#fff"
/>
<g opacity={0.5}>
<circle
cx={677.83}
cy={223.01}
r={36.52}
fill="url(#3edc3864-c137-45a8-b4cb-910029123495)"
/>
</g>
<circle cx={677.83} cy={223.01} r={34.37} fill="#69f0ae" />
<polygon
points="662.91 218.43 675.8 230.24 694.06 203.39 700.5 208.76 675.8 240.98 657.54 220.57 662.91 218.43"
fill="#fff"
/>
<g opacity={0.5}>
<circle
cx={425.74}
cy={697.11}
r={36.52}
fill="url(#526052fb-0a4d-4689-9c8f-871db821c2c2)"
/>
</g>
<circle cx={425.74} cy={697.11} r={34.37} fill="#69f0ae" />
<polygon
points="410.82 692.53 423.71 704.34 441.97 677.49 448.41 682.86 423.71 715.08 405.45 694.68 410.82 692.53"
fill="#fff"
/>
</svg>
);
UndrawConnected.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawConnected.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawConnected;