react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
582 lines (572 loc) • 17.4 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 UndrawBrowserStats = function UndrawBrowserStats(props) {
return _react2.default.createElement(
"svg",
{
style: { height: props.height, width: '100%' },
className: props.class,
id: "fd90b8a3-4437-4e53-9ed1-6a62608c98e9",
"data-name": "Layer 1",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 901.27 699.5"
},
_react2.default.createElement(
"defs",
null,
_react2.default.createElement(
"linearGradient",
{
id: "847eb8af-bbce-4f57-ba7f-3359ee06be62",
x1: 551.11,
y1: 673.8,
x2: 551.11,
y2: 209.77,
gradientTransform: "translate(-228.24 104.61) rotate(-18.05)",
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: "2b201dea-c73f-4bea-9091-2864ae23bad1",
x1: 343.1,
y1: 301.6,
x2: 343.1,
y2: 283.2,
gradientTransform: "translate(-5.04 84.03) rotate(0.03)",
xlinkHref: "#847eb8af-bbce-4f57-ba7f-3359ee06be62"
}),
_react2.default.createElement("linearGradient", {
id: "0aaf87fd-7158-43f3-b384-09839f3693d8",
x1: 259.93,
y1: 498.37,
x2: 259.93,
y2: 451.06,
gradientTransform: "translate(55.61 100.87) rotate(0.03)",
xlinkHref: "#847eb8af-bbce-4f57-ba7f-3359ee06be62"
}),
_react2.default.createElement("linearGradient", {
id: "3b303ee2-e0cd-4b1a-91b8-34e7f84aee2c",
x1: 259.89,
y1: 582.27,
x2: 259.89,
y2: 534.96,
gradientTransform: "translate(81.64 96.75) rotate(0.03)",
xlinkHref: "#847eb8af-bbce-4f57-ba7f-3359ee06be62"
}),
_react2.default.createElement("linearGradient", {
id: "b94f881d-d710-4203-9d7d-b4a45cccc17d",
x1: 299.41,
y1: 322.19,
x2: 299.41,
y2: 100.25,
gradientTransform: "matrix(1, 0, 0, 1, 0, 0)",
xlinkHref: "#847eb8af-bbce-4f57-ba7f-3359ee06be62"
}),
_react2.default.createElement("linearGradient", {
id: "259efb3a-7d6a-4a96-8460-9c2c2a692674",
x1: 981.21,
y1: 492.23,
x2: 981.21,
y2: 304.03,
gradientTransform: "matrix(1, 0, 0, 1, 0, 0)",
xlinkHref: "#847eb8af-bbce-4f57-ba7f-3359ee06be62"
})
),
_react2.default.createElement(
"title",
null,
"browser stats"
),
_react2.default.createElement("polygon", {
points: "38.44 238.68 47.16 265.48 181.88 679.65 826.78 469.2 692.06 55.03 683.35 28.23 38.44 238.68",
fill: "url(#847eb8af-bbce-4f57-ba7f-3359ee06be62)"
}),
_react2.default.createElement("polygon", {
points: "19.59 281.74 27.84 307.13 155.47 699.5 779.36 495.91 651.73 103.53 643.48 78.15 19.59 281.74",
fill: props.primaryColor,
opacity: 0.7
}),
_react2.default.createElement("rect", {
x: 188.98,
y: 240.19,
width: 656.27,
height: 26.69,
transform: "matrix(0.95, -0.31, 0.31, 0.95, -202.51, 72.68)",
fill: "#f5f5f5"
}),
_react2.default.createElement("rect", {
x: 256.92,
y: 256.11,
width: 656.27,
height: 412.61,
transform: "translate(-263.71 103.4) rotate(-18.02)",
fill: "#fff"
}),
_react2.default.createElement("path", {
d: "M226.79,347.88a7.62,7.62,0,1,1-9.61-4.89A7.63,7.63,0,0,1,226.79,347.88Z",
transform: "translate(-149.37 -100.25)",
fill: "#ff5252"
}),
_react2.default.createElement("path", {
d: "M247.07,341.26a7.62,7.62,0,1,1-9.61-4.89A7.63,7.63,0,0,1,247.07,341.26Z",
transform: "translate(-149.37 -100.25)",
fill: "#ff0"
}),
_react2.default.createElement("path", {
d: "M267.36,334.63a7.62,7.62,0,1,1-9.61-4.89A7.63,7.63,0,0,1,267.36,334.63Z",
transform: "translate(-149.37 -100.25)",
fill: "#69f0ae"
}),
_react2.default.createElement("rect", {
x: 232.73,
y: 367.44,
width: 210.37,
height: 18.3,
transform: "translate(-249.52 23.16) rotate(-18.07)",
fill: "url(#2b201dea-c73f-4bea-9091-2864ae23bad1)"
}),
_react2.default.createElement("rect", {
x: 233.26,
y: 368.24,
width: 208.85,
height: 15.25,
transform: "translate(-249.31 23.05) rotate(-18.07)",
fill: props.primaryColor
}),
_react2.default.createElement("rect", {
x: 628.9,
y: 239.13,
width: 208.85,
height: 15.25,
transform: "translate(-189.74 139.42) rotate(-18.07)",
fill: props.primaryColor
}),
_react2.default.createElement("rect", {
x: 628.9,
y: 239.13,
width: 208.85,
height: 15.25,
transform: "translate(-189.74 139.42) rotate(-18.07)",
opacity: 0.2
}),
_react2.default.createElement("rect", {
x: 268.86,
y: 496.55,
width: 9.15,
height: 9.15,
transform: "translate(-291.34 9.3) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.2
}),
_react2.default.createElement("rect", {
x: 858.69,
y: 304.08,
width: 9.15,
height: 9.15,
transform: "translate(-202.53 182.78) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("path", {
d: "M325.6,484.1a16.77,16.77,0,1,1-21.13-10.75A16.79,16.79,0,0,1,325.6,484.1Z",
transform: "translate(-149.37 -100.25)",
fill: props.primaryColor,
opacity: 0.2
}),
_react2.default.createElement("path", {
d: "M844.42,314.8A16.77,16.77,0,1,1,823.29,304,16.79,16.79,0,0,1,844.42,314.8Z",
transform: "translate(-149.37 -100.25)",
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 336.31,
y: 460.61,
width: 94.51,
height: 9.15,
transform: "translate(-274.75 41.69) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 362.26,
y: 540.39,
width: 94.51,
height: 9.15,
transform: "translate(-298.22 53.68) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.8
}),
_react2.default.createElement("rect", {
x: 485.45,
y: 500.19,
width: 94.51,
height: 9.15,
transform: "translate(-279.68 89.91) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.7
}),
_react2.default.createElement("rect", {
x: 608.63,
y: 460,
width: 94.51,
height: 9.15,
transform: "translate(-261.13 126.14) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 731.82,
y: 419.8,
width: 94.51,
height: 9.15,
transform: "translate(-242.58 162.37) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.2
}),
_react2.default.createElement("rect", {
x: 388.21,
y: 620.17,
width: 94.51,
height: 9.15,
transform: "translate(-321.69 65.67) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.8
}),
_react2.default.createElement("rect", {
x: 511.4,
y: 579.97,
width: 94.51,
height: 9.15,
transform: "translate(-303.15 101.9) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.7
}),
_react2.default.createElement("rect", {
x: 634.58,
y: 539.78,
width: 94.51,
height: 9.15,
transform: "translate(-284.6 138.13) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", {
x: 757.77,
y: 499.58,
width: 94.51,
height: 9.15,
transform: "translate(-266.05 174.36) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.2
}),
_react2.default.createElement("rect", {
x: 459.5,
y: 420.41,
width: 94.51,
height: 9.15,
transform: "translate(-256.21 77.92) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.2
}),
_react2.default.createElement("rect", {
x: 582.68,
y: 380.22,
width: 94.51,
height: 9.15,
transform: "translate(-237.66 114.15) rotate(-18.07)",
fill: "#64ffda"
}),
_react2.default.createElement("rect", {
x: 705.86,
y: 340.02,
width: 94.51,
height: 9.15,
transform: "translate(-219.11 150.39) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.2
}),
_react2.default.createElement("rect", {
x: 291.69,
y: 552.06,
width: 47.26,
height: 47.29,
transform: "translate(-312.41 25.97) rotate(-18.07)",
fill: "url(#0aaf87fd-7158-43f3-b384-09839f3693d8)"
}),
_react2.default.createElement("rect", {
x: 317.64,
y: 631.84,
width: 47.26,
height: 47.29,
transform: "translate(-335.88 37.96) rotate(-18.07)",
fill: "url(#3b303ee2-e0cd-4b1a-91b8-34e7f84aee2c)"
}),
_react2.default.createElement("rect", {
x: 293.98,
y: 554.35,
width: 42.68,
height: 42.71,
transform: "translate(-312.41 25.97) rotate(-18.07)",
fill: props.primaryColor
}),
_react2.default.createElement("rect", {
x: 319.93,
y: 634.13,
width: 42.68,
height: 42.71,
transform: "translate(-335.88 37.96) rotate(-18.07)",
fill: props.primaryColor
}),
_react2.default.createElement("path", {
d: "M409.59,100.25,149.37,185.17l39.87,122.57,37.07-12.1c.14,5.4-.11,22.34-8.67,26.55,0,0,18.15.59,29.4-33.32l202.41-66.05Z",
transform: "translate(-149.37 -100.25)",
fill: "url(#b94f881d-d710-4203-9d7d-b4a45cccc17d)"
}),
_react2.default.createElement("path", {
d: "M403.91,106.36l-246.37,80.4,37.75,116,35.1-11.45c.14,5.12-.11,21.15-8.21,25.14,0,0,17.18.55,27.84-31.55L441.66,222.4Z",
transform: "translate(-149.37 -100.25)",
fill: props.primaryColor
}),
_react2.default.createElement("line", {
x1: 32.71,
y1: 92.94,
x2: 32.71,
y2: 92.94,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round"
}),
_react2.default.createElement("line", {
x1: 33.97,
y1: 96.8,
x2: 58.51,
y2: 172.23,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeDasharray: "0 4.07"
}),
_react2.default.createElement("line", {
x1: 59.14,
y1: 174.17,
x2: 59.14,
y2: 174.17,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round"
}),
_react2.default.createElement("line", {
x1: 61.01,
y1: 182.38,
x2: 265.35,
y2: 115.7,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round"
}),
_react2.default.createElement("line", {
x1: 65.52,
y1: 156.84,
x2: 237.98,
y2: 100.56,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
opacity: 0.3
}),
_react2.default.createElement("line", {
x1: 58.45,
y1: 135.08,
x2: 230.9,
y2: 78.81,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
opacity: 0.3
}),
_react2.default.createElement("line", {
x1: 51.37,
y1: 113.32,
x2: 223.82,
y2: 57.05,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
opacity: 0.3
}),
_react2.default.createElement("line", {
x1: 44.29,
y1: 91.57,
x2: 216.75,
y2: 35.29,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
opacity: 0.3
}),
_react2.default.createElement("path", {
d: "M250.16,247.91a3.58,3.58,0,0,1-.07-1,6.15,6.15,0,0,1,5.18-5.6l.74-.15c4.84-1.21,9.81-3,13.07-6.77,5.12-6,4.53-15.11,3.65-22.49a12.85,12.85,0,0,1,.93-6.85c3.17-7,10.15-5.18,16.1-5.48a22.88,22.88,0,0,0,20.73-18.3c.74-4.2.27-8.53.87-12.75a25.23,25.23,0,0,1,8.11-15.09c4.5-4,10.33-6.28,15.93-8.23a39.6,39.6,0,0,1,13.91-2.29h.25a20.34,20.34,0,0,1,18.23,13.12c1.24,3.21,2.3,6.49,3.41,9.89,6.13,18.86,11.8,36.26,18.88,58.1-8.7,2.76-29.1,9.41-31.89,10.32l-30.43,9.93c-20.29,6.62-39.69,13.58-62.32,20.34-4.67,1.39,0,0-10.14,3.31C253.5,262.44,253.41,262.18,250.16,247.91Z",
transform: "translate(-149.37 -100.25)",
fill: "#fff",
opacity: 0.2
}),
_react2.default.createElement("rect", {
x: 215.32,
y: 340.78,
width: 259.15,
height: 6.1,
transform: "matrix(0.95, -0.31, 0.31, 0.95, -239.01, 23.71)",
fill: props.primaryColor,
opacity: 0.1
}),
_react2.default.createElement("path", {
d: "M1050.63,467.2,997.56,304l-76.72,25,7.56,23.25c-3.38.09-14-.07-16.62-5.43,0,0-.37,11.38,20.85,18.43l41.29,126.92Z",
transform: "translate(-149.37 -100.25)",
fill: "url(#259efb3a-7d6a-4a96-8460-9c2c2a692674)"
}),
_react2.default.createElement("path", {
d: "M1045.54,462.45,996.23,310.86,925,334.12l7,21.6c-3.14.08-13-.06-15.44-5,0,0-.34,10.57,19.37,17.12l38.36,117.92Z",
transform: "translate(-149.37 -100.25)",
fill: props.primaryColor
}),
_react2.default.createElement("line", {
x1: 842.91,
y1: 225.71,
x2: 842.91,
y2: 225.71,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round"
}),
_react2.default.createElement("line", {
x1: 839.07,
y1: 226.96,
x2: 794.94,
y2: 241.37,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeDasharray: "0 4.04"
}),
_react2.default.createElement("line", {
x1: 793.02,
y1: 241.99,
x2: 793.02,
y2: 241.99,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round"
}),
_react2.default.createElement("line", {
x1: 787.97,
y1: 243.14,
x2: 828.87,
y2: 368.88,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round"
}),
_react2.default.createElement("line", {
x1: 803.66,
y1: 245.92,
x2: 838.18,
y2: 352.03,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
opacity: 0.3
}),
_react2.default.createElement("line", {
x1: 817.02,
y1: 241.56,
x2: 851.54,
y2: 347.67,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
opacity: 0.3
}),
_react2.default.createElement("line", {
x1: 830.39,
y1: 237.2,
x2: 864.9,
y2: 343.31,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
opacity: 0.3
}),
_react2.default.createElement("line", {
x1: 843.75,
y1: 232.84,
x2: 878.27,
y2: 338.95,
fill: "none",
stroke: "#fff",
strokeLinecap: "round",
strokeLinejoin: "round",
opacity: 0.3
}),
_react2.default.createElement("path", {
d: "M958.65,367.88a2.19,2.19,0,0,1,.59,0,3.78,3.78,0,0,1,3.44,3.19c0,.19.06.34.09.45.74,3,1.83,6,4.15,8,3.66,3.15,9.28,2.79,13.81,2.24a7.87,7.87,0,0,1,4.21.57c4.28,2,3.18,6.25,3.36,9.9A14.05,14.05,0,0,0,999.53,405c2.58.46,5.24.16,7.83.54a15.47,15.47,0,0,1,9.27,5c2.46,2.77,3.86,6.35,5.05,9.8a24.4,24.4,0,0,1,1.4,8.56V429a12.53,12.53,0,0,1-8.06,11.22c-2,.76-4,1.42-6.08,2.1L973.26,454c-1.69-5.36-5.77-17.91-6.33-19.62-2.13-6.54-4-12.18-6.09-18.73-4.06-12.48-8.33-24.42-12.47-38.34-.85-2.87,0,0-2-6.24C949.73,369.93,949.89,369.88,958.65,367.88Z",
transform: "translate(-149.37 -100.25)",
fill: "#fff",
opacity: 0.2
}),
_react2.default.createElement("rect", {
x: 885.84,
y: 349.89,
width: 7.62,
height: 158.64,
transform: "translate(-238.62 196.92) rotate(-18.07)",
fill: props.primaryColor,
opacity: 0.1
})
);
};
UndrawBrowserStats.propTypes = {
/**
* Hex color
*/
primaryColor: _propTypes2.default.string,
/**
* percentage
*/
height: _propTypes2.default.string,
/**
* custom class for svg
*/
class: _propTypes2.default.string
};
UndrawBrowserStats.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
exports.default = UndrawBrowserStats;