react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
560 lines (555 loc) • 14.3 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawBrowserStats = props => (
<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"
>
<defs>
<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"
>
<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="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"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
</defs>
<title>browser stats</title>
<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)"
/>
<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}
/>
<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"
/>
<rect
x={256.92}
y={256.11}
width={656.27}
height={412.61}
transform="translate(-263.71 103.4) rotate(-18.02)"
fill="#fff"
/>
<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"
/>
<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"
/>
<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"
/>
<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)"
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<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}
/>
<rect
x={582.68}
y={380.22}
width={94.51}
height={9.15}
transform="translate(-237.66 114.15) rotate(-18.07)"
fill="#64ffda"
/>
<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}
/>
<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)"
/>
<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)"
/>
<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}
/>
<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}
/>
<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)"
/>
<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}
/>
<line
x1={32.71}
y1={92.94}
x2={32.71}
y2={92.94}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
/>
<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"
/>
<line
x1={59.14}
y1={174.17}
x2={59.14}
y2={174.17}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
/>
<line
x1={61.01}
y1={182.38}
x2={265.35}
y2={115.7}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
/>
<line
x1={65.52}
y1={156.84}
x2={237.98}
y2={100.56}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
opacity={0.3}
/>
<line
x1={58.45}
y1={135.08}
x2={230.9}
y2={78.81}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
opacity={0.3}
/>
<line
x1={51.37}
y1={113.32}
x2={223.82}
y2={57.05}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
opacity={0.3}
/>
<line
x1={44.29}
y1={91.57}
x2={216.75}
y2={35.29}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
opacity={0.3}
/>
<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}
/>
<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}
/>
<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)"
/>
<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}
/>
<line
x1={842.91}
y1={225.71}
x2={842.91}
y2={225.71}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
/>
<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"
/>
<line
x1={793.02}
y1={241.99}
x2={793.02}
y2={241.99}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
/>
<line
x1={787.97}
y1={243.14}
x2={828.87}
y2={368.88}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
/>
<line
x1={803.66}
y1={245.92}
x2={838.18}
y2={352.03}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
opacity={0.3}
/>
<line
x1={817.02}
y1={241.56}
x2={851.54}
y2={347.67}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
opacity={0.3}
/>
<line
x1={830.39}
y1={237.2}
x2={864.9}
y2={343.31}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
opacity={0.3}
/>
<line
x1={843.75}
y1={232.84}
x2={878.27}
y2={338.95}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
opacity={0.3}
/>
<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}
/>
<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}
/>
</svg>
);
UndrawBrowserStats.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawBrowserStats.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawBrowserStats;