react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
347 lines (342 loc) • 10.2 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawCustomerSurvey = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="629dcec7-c063-4496-b40c-d8a33d01e794"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 873.56 795"
>
<defs>
<linearGradient
id="1ad885a6-086f-4584-b8fc-49709722d9e2"
x1={441}
y1={598}
x2={441}
y2={55}
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="6f115915-dfc3-4eba-8ca8-4e2bf8885e02"
x1={441.5}
y1={91}
x2={441.5}
y2={44.98}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="4923b0dd-8e96-4c93-b583-a6b0ce88de70"
x1={604.72}
y1={106.89}
x2={604.72}
y2={52.5}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="ea587278-d59f-43ad-bda4-771cfa902fd4"
x1={308.5}
y1={227}
x2={308.5}
y2={145}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="e2b55b91-c252-4605-a1d1-0f99b0ab4047"
x1={308.78}
y1={389.5}
x2={308.78}
y2={307.5}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="76544af5-6047-4a4c-b2fc-a23f66c9d65b"
x1={309.06}
y1={550}
x2={309.06}
y2={468}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="daf008b2-47be-48c6-a376-1f125493a331"
x1={308.5}
y1={205.63}
x2={308.5}
y2={165.37}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="ebbb3683-2e35-4ba5-aa17-65e675e22e58"
x1={796.5}
y1={193}
x2={796.5}
y2={42}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="3d5714ec-ccf4-45ec-9ad7-6b8d237940bd"
x1={796.5}
y1={176}
x2={796.5}
y2={69}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="77e7c8c2-0f5e-4b8d-920a-2630d282c2c9"
x1={628}
y1={795}
x2={628}
y2={620}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
<linearGradient
id="a6898519-96e7-44e1-b71e-df9c3f17d463"
x1={102}
y1={464.25}
x2={102}
y2={319.75}
xlinkHref="#1ad885a6-086f-4584-b8fc-49709722d9e2"
/>
</defs>
<title>customer survey</title>
<g opacity={0.5}>
<rect
x={244.5}
y={55}
width={393}
height={543}
fill="url(#1ad885a6-086f-4584-b8fc-49709722d9e2)"
/>
</g>
<rect x={249.5} y={59} width={383} height={531} fill="#fff" />
<rect
x={346.5}
y={44.98}
width={190}
height={46.02}
fill="url(#6f115915-dfc3-4eba-8ca8-4e2bf8885e02)"
/>
<path
d="M604.72,52.5c-14.67,0-26.56,12.18-26.56,27.2s11.89,27.2,26.56,27.2,26.56-12.18,26.56-27.2S619.39,52.5,604.72,52.5Zm0,42.89A15.69,15.69,0,1,1,620,79.7,15.51,15.51,0,0,1,604.72,95.39Z"
transform="translate(-163.22 -52.5)"
fill="url(#4923b0dd-8e96-4c93-b583-a6b0ce88de70)"
/>
<rect x={348.5} y={45} width={186} height={44} fill={props.primaryColor} />
<path
d="M604.72,54.5a26,26,0,1,0,26,26A26,26,0,0,0,604.72,54.5Zm0,41a15,15,0,1,1,15-15A15,15,0,0,1,604.72,95.5Z"
transform="translate(-163.22 -52.5)"
fill={props.primaryColor}
/>
<rect
x={267.5}
y={145}
width={82}
height={82}
fill="url(#ea587278-d59f-43ad-bda4-771cfa902fd4)"
/>
<rect
x={267.78}
y={307.5}
width={82}
height={82}
fill="url(#e2b55b91-c252-4605-a1d1-0f99b0ab4047)"
/>
<rect
x={268.06}
y={468}
width={82}
height={82}
fill="url(#76544af5-6047-4a4c-b2fc-a23f66c9d65b)"
/>
<rect x={270.5} y={148} width={76} height={76} fill="#69f0ae" />
<rect x={270.5} y={309} width={76} height={76} fill={props.primaryColor} />
<rect x={270.5} y={470} width={76} height={76} fill={props.primaryColor} />
<rect x={396.5} y={171.46} width={104.17} height={7.27} fill="#e0e0e0" />
<rect x={396.5} y={182.37} width={172} height={7.27} fill="#e0e0e0" />
<rect x={396.5} y={193.27} width={159.89} height={7.27} fill="#e0e0e0" />
<rect x={396.5} y={332.46} width={104.17} height={7.27} fill="#e0e0e0" />
<rect x={396.5} y={343.37} width={172} height={7.27} fill="#e0e0e0" />
<rect x={396.5} y={354.27} width={159.89} height={7.27} fill="#e0e0e0" />
<rect x={396.5} y={493.46} width={104.17} height={7.27} fill="#e0e0e0" />
<rect x={396.5} y={504.37} width={172} height={7.27} fill="#e0e0e0" />
<rect x={396.5} y={515.27} width={159.89} height={7.27} fill="#e0e0e0" />
<polygon
points="291.25 181.47 305.05 194.13 324.6 165.38 331.5 171.13 305.05 205.63 285.5 183.78 291.25 181.47"
fill="url(#daf008b2-47be-48c6-a376-1f125493a331)"
/>
<polygon
points="293.5 182 305.5 193 322.5 168 328.5 173 305.5 203 288.5 184 293.5 182"
fill="#fff"
/>
<polygon
points="293.5 344 305.5 355 322.5 330 328.5 335 305.5 365 288.5 346 293.5 344"
fill="#fff"
/>
<polygon
points="293.5 506 305.5 517 322.5 492 328.5 497 305.5 527 288.5 508 293.5 506"
fill="#fff"
/>
<g opacity={0.5}>
<line
x1={651}
y1={351}
x2={657}
y2={351}
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={5}
/>
<line
x1={668.54}
y1={351}
x2={801.23}
y2={351}
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={5}
strokeDasharray="11.54 11.54"
/>
<polyline
points="807 351 813 351 813 345"
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={5}
/>
<line
x1={813}
y1={333.55}
x2={813}
y2={224.73}
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={5}
strokeDasharray="11.45 11.45"
/>
<line
x1={813}
y1={219}
x2={813}
y2={213}
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={5}
/>
</g>
<polyline
points="231.5 182.5 97.5 182.5 97.5 308.5"
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={5}
strokeDasharray={12}
opacity={0.5}
/>
<polyline
points="308.5 611.5 308.5 683.5 508.5 683.5"
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={5}
strokeDasharray={12}
opacity={0.5}
/>
<g opacity={0.5}>
<polygon
points="873.56 107.09 796.5 42 720.64 106.95 719.96 106.57 719.96 107.09 719.44 107.09 719.96 107.38 719.96 107.61 719.96 191.96 719.96 193 873.04 193 872.11 192.48 873.56 192.48 873.56 107.09"
fill="url(#ebbb3683-2e35-4ba5-aa17-65e675e22e58)"
/>
</g>
<polygon
points="870.5 189.5 723.5 189.5 723.5 107.5 796.5 45 870.5 107.5 870.5 189.5"
fill="#fff"
/>
<polyline points="722.5 107.5 795.5 148.5 869.5 107.5" fill="#e0e0e0" />
<g opacity={0.5}>
<polygon
points="797.02 147.47 752 176 752 69 841 69 841 123.42 797.02 147.47"
fill="url(#3d5714ec-ccf4-45ec-9ad7-6b8d237940bd)"
/>
</g>
<polygon
points="797 148 754 176 754 71 839 71 839 124.4 797 148"
fill="#fafafa"
/>
<polygon points="723 189 870 189 723 107 723 189" opacity={0.05} />
<polygon points="723 190 870 190 723 108 723 190" fill="#f5f5f5" />
<rect x={765} y={87} width={62} height={4} fill="#fff" />
<rect x={765} y={95} width={62} height={4} fill="#fff" />
<rect x={765} y={103} width={62} height={4} fill={props.primaryColor} />
<rect x={765} y={111} width={62} height={4} fill="#fff" />
<rect x={765} y={119} width={62} height={4} fill={props.primaryColor} />
<polygon
points="839 125 839 123 795.26 147.31 796.45 147.97 839 125"
opacity={0.05}
/>
<g opacity={0.5}>
<rect
x={541.02}
y={620}
width={173.95}
height={175}
fill="url(#77e7c8c2-0f5e-4b8d-920a-2630d282c2c9)"
/>
</g>
<rect x={545} y={624} width={166} height={167} fill="#f5f5f5" />
<rect x={556} y={629} width={146} height={128} fill="#fff" />
<path
d="M865.22,768.5c-40.35,0-73-10.29-73-23-40.35,0-73,8.95-73,20v48h146Z"
transform="translate(-163.22 -52.5)"
fill="#e0e0e0"
/>
<circle cx={678} cy={657} r={15} fill={props.primaryColor} />
<g opacity={0.5}>
<rect
y={319.75}
width={204}
height={144.5}
fill="url(#a6898519-96e7-44e1-b71e-df9c3f17d463)"
/>
</g>
<rect x={6} y={324} width={192} height={136} fill="#fff" />
<path
d="M269.17,410.84a37.29,37.29,0,0,0-4.8.32l4.8,36.68-36.91-2.46c-.05.81-.09,1.63-.09,2.46a37,37,0,1,0,37-37Z"
transform="translate(-163.22 -52.5)"
fill="#e0e0e0"
/>
<path
d="M256.37,404.16a37,37,0,0,0-32.11,34.22l36.91,2.46Z"
transform="translate(-163.22 -52.5)"
fill={props.primaryColor}
/>
</svg>
);
UndrawCustomerSurvey.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawCustomerSurvey.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawCustomerSurvey;