react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
469 lines (459 loc) • 19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var UndrawConnected = function UndrawConnected(props) {
return _react2.default.createElement(
"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"
},
_react2.default.createElement(
"defs",
null,
_react2.default.createElement(
"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"
},
_react2.default.createElement("stop", { offset: 0, stopColor: "gray", stopOpacity: 0.25 }),
_react2.default.createElement("stop", { offset: 0.54, stopColor: "gray", stopOpacity: 0.12 }),
_react2.default.createElement("stop", { offset: 1, stopColor: "gray", stopOpacity: 0.1 })
),
_react2.default.createElement(
"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"
},
_react2.default.createElement("stop", { offset: 0, stopOpacity: 0.09 }),
_react2.default.createElement("stop", { offset: 0.55, stopOpacity: 0.07 }),
_react2.default.createElement("stop", { offset: 1, stopOpacity: 0.02 })
),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
})
),
_react2.default.createElement(
"title",
null,
"connected"
),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("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)"
})
),
_react2.default.createElement("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)"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("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)"
})
),
_react2.default.createElement("circle", { cx: 674.7, cy: 105.83, r: 102.64, fill: "#f5f5f5" }),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("circle", { cx: 675.81, cy: 71.84, r: 45.5, fill: "#333" }),
_react2.default.createElement("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
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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
}),
_react2.default.createElement("circle", { cx: 675.81, cy: 81.72, r: 45.5, fill: "#fda57d" }),
_react2.default.createElement("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"
}),
_react2.default.createElement("ellipse", { cx: 631.25, cy: 79.78, rx: 4.23, ry: 7.94, fill: "#fda57d" }),
_react2.default.createElement("ellipse", { cx: 720.14, cy: 79.78, rx: 4.23, ry: 7.94, fill: "#fda57d" }),
_react2.default.createElement("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
}),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("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)"
})
),
_react2.default.createElement("circle", { cx: 142.5, cy: 253.14, r: 102.64, fill: "#f5f5f5" }),
_react2.default.createElement("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
}),
_react2.default.createElement("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
}),
_react2.default.createElement("circle", { cx: 138.43, cy: 217.08, r: 45.5, fill: "#333" }),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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
}),
_react2.default.createElement("circle", { cx: 138.43, cy: 226.96, r: 45.5, fill: "#fdb797" }),
_react2.default.createElement("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
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("ellipse", { cx: 93.87, cy: 225.02, rx: 4.23, ry: 7.94, fill: "#fdb797" }),
_react2.default.createElement("ellipse", { cx: 182.75, cy: 225.02, rx: 4.23, ry: 7.94, fill: "#fdb797" }),
_react2.default.createElement("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"
}),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("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)"
})
),
_react2.default.createElement("circle", { cx: 422.6, cy: 570.59, r: 102.64, fill: "#f5f5f5" }),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("circle", { cx: 422.68, cy: 533.5, r: 45.5, fill: "#333" }),
_react2.default.createElement("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
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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
}),
_react2.default.createElement("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"
}),
_react2.default.createElement("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
}),
_react2.default.createElement("circle", { cx: 422.68, cy: 543.37, r: 45.5, fill: "#be7c5e" }),
_react2.default.createElement("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"
}),
_react2.default.createElement("ellipse", { cx: 378.12, cy: 541.43, rx: 4.23, ry: 7.94, fill: "#be7c5e" }),
_react2.default.createElement("ellipse", { cx: 467.01, cy: 541.43, rx: 4.23, ry: 7.94, fill: "#be7c5e" }),
_react2.default.createElement("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
}),
_react2.default.createElement("polyline", {
points: "672.1 240.44 672.1 623.25 569.4 623.25",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: 12
}),
_react2.default.createElement("polyline", {
points: "139.91 380.49 139.91 623.25 289.29 623.25",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: 12
}),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("circle", {
cx: 137.34,
cy: 379.66,
r: 36.52,
fill: "url(#014d2d59-4ea0-44d4-9011-1415ae1e0169)"
})
),
_react2.default.createElement("circle", { cx: 137.34, cy: 379.66, r: 34.37, fill: "#69f0ae" }),
_react2.default.createElement("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"
}),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("circle", {
cx: 677.83,
cy: 223.01,
r: 36.52,
fill: "url(#3edc3864-c137-45a8-b4cb-910029123495)"
})
),
_react2.default.createElement("circle", { cx: 677.83, cy: 223.01, r: 34.37, fill: "#69f0ae" }),
_react2.default.createElement("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"
}),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("circle", {
cx: 425.74,
cy: 697.11,
r: 36.52,
fill: "url(#526052fb-0a4d-4689-9c8f-871db821c2c2)"
})
),
_react2.default.createElement("circle", { cx: 425.74, cy: 697.11, r: 34.37, fill: "#69f0ae" }),
_react2.default.createElement("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"
})
);
};
UndrawConnected.propTypes = {
/**
* Hex color
*/
primaryColor: _propTypes2.default.string,
/**
* percentage
*/
height: _propTypes2.default.string,
/**
* custom class for svg
*/
class: _propTypes2.default.string
};
UndrawConnected.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
exports.default = UndrawConnected;