react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
230 lines (225 loc) • 6.89 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawAnalytics = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="67a4f64e-69c0-4cc3-8ffa-07c365bcaba2"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 882 763.27"
>
<defs>
<linearGradient
id="c5381c32-26b1-4c20-8943-962bf6473205"
x1={673}
y1={763.27}
x2={673}
y2={341}
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="c988871c-32eb-4f1a-8e94-f249f90262fa"
x1={640}
y1={537.58}
x2={640}
y2={459.58}
xlinkHref="#c5381c32-26b1-4c20-8943-962bf6473205"
/>
<linearGradient
id="df5bfa86-5197-4bf7-9251-7f88e7557637"
x1={736}
y1={591.58}
x2={736}
y2={513.58}
xlinkHref="#c5381c32-26b1-4c20-8943-962bf6473205"
/>
<linearGradient
id="676dcb08-daf3-4740-8363-ed38ae60e592"
x1={688}
y1={645.58}
x2={688}
y2={567.58}
xlinkHref="#c5381c32-26b1-4c20-8943-962bf6473205"
/>
<linearGradient
id="c1b2fb2f-3bf9-42d9-abce-467458496684"
x1={822}
y1={699.58}
x2={822}
y2={621.58}
xlinkHref="#c5381c32-26b1-4c20-8943-962bf6473205"
/>
<linearGradient
id="427b5ff1-45bb-4b7d-bbf3-3c1f820a6726"
x1={209}
y1={422.27}
x2={209}
y2={0}
xlinkHref="#c5381c32-26b1-4c20-8943-962bf6473205"
/>
<linearGradient
id="3132b3fa-8f3b-4ccd-b73b-cd5580cb890d"
x1={405}
y1={582.71}
x2={405}
y2={160.45}
xlinkHref="#c5381c32-26b1-4c20-8943-962bf6473205"
/>
<linearGradient
id="8d22b5b0-1fad-4d01-a1bc-1d84c178db01"
x1={500.8}
y1={592.09}
x2={500.8}
y2={468.22}
xlinkHref="#c5381c32-26b1-4c20-8943-962bf6473205"
/>
</defs>
<title>analytics</title>
<rect
x={464}
y={341}
width={418}
height={422.27}
fill="url(#c5381c32-26b1-4c20-8943-962bf6473205)"
/>
<rect x={469.69} y={407.82} width={406.63} height={344.07} fill="#fff" />
<rect x={469.69} y={345.27} width={406.63} height={62.56} fill="#bdbdbd" />
<circle cx={500.97} cy={376.54} r={15.64} fill="#ff5252" />
<circle cx={540.78} cy={376.54} r={15.64} fill="#ff0" />
<circle cx={580.59} cy={376.54} r={15.64} fill="#69f0ae" />
<rect x={505.5} y={488.36} width={335} height={21} fill="#e0e0e0" />
<rect x={505.5} y={542.36} width={335} height={21} fill="#e0e0e0" />
<rect x={505.5} y={596.36} width={335} height={21} fill="#e0e0e0" />
<rect x={505.5} y={650.36} width={335} height={21} fill="#e0e0e0" />
<circle
cx={640}
cy={498.58}
r={39}
fill="url(#c988871c-32eb-4f1a-8e94-f249f90262fa)"
/>
<circle
cx={736}
cy={552.58}
r={39}
fill="url(#df5bfa86-5197-4bf7-9251-7f88e7557637)"
/>
<circle
cx={688}
cy={606.58}
r={39}
fill="url(#676dcb08-daf3-4740-8363-ed38ae60e592)"
/>
<circle
cx={822}
cy={660.58}
r={39}
fill="url(#c1b2fb2f-3bf9-42d9-abce-467458496684)"
/>
<circle cx={640} cy={498.58} r={33} fill={props.primaryColor} />
<circle cx={736} cy={552.58} r={33} fill={props.primaryColor} />
<circle cx={688} cy={606.58} r={33} fill={props.primaryColor} />
<circle cx={822} cy={660.58} r={33} fill="#69f0ae" />
<rect
width={418}
height={422.27}
fill="url(#427b5ff1-45bb-4b7d-bbf3-3c1f820a6726)"
/>
<rect x={5.69} y={66.82} width={406.63} height={344.07} fill="#fff" />
<rect x={5.69} y={4.27} width={406.63} height={62.56} fill="#bdbdbd" />
<circle cx={36.97} cy={35.54} r={15.64} fill="#ff5252" />
<circle cx={76.78} cy={35.54} r={15.64} fill="#ff0" />
<circle cx={116.59} cy={35.54} r={15.64} fill="#69f0ae" />
<rect x={94.63} y={149.29} width={38.26} height={179.14} fill="#e0e0e0" />
<rect x={158.12} y={149.29} width={38.26} height={179.14} fill="#e0e0e0" />
<rect x={221.6} y={149.29} width={38.26} height={179.14} fill="#e0e0e0" />
<rect x={285.08} y={149.29} width={38.26} height={179.14} fill="#e0e0e0" />
<rect x={94.63} y={238.86} width={38.26} height={89.57} fill="#2196f3" />
<g opacity={0.4}>
<rect x={94.63} y={201.46} width={38.26} height={39.13} fill="#2196f3" />
</g>
<rect
x={158.47}
y={220}
width={38.26}
height={39.13}
fill="#69f0ae"
opacity={0.4}
/>
<rect
x={285.1}
y={222.05}
width={38.26}
height={39.13}
fill="#ff0"
opacity={0.4}
/>
<rect x={158.12} y={258.3} width={38.26} height={70.12} fill="#69f0ae" />
<rect x={221.6} y={225.81} width={38.26} height={102.62} fill={props.primaryColor} />
<rect
x={221.6}
y={190.16}
width={38.26}
height={35.65}
fill={props.primaryColor}
opacity={0.4}
/>
<rect x={285.08} y={261.47} width={38.26} height={66.96} fill="#ff0" />
<rect
x={196}
y={160.45}
width={418}
height={422.27}
fill="url(#3132b3fa-8f3b-4ccd-b73b-cd5580cb890d)"
/>
<rect x={201.69} y={227.27} width={406.63} height={344.07} fill="#fff" />
<rect x={201.69} y={164.71} width={406.63} height={62.56} fill="#bdbdbd" />
<circle cx={232.97} cy={195.99} r={15.64} fill="#ff5252" />
<circle cx={272.78} cy={195.99} r={15.64} fill="#ff0" />
<circle cx={312.59} cy={195.99} r={15.64} fill="#69f0ae" />
<path
d="M564,349.66l-.71,0v236l.71,0a118,118,0,0,0,0-236Z"
transform="translate(-159 -68.37)"
fill="#2196f3"
/>
<path
d="M563.29,349.68A118,118,0,0,0,446,467H563.29Z"
transform="translate(-159 -68.37)"
fill="#69f0ae"
/>
<path
d="M439.61,468.22c0,.25,0,.49,0,.74A123.14,123.14,0,0,0,562,592.09V468.22Z"
transform="translate(-159 -68.37)"
fill="url(#8d22b5b0-1fad-4d01-a1bc-1d84c178db01)"
/>
<path
d="M443.17,469.8c0,.24,0,.47,0,.71a118,118,0,0,0,117.3,118V469.8Z"
transform="translate(-159 -68.37)"
fill={props.primaryColor}
/>
</svg>
);
UndrawAnalytics.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawAnalytics.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawAnalytics;