react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
340 lines (335 loc) • 12.9 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawChoose = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="6670c59b-7363-437f-8bc4-669e571fa4b5"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 567 785.72"
>
<defs>
<linearGradient
id="aaad421b-74ad-4e3c-867c-11df00873b04"
x1={378.18}
y1={511.24}
x2={697.95}
y2={511.24}
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>
</defs>
<title>choose</title>
<polygon
points="528.76 115.47 474.5 99.07 471.16 173.27 528.26 190.48 528.76 115.47"
fill="#f5f5f5"
/>
<polygon
points="146.81 0 146.81 75.5 471.16 173.27 474.5 99.07 146.81 0"
fill="#f5f5f5"
/>
<polygon
points="528.76 115.47 474.5 99.07 471.16 173.27 528.26 190.48 528.76 115.47"
opacity={0.1}
/>
<polygon
points="528.76 257.59 474.5 241.19 471.16 315.39 528.26 332.6 528.76 257.59"
fill="#3ad29f"
/>
<polygon
points="146.81 142.12 146.81 217.62 471.16 315.39 474.5 241.19 146.81 142.12"
fill="#3ad29f"
/>
<polygon
points="528.76 257.59 474.5 241.19 471.16 315.39 528.26 332.6 528.76 257.59"
opacity={0.1}
/>
<polyline
points="488.29 283.75 497.17 297.07 514.94 274.86"
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={7}
/>
<g opacity={0.4}>
<line
x1={488.78}
y1={128.3}
x2={506.55}
y2={159.39}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={7}
/>
<line
x1={510.99}
y1={132.74}
x2={488.78}
y2={154.95}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={7}
/>
</g>
<polygon
points="528.76 390.83 474.5 374.43 471.16 448.63 528.26 465.84 528.76 390.83"
fill="#f5f5f5"
/>
<polygon
points="146.81 275.36 146.81 350.86 471.16 448.63 474.5 374.43 146.81 275.36"
fill="#f5f5f5"
/>
<polygon
points="528.76 390.83 474.5 374.43 471.16 448.63 528.26 465.84 528.76 390.83"
opacity={0.1}
/>
<g opacity={0.4}>
<line
x1={488.78}
y1={403.66}
x2={506.55}
y2={434.75}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={7}
/>
<line
x1={510.99}
y1={408.1}
x2={488.78}
y2={430.31}
fill="none"
stroke="#fff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={7}
/>
</g>
<ellipse cx={371.09} cy={243.78} rx={11.1} ry={22.21} opacity={0.3} />
<ellipse
cx={371.09}
cy={243.78}
rx={93.27}
ry={186.53}
fill={props.primaryColor}
opacity={0.1}
/>
<ellipse
cx={371.09}
cy={243.78}
rx={51.07}
ry={102.15}
fill="#fff"
opacity={0.1}
/>
<g opacity={0.5}>
<path
d="M697.44,306.14c-4.56-13.68-31.67,4.81-31.67,4.81l-2.23,3-48.19,65.14-118.07-66V283.58a41,41,0,0,0,35.89-47.73c5.94-2.29,10.78-7.23,15.24-12,4.11-4.37,8.51-9.67,8.09-15.49a10.77,10.77,0,0,0-.16-2.78c-.94-4.91-5.38-8.49-10.08-10.2s-9.78-2-14.69-3c-11.7-2.29-22.27-8.4-33.68-11.86a76.62,76.62,0,0,0-15.91-3c-3.87-.32-7.9-.32-11.44,1.27-3.88,1.75-6.69,5.17-9.81,8.08a44.64,44.64,0,0,1-12.86,8.37c-7.07,3-15,4.23-21.37,8.47a12.61,12.61,0,0,0-4.31,4.32,11.74,11.74,0,0,0-1.15,6.14,30.79,30.79,0,0,0,.42,5.56c1.12,7.84,2.41,15.87,6.38,22.72,3.24,5.6,8.09,10.06,12.85,14.44l10.71,9.82c2.17,2,4.57,4.46,7.37,5.45-.18-1.3.56-2.67,1.66-4l-3.47,24.26A70.26,70.26,0,0,0,437,289.27c-9.12-.11-18.35,1.54-22.34,7.75a8.62,8.62,0,0,0-.61,1.18c-12.57,14.92-41.38,63.24-24.44,180.6-1.45,14.36-2.32,23.45-2.32,23.45l.1,1.44-.1,1.09.2.16,9.43,129.57-18.24,127.7h4.05V776.4h-4.56v22.8s63.34-4.05,73-18.24c8-11.77-31.82-7.15-45.61-5.23V767h.25v-4.81h4.81l18.24-86.65C447.61,643.13,438,562,438,562l22.8,13.68L479,671,465.34,812.38h4.05v9.88h-5.32v22.8s63.34-4.05,73-18.24c8-11.77-31.8-7.15-45.59-5.23l-1.53-9.21h2.79L511,684.68c9-34.6-3.27-136.12-4.89-149.12L528.69,386.2l-.32-.43.32-2.11L619.9,415.6s9.12,9.12,18.5-18c8.76-25.34,32.79-59.31,35.9-63.64l.33-.46S702,319.82,697.44,306.14Z"
transform="translate(-316 -59.35)"
fill="url(#aaad421b-74ad-4e3c-867c-11df00873b04)"
/>
</g>
<polygon
points="70.81 691.85 70.81 714.05 93.02 714.05 93.02 682.97 70.81 691.85"
fill="#fda57d"
/>
<polygon
points="155.2 736.26 155.2 762.91 177.4 758.47 172.96 731.82 155.2 736.26"
fill="#fda57d"
/>
<path
d="M422.59,298.43s-53,39.72-26.89,195.17Z"
transform="translate(-316 -59.35)"
fill="#f55f44"
/>
<path
d="M422.59,298.43s-53,39.72-26.89,195.17Z"
transform="translate(-316 -59.35)"
opacity={0.05}
/>
<polygon
points="175.43 749.83 173.21 736.51 155.44 740.95 155.44 749.83 175.43 749.83"
opacity={0.05}
/>
<polygon
points="71.06 700.98 93.27 700.98 93.27 687.65 71.06 696.54 71.06 700.98"
opacity={0.05}
/>
<polygon
points="146.81 212.69 142.37 243.78 182.34 265.98 182.34 221.57 146.81 212.69"
fill="#fda57d"
/>
<path
d="M382.87,755.64l17.77-124.36-9.38-128.8,115.47,31.09S521,644.11,511.66,680.13L493.9,804.49H467.25l13.32-137.68L462.81,574,440.6,560.71s9.38,79-8.88,110.54L414,755.64Z"
transform="translate(-316 -59.35)"
fill={props.primaryColor}
/>
<path
d="M693.26,311.51c-4.44-13.32-30.84,4.69-30.84,4.69l-2.17,2.94,10.48,19.47.33-.45S697.7,324.83,693.26,311.51Z"
transform="translate(-316 -59.35)"
fill="#fda57d"
/>
<path
d="M462.31,300.65s-35.53-9.38-44.41,4.44S391.25,505,391.25,505s52.8,44.41,115.47,31.09l22.21-146.56Z"
transform="translate(-316 -59.35)"
opacity={0.05}
/>
<path
d="M613.32,382.57,472.94,304.13a70.08,70.08,0,0,0-33.29-9c-8.88-.11-17.87,1.5-21.75,7.54-8.88,13.82-26.65,199.86-26.65,199.86s52.8,44.41,115.47,31.09L528.93,387l88.83,31.09s8.88,8.88,18-17.52c8.53-24.68,31.93-57.75,35-62l-10.48-19.47Z"
transform="translate(-316 -59.35)"
fill="#f55f44"
/>
<path
d="M462.21,278.93a39.89,39.89,0,0,0,31.44,15.3,40.37,40.37,0,0,0,4.44-.25v-8.63l-35.53-8.88Z"
transform="translate(-316 -59.35)"
opacity={0.05}
/>
<circle cx={177.9} cy={190.48} r={39.97} fill="#fda57d" />
<path
d="M382.37,769.45v22.21s61.68-3.95,71.06-17.77-48.85-4.44-48.85-4.44Z"
transform="translate(-316 -59.35)"
fill="#333"
/>
<path
d="M466,814.11v22.21s61.68-3.95,71.06-17.77-48.85-4.44-48.85-4.44Z"
transform="translate(-316 -59.35)"
fill="#333"
/>
<path
d="M468.55,268.15l15.62-22.35c2.31-3.31,4.68-6.68,7.92-9.1s7.54-3.77,11.38-2.53c2.32.75,4.25,2.35,6.22,3.78,5.83,4.24,13,7.39,20.13,6.11,7.43-1.34,13.14-7.14,18.31-12.64,4.29-4.56,8.9-10.16,7.72-16.31-.92-4.78-5.24-8.26-9.82-9.93s-9.52-1.94-14.3-2.88c-11.39-2.23-21.69-8.18-32.8-11.55a74.61,74.61,0,0,0-15.5-3c-3.77-.31-7.7-.31-11.14,1.24-3.78,1.7-6.52,5-9.55,7.87A43.47,43.47,0,0,1,450.22,205c-6.88,2.94-14.57,4.12-20.81,8.25a12.28,12.28,0,0,0-4.19,4.21c-1.6,3-1.19,6.58-.71,9.92,1.09,7.63,2.34,15.45,6.21,22.12,3.16,5.45,7.87,9.8,12.52,14.06l10.43,9.57c2.11,1.94,4.45,4.34,7.18,5.31C460.36,275,466.58,271,468.55,268.15Z"
transform="translate(-316 -59.35)"
opacity={0.05}
/>
<path
d="M468.55,266.67l15.62-22.35c2.31-3.31,4.68-6.68,7.92-9.1s7.54-3.77,11.38-2.53c2.32.75,4.25,2.35,6.22,3.78,5.83,4.24,13,7.39,20.13,6.11,7.43-1.34,13.14-7.14,18.31-12.64,4.29-4.56,8.9-10.16,7.72-16.31-.92-4.78-5.24-8.26-9.82-9.93s-9.52-1.94-14.3-2.88c-11.39-2.23-21.69-8.18-32.8-11.55a74.61,74.61,0,0,0-15.5-3c-3.77-.31-7.7-.31-11.14,1.24-3.78,1.7-6.52,5-9.55,7.87a43.47,43.47,0,0,1-12.52,8.15c-6.88,2.94-14.57,4.12-20.81,8.25a12.28,12.28,0,0,0-4.19,4.21c-1.6,3-1.19,6.58-.71,9.92,1.09,7.63,2.34,15.45,6.21,22.12,3.16,5.45,7.87,9.8,12.52,14.06l10.43,9.57c2.11,1.94,4.45,4.34,7.18,5.31C460.36,273.53,466.58,269.48,468.55,266.67Z"
transform="translate(-316 -59.35)"
fill="#333"
/>
<g opacity={0.5}>
<rect x={3.45} y={110.29} width={1.48} height={8.39} fill="#47e6b1" />
<rect
x={319.45}
y={169.64}
width={1.48}
height={8.39}
transform="translate(178.03 -205.71) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={528.45} y={519.29} width={1.48} height={8.39} fill="#47e6b1" />
<rect
x={844.45}
y={578.64}
width={1.48}
height={8.39}
transform="translate(1112.03 -321.71) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={491.99} y={341.24} width={1.48} height={8.39} fill="#47e6b1" />
<rect
x={807.99}
y={400.58}
width={1.48}
height={8.39}
transform="translate(897.51 -463.3) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={428.83} y={511.98} width={1.48} height={8.39} fill="#47e6b1" />
<rect
x={744.83}
y={571.32}
width={1.48}
height={8.39}
transform="translate(1005.09 -229.4) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={384.42} y={619.06} width={1.48} height={8.39} fill="#47e6b1" />
<rect
x={700.42}
y={678.41}
width={1.48}
height={8.39}
transform="translate(1067.76 -77.9) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={66.62} y={240.07} width={1.48} height={8.39} fill="#47e6b1" />
<rect
x={382.62}
y={299.42}
width={1.48}
height={8.39}
transform="translate(370.97 -139.09) rotate(90)"
fill="#47e6b1"
/>
</g>
<path
d="M405.66,168.8a1.81,1.81,0,0,1-1-2.19.87.87,0,0,0,0-.2h0a.91.91,0,0,0-1.63-.6h0a.87.87,0,0,0-.1.18,1.81,1.81,0,0,1-2.19,1l-.2,0h0a.91.91,0,0,0-.6,1.63h0a.87.87,0,0,0,.18.1,1.81,1.81,0,0,1,1,2.19.87.87,0,0,0,0,.2h0a.91.91,0,0,0,1.63.6h0a.87.87,0,0,0,.1-.18,1.81,1.81,0,0,1,2.19-1l.2,0h0a.91.91,0,0,0,.6-1.63h0A.87.87,0,0,0,405.66,168.8Z"
transform="translate(-316 -59.35)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M738.85,94.61a1.81,1.81,0,0,1-1-2.19.87.87,0,0,0,0-.2h0a.91.91,0,0,0-1.63-.6h0a.87.87,0,0,0-.1.18,1.81,1.81,0,0,1-2.19,1l-.2,0h0a.91.91,0,0,0-.6,1.63h0a.87.87,0,0,0,.18.1,1.81,1.81,0,0,1,1,2.19.87.87,0,0,0,0,.2h0a.91.91,0,0,0,1.63.6h0a.87.87,0,0,0,.1-.18,1.81,1.81,0,0,1,2.19-1l.2,0h0a.91.91,0,0,0,.6-1.63h0A.87.87,0,0,0,738.85,94.61Z"
transform="translate(-316 -59.35)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M329.27,358.62a1.81,1.81,0,0,1-1-2.19.87.87,0,0,0,0-.2h0a.91.91,0,0,0-1.63-.6h0a.87.87,0,0,0-.1.18,1.81,1.81,0,0,1-2.19,1l-.2,0h0a.91.91,0,0,0-.6,1.63h0a.87.87,0,0,0,.18.1,1.81,1.81,0,0,1,1,2.19.87.87,0,0,0,0,.2h0a.91.91,0,0,0,1.63.6h0a.87.87,0,0,0,.1-.18,1.81,1.81,0,0,1,2.19-1l.2,0h0a.91.91,0,0,0,.6-1.63h0A.87.87,0,0,0,329.27,358.62Z"
transform="translate(-316 -59.35)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M342.59,545.15a1.81,1.81,0,0,1-1-2.19.87.87,0,0,0,0-.2h0a.91.91,0,0,0-1.63-.6h0a.87.87,0,0,0-.1.18,1.81,1.81,0,0,1-2.19,1l-.2,0h0a.91.91,0,0,0-.6,1.63h0a.87.87,0,0,0,.18.1,1.81,1.81,0,0,1,1,2.19.87.87,0,0,0,0,.2h0a.91.91,0,0,0,1.63.6h0a.87.87,0,0,0,.1-.18,1.81,1.81,0,0,1,2.19-1l.2,0h0a.91.91,0,0,0,.6-1.63h0A.87.87,0,0,0,342.59,545.15Z"
transform="translate(-316 -59.35)"
fill="#4d8af0"
opacity={0.5}
/>
<circle cx={248.71} cy={134.47} r={2.96} fill="#f55f44" opacity={0.5} />
<circle cx={328.65} cy={520.86} r={2.96} fill="#4d8af0" opacity={0.5} />
<circle cx={510.74} cy={214.41} r={2.96} fill="#4d8af0" opacity={0.5} />
<circle cx={564.04} cy={347.65} r={2.96} fill="#47e6b1" opacity={0.5} />
<circle cx={365.66} cy={11.6} r={2.96} fill="#f55f44" opacity={0.5} />
</svg>
);
UndrawChoose.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawChoose.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawChoose;