react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
543 lines (533 loc) • 14.3 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 UndrawDesignProcess = function UndrawDesignProcess(props) {
return _react2.default.createElement(
"svg",
{
style: { height: props.height, width: '100%' },
className: props.class,
id: "945b7132-8e73-4adf-a4b9-6bcbaa5f7538",
"data-name": "Layer 1",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 1016.95 779.71"
},
_react2.default.createElement(
"defs",
null,
_react2.default.createElement(
"linearGradient",
{
id: "f2a8c623-59d2-4818-b55b-e57e9767e514",
x1: 196.28,
y1: 438.84,
x2: 196.28,
y2: 60.65,
gradientTransform: "translate(-91.51 -60.66)",
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: "f68435eb-6090-4c29-82cb-c22589dfd1c9",
x1: 600.14,
y1: 614.06,
x2: 600.14,
y2: 235.88,
xlinkHref: "#f2a8c623-59d2-4818-b55b-e57e9767e514"
}),
_react2.default.createElement("linearGradient", {
id: "4eed950e-2415-43cc-9759-afeb007b071d",
x1: 1003.72,
y1: 788.45,
x2: 1003.72,
y2: 410.27,
xlinkHref: "#f2a8c623-59d2-4818-b55b-e57e9767e514"
})
),
_react2.default.createElement(
"title",
null,
"design process"
),
_react2.default.createElement("rect", {
width: 209.52,
height: 378.19,
rx: 7.96,
ry: 7.96,
fill: "url(#f2a8c623-59d2-4818-b55b-e57e9767e514)"
}),
_react2.default.createElement("rect", {
x: 2.84,
y: 5.11,
width: 203.86,
height: 367.97,
rx: 13.64,
ry: 13.64,
fill: "#fff"
}),
_react2.default.createElement("path", {
d: "M247.5,75A16.53,16.53,0,0,1,231.21,89H160.8A16.53,16.53,0,0,1,144.51,75h-37.3a7.74,7.74,0,0,0-7.74,7.74v334a7.74,7.74,0,0,0,7.74,7.74H285.36a7.74,7.74,0,0,0,7.74-7.74v-334A7.74,7.74,0,0,0,285.37,75Z",
transform: "translate(-91.52 -60.64)",
fill: "#fafafa"
}),
_react2.default.createElement("rect", {
x: 82.34,
y: 18.74,
width: 45.43,
height: 2.84,
rx: 1.42,
ry: 1.42,
fill: "#dbdbdb"
}),
_react2.default.createElement("circle", { cx: 137.42, cy: 19.88, r: 1.7, fill: "#dbdbdb" }),
_react2.default.createElement("rect", {
x: 403.86,
y: 175.23,
width: 209.52,
height: 378.19,
rx: 7.96,
ry: 7.96,
fill: "url(#f68435eb-6090-4c29-82cb-c22589dfd1c9)"
}),
_react2.default.createElement("rect", {
x: 406.69,
y: 180.34,
width: 203.86,
height: 367.97,
rx: 13.64,
ry: 13.64,
fill: "#fff"
}),
_react2.default.createElement("path", {
d: "M651.36,250.21a16.53,16.53,0,0,1-16.29,14.06H564.66a16.53,16.53,0,0,1-16.29-14.06h-37.3a7.74,7.74,0,0,0-7.74,7.74V592a7.74,7.74,0,0,0,7.74,7.74H689.21A7.74,7.74,0,0,0,697,592V258a7.74,7.74,0,0,0-7.74-7.74Z",
transform: "translate(-91.52 -60.64)",
fill: "#fafafa"
}),
_react2.default.createElement("rect", {
x: 486.19,
y: 193.97,
width: 45.43,
height: 2.84,
rx: 1.42,
ry: 1.42,
fill: "#dbdbdb"
}),
_react2.default.createElement("circle", { cx: 541.27, cy: 195.11, r: 1.7, fill: "#dbdbdb" }),
_react2.default.createElement(
"g",
{ opacity: 0.8 },
_react2.default.createElement("polyline", {
points: "495.93 291.91 495.93 297.91 489.93 297.91",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 480.63,
y1: 297.91,
x2: 448.09,
y2: 297.91,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: "9.3 9.3"
}),
_react2.default.createElement("polyline", {
points: "443.45 297.91 437.45 297.91 437.45 291.91",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 437.45,
y1: 278.37,
x2: 437.45,
y2: 258.05,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: "13.55 13.55"
}),
_react2.default.createElement("polyline", {
points: "437.45 251.28 437.45 245.28 443.45 245.28",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 452.74,
y1: 245.28,
x2: 485.28,
y2: 245.28,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: "9.3 9.3"
}),
_react2.default.createElement("polyline", {
points: "489.93 245.28 495.93 245.28 495.93 251.28",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 495.93,
y1: 264.82,
x2: 495.93,
y2: 285.14,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: "13.55 13.55"
})
),
_react2.default.createElement(
"g",
{ opacity: 0.8 },
_react2.default.createElement("polyline", {
points: "583.01 490.77 583.01 496.77 577.01 496.77",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 567.71,
y1: 496.77,
x2: 535.17,
y2: 496.77,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: "9.3 9.3"
}),
_react2.default.createElement("polyline", {
points: "530.52 496.77 524.52 496.77 524.52 490.77",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 524.53,
y1: 477.22,
x2: 524.53,
y2: 456.9,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: "13.55 13.55"
}),
_react2.default.createElement("polyline", {
points: "524.52 450.13 524.52 444.13 530.52 444.13",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 539.82,
y1: 444.13,
x2: 572.36,
y2: 444.13,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: "9.3 9.3"
}),
_react2.default.createElement("polyline", {
points: "577.01 444.13 583.01 444.13 583.01 450.13",
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 583.01,
y1: 463.68,
x2: 583.01,
y2: 483.99,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: "13.55 13.55"
})
),
_react2.default.createElement(
"g",
{ opacity: 0.8 },
_react2.default.createElement("line", {
x1: 437.12,
y1: 325.53,
x2: 583.34,
y2: 325.53,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: 12
}),
_react2.default.createElement("line", {
x1: 437.12,
y1: 354.78,
x2: 583.34,
y2: 354.78,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: 12
}),
_react2.default.createElement("line", {
x1: 437.12,
y1: 384.02,
x2: 583.34,
y2: 384.02,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: 12
}),
_react2.default.createElement("line", {
x1: 437.12,
y1: 413.26,
x2: 583.34,
y2: 413.26,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: 12
})
),
_react2.default.createElement("rect", {
x: 807.43,
y: 349.63,
width: 209.52,
height: 378.19,
rx: 7.96,
ry: 7.96,
fill: "url(#4eed950e-2415-43cc-9759-afeb007b071d)"
}),
_react2.default.createElement("rect", {
x: 810.26,
y: 354.74,
width: 203.86,
height: 367.97,
rx: 13.64,
ry: 13.64,
fill: "#fff"
}),
_react2.default.createElement("path", {
d: "M1054.93,424.61a16.53,16.53,0,0,1-16.29,14.06H968.23a16.53,16.53,0,0,1-16.29-14.06h-37.3a7.74,7.74,0,0,0-7.74,7.74v334a7.74,7.74,0,0,0,7.74,7.74h178.15a7.74,7.74,0,0,0,7.74-7.74v-334a7.74,7.74,0,0,0-7.74-7.74Z",
transform: "translate(-91.52 -60.64)",
fill: "#fafafa"
}),
_react2.default.createElement("rect", {
x: 889.76,
y: 368.37,
width: 45.43,
height: 2.84,
rx: 1.42,
ry: 1.42,
fill: "#dbdbdb"
}),
_react2.default.createElement("circle", { cx: 944.84, cy: 369.51, r: 1.7, fill: "#dbdbdb" }),
_react2.default.createElement("rect", { x: 836.47, y: 419.68, width: 58.49, height: 52.64, fill: props.primaryColor }),
_react2.default.createElement("rect", { x: 924.2, y: 618.53, width: 58.49, height: 52.64, fill: props.primaryColor }),
_react2.default.createElement("line", {
x1: 836.47,
y1: 502.86,
x2: 982.68,
y2: 502.86,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 836.47,
y1: 532.1,
x2: 982.68,
y2: 532.1,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 836.47,
y1: 561.34,
x2: 982.68,
y2: 561.34,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("line", {
x1: 836.47,
y1: 590.59,
x2: 982.68,
y2: 590.59,
fill: "none",
stroke: "#6c63ff",
strokeMiterlimit: 10,
strokeWidth: 2
}),
_react2.default.createElement("polyline", {
points: "232.95 40.71 509.95 40.71 509.95 142.71",
fill: "none",
stroke: "#3ad29f",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: 12
}),
_react2.default.createElement("polyline", {
points: "508.95 590.71 508.95 778.71 912.95 778.71 912.95 746.71",
fill: "none",
stroke: "#3ad29f",
strokeMiterlimit: 10,
strokeWidth: 2,
strokeDasharray: 12
}),
_react2.default.createElement("rect", {
x: 205.48,
y: 513.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 453.48,
y: 58.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 115.48,
y: 450.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 196.48,
y: 675.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 421.48,
y: 711.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 309.48,
y: 310.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 723.48,
y: 626.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 718.48,
y: 261.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 560.48,
y: 590.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 862.48,
y: 117.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 628.48,
y: 99.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 835.48,
y: 747.36,
width: 9,
height: 9,
fill: "#f55f44",
opacity: 0.5
})
);
};
UndrawDesignProcess.propTypes = {
/**
* Hex color
*/
primaryColor: _propTypes2.default.string,
/**
* percentage
*/
height: _propTypes2.default.string,
/**
* custom class for svg
*/
class: _propTypes2.default.string
};
UndrawDesignProcess.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
exports.default = UndrawDesignProcess;