react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
257 lines (252 loc) • 9.97 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawTaken = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="e0c1ea27-b4e7-4ca1-b144-c0c936b4df46"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 840 726.85"
>
<defs>
<linearGradient
id="de492013-7248-41f1-a809-7301715ead81"
x1={432}
y1={245.78}
x2={432}
y2={18.85}
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="8ef78946-d1b0-4a41-b2e2-27d6db9ac91c"
x1={453.55}
y1={1916.01}
x2={453.55}
y2={1730.58}
gradientTransform="translate(752.71 -1245.02) rotate(18.6)"
xlinkHref="#de492013-7248-41f1-a809-7301715ead81"
/>
<linearGradient
id="d2865f0b-6f85-4966-bcf2-b27595edda97"
y1={268.56}
y2={249.03}
xlinkHref="#de492013-7248-41f1-a809-7301715ead81"
/>
<linearGradient
id="8d90b1e5-2ec3-4e15-bced-2c86542980b4"
y1={258.09}
y2={103.27}
xlinkHref="#de492013-7248-41f1-a809-7301715ead81"
/>
</defs>
<title>taken</title>
<g opacity={0.8}>
<ellipse
cx={432}
cy={132.31}
rx={146.46}
ry={113.46}
fill="url(#de492013-7248-41f1-a809-7301715ead81)"
/>
</g>
<ellipse cx={432} cy={132.31} rx={143.21} ry={110.94} fill={props.primaryColor} />
<path
d="M491.94,231.21c0-61.27,64.12-110.94,143.21-110.94A175.52,175.52,0,0,1,706.5,135c-25.17-17-58.1-27.34-94.14-27.34-79.09,0-143.21,49.67-143.21,110.94,0,41.14,28.91,77.06,71.85,96.21C510.94,294.48,491.94,264.57,491.94,231.21Z"
transform="translate(-180 -86.57)"
fill="#fff"
opacity={0.1}
/>
<polygon
points="432 176.9 590.76 451.88 749.52 726.85 432 726.85 114.48 726.85 273.24 451.88 432 176.9"
fill={props.primaryColor}
opacity={0.2}
/>
<g opacity={0.3}>
<path
d="M649.67,652.79,662,616.2a62.65,62.65,0,0,0-23.2-70.89l.1-.06a61.91,61.91,0,0,0-15.79-8h0l-.17-.05-.19-.07h0a61.93,61.93,0,0,0-16.9-3.18q-3.07-.14-6.12,0a62.33,62.33,0,0,0-10.48,1.45q-1.47.33-2.92.74t-2.88.87q-2.85.94-5.6,2.15-1.37.6-2.72,1.27a63.19,63.19,0,0,0-7.75,4.56q-1.24.85-2.43,1.76a61.94,61.94,0,0,0-21.24,29.6l-19.36,57.55a61.83,61.83,0,0,0-2.68,28.12q.3,2.18.74,4.32t1,4.24q.39,1.4.85,2.78.69,2.07,1.52,4.08.55,1.34,1.16,2.66,1.23,2.63,2.69,5.14t3.15,4.88q1.27,1.77,2.66,3.46,1.85,2.25,3.92,4.33a61.81,61.81,0,0,0,21,13.88h0v0l.34.14a21.53,21.53,0,0,1,1.4-2.18c3-4.1,8.22-7,13.19-5.92.36.08.72.18,1.08.3,2.52.89,5,2.47,7.43,3.26a6.66,6.66,0,0,0,5.61-.07c4.85-2.59,3.05-10.76,7.23-14.35a6.22,6.22,0,0,1,.6-.45l-.16-.24c3.21-2,7.68-.67,11.39.63,4,1.4,9.22,2.35,12-.92,1.88-2.24,1.75-5.65,3.53-8,2.08-2.7,6-3,9.39-2.52,1.79.28,12.84,13,21.39,8.77C641,678.54,648.59,656,649.67,652.79Z"
transform="translate(-180 -86.57)"
fill="url(#8ef78946-d1b0-4a41-b2e2-27d6db9ac91c)"
/>
</g>
<path
d="M563.21,706.78c2.92-4,7.93-6.8,12.73-5.71s9.35,5.66,13.63,3.37c4.68-2.5,2.95-10.39,7-13.84,3.13-2.68,7.87-1.3,11.76.05s8.9,2.27,11.55-.88c1.81-2.16,1.69-5.45,3.41-7.69,2-2.6,5.82-2.93,9.06-2.43,1.73.27,12.39,12.56,20.64,8.47-13.35-11.36-6-33.12-5-36.21l11.88-35.3A60.39,60.39,0,0,0,622,540.34h0a60.39,60.39,0,0,0-76.27,37.87L527,633.73a60.41,60.41,0,0,0,34.83,75.15A20.78,20.78,0,0,1,563.21,706.78Z"
transform="translate(-180 -86.57)"
fill="#fff"
/>
<circle
cx={585.35}
cy={572.65}
r={6.51}
transform="translate(-324.07 858.26) rotate(-71.4)"
opacity={0.2}
/>
<circle
cx={622.37}
cy={585.11}
r={6.51}
transform="translate(-310.66 901.83) rotate(-71.4)"
opacity={0.2}
/>
<ellipse
cx={595.55}
cy={603.56}
rx={9.76}
ry={6.51}
transform="translate(-346.41 888.98) rotate(-71.4)"
fill="#e0e0e0"
/>
<circle
cx={732.53}
cy={574.09}
r={9.76}
transform="translate(-225.19 998.74) rotate(-71.4)"
fill="#fff"
/>
<circle
cx={763.45}
cy={558.74}
r={4.88}
transform="translate(-189.58 1017.58) rotate(-71.4)"
fill="#fff"
/>
<g opacity={0.8}>
<rect
x={334.36}
y={249.03}
width={195.28}
height={19.53}
fill="url(#d2865f0b-6f85-4966-bcf2-b27595edda97)"
/>
</g>
<rect x={334.36} y={245.78} width={195.28} height={19.53} fill="#e0e0e0" />
<path
d="M749.52,186a87.33,87.33,0,0,1,2.8,21.92c0,61.27-64.12,110.94-143.21,110.94C544.38,318.9,489.69,285.64,472,240c13.14,50.77,71,89,140.41,89,79.09,0,143.21-49.67,143.21-110.94A88.06,88.06,0,0,0,749.52,186Z"
transform="translate(-180 -86.57)"
opacity={0.1}
/>
<g opacity={0.8}>
<ellipse
cx={432}
cy={180.68}
rx={296.18}
ry={77.41}
fill="url(#8d90b1e5-2ec3-4e15-bced-2c86542980b4)"
/>
</g>
<path
d="M612,192.4c-158.18,0-286.42,33.52-286.42,74.86H898.42C898.42,225.91,770.18,192.4,612,192.4Z"
transform="translate(-180 -86.57)"
fill="#fff"
/>
<path
d="M612,342.11c158.18,0,286.42-33.52,286.42-74.86H325.58C325.58,308.6,453.82,342.11,612,342.11Z"
transform="translate(-180 -86.57)"
fill="#fff"
/>
<path
d="M612,342.11c158.18,0,286.42-33.52,286.42-74.86H325.58C325.58,308.6,453.82,342.11,612,342.11Z"
transform="translate(-180 -86.57)"
opacity={0.05}
/>
<rect
x={295.3}
y={161.15}
width={273.4}
height={39.06}
rx={17.22}
ry={17.22}
opacity={0.05}
/>
<path
d="M313.89,144.38a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,313.89,144.38Z"
transform="translate(-180 -86.57)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M822.89,450.38a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,822.89,450.38Z"
transform="translate(-180 -86.57)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M260.89,592.38a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,260.89,592.38Z"
transform="translate(-180 -86.57)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M205.89,261.38a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,205.89,261.38Z"
transform="translate(-180 -86.57)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M812.89,93.38a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0A1.84,1.84,0,0,0,801.34,93h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,807,99.23h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,812.89,93.38Z"
transform="translate(-180 -86.57)"
fill="#4d8af0"
opacity={0.5}
/>
<g opacity={0.5}>
<rect x={110} y={257.85} width={3} height={17} fill="#47e6b1" />
<rect
x={290}
y={344.43}
width={3}
height={17}
transform="translate(464.43 -25.15) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={830} y={177.85} width={3} height={17} fill="#47e6b1" />
<rect
x={1010}
y={264.43}
width={3}
height={17}
transform="translate(1104.43 -825.15) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={730} y={456.85} width={3} height={17} fill="#47e6b1" />
<rect
x={910}
y={543.43}
width={3}
height={17}
transform="translate(1283.43 -446.15) rotate(90)"
fill="#47e6b1"
/>
</g>
<circle cx={723} cy={81.85} r={6} fill="#f55f44" opacity={0.5} />
<circle cx={6} cy={12.85} r={6} fill="#f55f44" opacity={0.5} />
<circle cx={186} cy={357.85} r={6} fill="#f55f44" opacity={0.5} />
</svg>
);
UndrawTaken.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawTaken.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawTaken;