react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
184 lines (179 loc) • 6.57 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawActiveSupport = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="02d45862-41ba-4c70-8782-54d8e5b108cc"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 900.1 696.67"
>
<defs>
<linearGradient
id="fa4a4f63-ffbe-4a50-a004-4e8ae15cd2d3"
x1={583.82}
y1={763.13}
x2={583.82}
y2={246.35}
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="e26e1273-ae5e-4f1a-b841-a4248e9532de"
x1={584.38}
y1={798.34}
x2={584.38}
y2={714.29}
xlinkHref="#fa4a4f63-ffbe-4a50-a004-4e8ae15cd2d3"
/>
<linearGradient
id="54428808-f3ba-4b0a-98a1-6e23268491ee"
x1={760.68}
y1={248.69}
x2={760.68}
y2={0}
xlinkHref="#fa4a4f63-ffbe-4a50-a004-4e8ae15cd2d3"
/>
</defs>
<title>active support</title>
<g opacity={0.8}>
<path
d="M971.12,763.13H196.52v-501a15.8,15.8,0,0,1,15.8-15.8h743a15.8,15.8,0,0,1,15.8,15.8Z"
transform="translate(-149.95 -101.66)"
fill="url(#fa4a4f63-ffbe-4a50-a004-4e8ae15cd2d3)"
/>
</g>
<path
d="M73,153.77H794.69a15.8,15.8,0,0,1,15.8,15.8V661.47a0,0,0,0,1,0,0H57.24a0,0,0,0,1,0,0V169.58A15.8,15.8,0,0,1,73,153.77Z"
fill="#fff"
/>
<rect x={81.49} y={183.31} width={704.75} height={462.25} fill="#f5f5f5" />
<rect
x={84.19}
y={205.75}
width={701.76}
height={415.88}
fill="#e0e0e0"
opacity={0.8}
/>
<rect x={84.19} y={183.65} width={701.76} height={22.1} fill="#f5f5f5" />
<circle cx={99.24} cy={194.37} r={5.36} fill="#ff5252" />
<circle cx={113.97} cy={194.37} r={5.36} fill="#ff0" />
<circle cx={128.71} cy={194.37} r={5.36} fill="#69f0ae" />
<text x={-149.95} y={-101.66} />
<g opacity={0.8}>
<path
d="M992.79,796.35c-43.12,3.27-783.62,2-809.49,0C149.38,780,150,716.56,150,716.56l339.6-2.27,1.14,19.31H636.06l5.68-17h376.34S1025.56,774.76,992.79,796.35Z"
transform="translate(-149.95 -101.66)"
fill="url(#e26e1273-ae5e-4f1a-b841-a4248e9532de)"
/>
</g>
<path
d="M1012.57,721.67h-369a11.33,11.33,0,0,1-8.6,18.74H494.09a11.33,11.33,0,0,1-8.6-18.74H155.06S154.49,776.76,188,791c25.55,1.7,757,2.84,799.59,0C1020,772.21,1012.57,721.67,1012.57,721.67Z"
transform="translate(-149.95 -101.66)"
fill="#f5f5f5"
/>
<circle cx={81.78} cy={631.94} r={4.54} fill="#e0e0e0" />
<circle cx={95.41} cy={631.94} r={4.54} fill="#e0e0e0" />
<circle cx={109.03} cy={631.94} r={4.54} fill="#e0e0e0" />
<path
d="M419.88,375.85h32.19a139.5,139.5,0,0,1,139.5,139.5V616.76a0,0,0,0,1,0,0H280.38a0,0,0,0,1,0,0V515.35A139.5,139.5,0,0,1,419.88,375.85Z"
fill={props.primaryColor}
/>
<circle cx={436.28} cy={179.39} r={142.22} fill="#333" />
<path
d="M415.34,334.43h41.13a29,29,0,0,1,29,29v28.26a44.34,44.34,0,0,1-44.34,44.34H430.64a44.34,44.34,0,0,1-44.34-44.34V363.47a29,29,0,0,1,29-29Z"
opacity={0.1}
/>
<path
d="M386.3,331.53h99.22a0,0,0,0,1,0,0v57.3a44.34,44.34,0,0,1-44.34,44.34H430.64a44.34,44.34,0,0,1-44.34-44.34v-57.3A0,0,0,0,1,386.3,331.53Z"
fill="#fdb797"
/>
<path
d="M536.43,447.5a142.8,142.8,0,0,0,99.22.27V435.59H536.43Z"
transform="translate(-149.95 -101.66)"
opacity={0.1}
/>
<circle cx={436.28} cy={210.26} r={142.22} fill="#fdb797" />
<path
d="M450.26,261.58H721.46S698.31,152.07,595.78,159,450.26,261.58,450.26,261.58Z"
transform="translate(-149.95 -101.66)"
opacity={0.1}
/>
<path
d="M450.26,257.9H721.46S698.31,148.39,595.78,155.37,450.26,257.9,450.26,257.9Z"
transform="translate(-149.95 -101.66)"
fill="#333"
/>
<ellipse cx={297} cy={204.2} rx={13.23} ry={24.81} fill="#fdb797" />
<ellipse cx={574.82} cy={204.2} rx={13.23} ry={24.81} fill="#fdb797" />
<path
d="M471.31,185.34c3.25-10.62,9.16-20.77,18.28-27.1,6.93-4.81,15.22-7.12,23.17-9.94a177.08,177.08,0,0,0,33.68-16.11c12.06-7.43,23.39-16.38,36.67-21.29,22.85-8.45,48.3-3.88,71.89,2.18,5.81,1.49,11.69,3.11,16.81,6.25,5.93,3.63,10.48,9.09,14.92,14.44l37.44,45.16c3.43,4.13,6.88,8.31,9.3,13.11a45.09,45.09,0,0,1,4.26,14.79c1,8.28.22,17.06-4,24.27-6.33,10.81-19.38,16.24-31.89,16.74s-24.79-3.13-36.81-6.65c-38.76-11.35-78-21.93-118.2-26.64a333.41,333.41,0,0,0-60.15-1.95c-6.3.41-14.62,3.3-18.45-3.12C464.92,203.91,469.6,190.92,471.31,185.34Z"
transform="translate(-149.95 -101.66)"
fill="#333"
/>
<line
x1={341.3}
y1={506.34}
x2={341.3}
y2={616.76}
fill="none"
stroke="#000"
strokeMiterlimit={10}
strokeWidth={4}
opacity={0.05}
/>
<line
x1={533.14}
y1={506.34}
x2={533.14}
y2={616.76}
fill="none"
stroke="#000"
strokeMiterlimit={10}
strokeWidth={4}
opacity={0.05}
/>
<g opacity={0.8}>
<polygon
points="900.1 198.47 721.64 198.47 661.41 248.69 661.41 198.47 621.26 198.47 621.26 0 900.1 0 900.1 198.47"
fill="url(#54428808-f3ba-4b0a-98a1-6e23268491ee)"
/>
</g>
<rect x={625.04} y={2.36} width={271.28} height={189.79} fill="#fff" />
<rect x={655.59} y={30.26} width={214.95} height={5.64} fill="#e0e0e0" />
<rect x={655.59} y={55.66} width={147.78} height={5.64} fill="#e0e0e0" />
<rect x={655.59} y={81.05} width={177.34} height={5.64} fill="#e0e0e0" />
<rect x={655.59} y={106.45} width={142.41} height={5.64} fill={props.primaryColor} />
<rect x={655.59} y={131.84} width={214.95} height={5.64} fill={props.primaryColor} />
<rect x={655.59} y={157.24} width={214.95} height={5.64} fill="#e0e0e0" />
<polygon
points="671.45 188.46 671.45 238.66 726.66 183.44 671.45 188.46"
fill="#fff"
/>
</svg>
);
UndrawActiveSupport.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawActiveSupport.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawActiveSupport;