react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
462 lines (457 loc) • 13.7 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawInvite = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="bc93702e-9e3d-488b-8c6f-4910573f82d1"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 882.5 556.13"
>
<defs>
<linearGradient
id="4ecd3756-64cd-47ff-b96c-dce8f877425a"
x1={209.37}
y1={265.13}
x2={209.37}
y2={27.29}
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="8f15d0d5-c117-4aad-857e-0c7138e5e23a"
x1={103.29}
y1={228.29}
x2={103.29}
y2={78.66}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="3d2aa3fc-0c73-4d42-9a51-d78d95a07141"
x1={654.37}
y1={265.13}
x2={654.37}
y2={27.29}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="f91046cd-033d-4517-bae5-e6b61a83324d"
x1={548.29}
y1={228.29}
x2={548.29}
y2={78.66}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="b3b6698a-3194-4713-bb46-64310bfa497b"
x1={654.37}
y1={556.13}
x2={654.37}
y2={318.29}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="32e4c411-7737-47d3-b669-1ea8184198c0"
x1={548.29}
y1={519.29}
x2={548.29}
y2={369.66}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="7f04db8b-1274-42f2-9ca5-b062e9d3c9fe"
x1={209.37}
y1={556.13}
x2={209.37}
y2={318.29}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="1e7e9987-f9b2-4264-ba70-426d8ac962b6"
x1={104.29}
y1={521.29}
x2={104.29}
y2={371.66}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="9f584a0f-a2fb-4ff6-966c-623fdcbeadf2"
x1={392.5}
y1={92.54}
x2={392.5}
y2={0.54}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="ac1b5815-3bd2-4516-a41c-fd8ca4dbf4ce"
x1={836.5}
y1={92.54}
x2={836.5}
y2={0.54}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="d0386195-2d92-4b9c-9761-18a93142f759"
x1={392.5}
y1={383.54}
x2={392.5}
y2={291.54}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="36b11c04-2bf4-4391-a651-19638634c305"
x1={836.5}
y1={383.54}
x2={836.5}
y2={291.54}
xlinkHref="#4ecd3756-64cd-47ff-b96c-dce8f877425a"
/>
<linearGradient
id="e2132acc-4e32-4f9b-96d9-c7e47a2e3c34"
x1={1055.14}
y1={751.86}
x2={1055.14}
y2={684.73}
gradientTransform="translate(-281.78 -566.72) rotate(-6.07)"
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.12} />
<stop offset={0.55} stopOpacity={0.09} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="d2dceb88-0ec5-492e-a90d-9f1121e9f486"
x1={1024.67}
y1={1038.24}
x2={1024.67}
y2={971.11}
xlinkHref="#e2132acc-4e32-4f9b-96d9-c7e47a2e3c34"
/>
<linearGradient
id="b36c9c81-0b29-456f-8646-ba332c851aad"
x1={581.17}
y1={991.06}
x2={581.17}
y2={923.93}
xlinkHref="#e2132acc-4e32-4f9b-96d9-c7e47a2e3c34"
/>
</defs>
<title>invite</title>
<rect
y={27.29}
width={418.74}
height={237.84}
fill="url(#4ecd3756-64cd-47ff-b96c-dce8f877425a)"
/>
<rect x={4.47} y={61.91} width={408.69} height={197.65} fill="#fff" />
<rect
x={32.38}
y={78.66}
width={141.81}
height={149.63}
fill="url(#8f15d0d5-c117-4aad-857e-0c7138e5e23a)"
/>
<rect x={36.85} y={82.01} width={134} height={142.93} fill="#e0e0e0" />
<rect
x={4.47}
y={31.76}
width={408.69}
height={30.15}
fill={props.primaryColor}
opacity={0.2}
/>
<rect x={225.56} y={123.88} width={155.21} height={10.05} fill="#e0e0e0" />
<rect x={225.56} y={166.31} width={155.21} height={10.05} fill="#f5f5f5" />
<rect
x={224.45}
y={145.1}
width={91.56}
height={10.05}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={224.45}
y={187.53}
width={62.53}
height={10.05}
fill="#69f0ae"
opacity={0.2}
/>
<rect x={298.14} y={187.53} width={62.53} height={10.05} fill="#69f0ae" />
<rect
x={445}
y={27.29}
width={418.74}
height={237.84}
fill="url(#3d2aa3fc-0c73-4d42-9a51-d78d95a07141)"
/>
<rect x={449.47} y={61.91} width={408.69} height={197.65} fill="#fff" />
<rect
x={477.38}
y={78.66}
width={141.81}
height={149.63}
fill="url(#f91046cd-033d-4517-bae5-e6b61a83324d)"
/>
<rect
x={481.85}
y={82.01}
width={134}
height={142.93}
fill={props.primaryColor}
opacity={0.8}
/>
<path
d="M745,310.38c-1-8.49-2.5-17-5.75-24.94s-8.47-15.24-15.74-19.75a18,18,0,0,0-8.7-3c-5.69-.2-10.95,3.64-13.88,8.52a39.74,39.74,0,0,0-2.59,5.27,12.27,12.27,0,0,0-10.18,11.24,31.28,31.28,0,0,0,4.42,59.06v5.33a31.39,31.39,0,0,0-23.45,30.27v14.52H731.7V382.35a31.39,31.39,0,0,0-23.45-30.27v-5.33a31.28,31.28,0,0,0,23.45-30.28c0-.07,0-.15,0-.22l3.52,7.83c3.35,7.46,6.78,15.46,5.47,23.54C747.11,336.63,746.58,323,745,310.38Z"
transform="translate(-158.75 -171.93)"
fill="#fff"
/>
<rect
x={449.47}
y={31.76}
width={408.69}
height={30.15}
fill={props.primaryColor}
opacity={0.2}
/>
<rect x={670.56} y={123.88} width={155.21} height={10.05} fill="#e0e0e0" />
<rect x={670.56} y={166.31} width={155.21} height={10.05} fill="#f5f5f5" />
<rect
x={669.45}
y={145.1}
width={91.56}
height={10.05}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={669.45}
y={187.53}
width={62.53}
height={10.05}
fill="#69f0ae"
opacity={0.2}
/>
<rect x={743.14} y={187.53} width={62.53} height={10.05} fill="#69f0ae" />
<rect
x={445}
y={318.29}
width={418.74}
height={237.84}
fill="url(#b3b6698a-3194-4713-bb46-64310bfa497b)"
/>
<rect x={449.47} y={352.91} width={408.69} height={197.65} fill="#fff" />
<rect
x={477.38}
y={369.66}
width={141.81}
height={149.63}
fill="url(#32e4c411-7737-47d3-b669-1ea8184198c0)"
/>
<rect
x={481.85}
y={373.01}
width={134}
height={142.93}
fill={props.primaryColor}
opacity={0.8}
/>
<rect
x={449.47}
y={322.76}
width={408.69}
height={30.15}
fill={props.primaryColor}
opacity={0.2}
/>
<rect x={670.56} y={414.88} width={155.21} height={10.05} fill="#e0e0e0" />
<rect x={670.56} y={457.31} width={155.21} height={10.05} fill="#f5f5f5" />
<rect
x={669.45}
y={436.1}
width={91.56}
height={10.05}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={669.45}
y={478.53}
width={62.53}
height={10.05}
fill="#69f0ae"
opacity={0.2}
/>
<rect x={743.14} y={478.53} width={62.53} height={10.05} fill="#69f0ae" />
<rect
y={318.29}
width={418.74}
height={237.84}
fill="url(#7f04db8b-1274-42f2-9ca5-b062e9d3c9fe)"
/>
<rect x={4.47} y={352.91} width={408.69} height={197.65} fill="#fff" />
<rect
x={33.38}
y={371.66}
width={141.81}
height={149.63}
fill="url(#1e7e9987-f9b2-4264-ba70-426d8ac962b6)"
/>
<rect
x={36.85}
y={373.01}
width={134}
height={142.93}
fill={props.primaryColor}
opacity={0.8}
/>
<rect
x={4.47}
y={322.76}
width={408.69}
height={30.15}
fill={props.primaryColor}
opacity={0.2}
/>
<rect x={225.56} y={414.88} width={155.21} height={10.05} fill="#e0e0e0" />
<rect x={225.56} y={457.31} width={155.21} height={10.05} fill="#f5f5f5" />
<rect
x={224.45}
y={436.1}
width={91.56}
height={10.05}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={224.45}
y={478.53}
width={62.53}
height={10.05}
fill="#69f0ae"
opacity={0.2}
/>
<rect x={298.14} y={478.53} width={62.53} height={10.05} fill="#69f0ae" />
<path
d="M270.25,644.53v-5.07a32,32,0,1,0-16,0v5.07a31.12,31.12,0,0,0-23,29.94v14h62v-14A31.12,31.12,0,0,0,270.25,644.53Z"
transform="translate(-158.75 -171.93)"
fill="#fff"
/>
<circle cx={103.5} cy={429.54} r={34} fill="#fff" />
<path
d="M296.16,603.83s-1.91,36.65,13.09,40.65c0,0-31,17-37-20Z"
transform="translate(-158.75 -171.93)"
fill="#fff"
/>
<path
d="M228.34,603.83s1.91,36.65-13.09,40.65c0,0,31,17,37-20Z"
transform="translate(-158.75 -171.93)"
fill="#fff"
/>
<path
d="M237,313.46a23.91,23.91,0,0,1-2.63-12.4,16.58,16.58,0,0,1,5.46-11.25c3.59-3.06,8.46-4.14,13.16-4.52s9.47-.15,14.1-1.06a29.47,29.47,0,0,0,18.82-12.76,39.63,39.63,0,0,1-.1,10.85c-.7,3.56-2.53,7.06-5.62,9,3.74-1.73,3.34,2.33,2.52,4.76,1.86,2.24,6.36,2.61,6.59,5.51a18.24,18.24,0,0,1-.94,8.57c-1.13,2.67.08,7.38-2.81,7.59"
transform="translate(-158.75 -171.93)"
fill="#fff"
stroke="#fff"
strokeMiterlimit={10}
/>
<path
d="M282.3,289.92s16.45,1.43,4.74,25.86"
transform="translate(-158.75 -171.93)"
fill="#fff"
/>
<path
d="M270.25,353.53v-5.07a32,32,0,1,0-16,0v5.07a31.12,31.12,0,0,0-23,29.94v14h62v-14A31.12,31.12,0,0,0,270.25,353.53Z"
transform="translate(-158.75 -171.93)"
fill="#fff"
/>
<path
d="M713.25,644.66v-5.07a32,32,0,1,0-16,0v5.07a31.12,31.12,0,0,0-23,29.94v14h62v-14A31.12,31.12,0,0,0,713.25,644.66Z"
transform="translate(-158.75 -171.93)"
fill="#fff"
/>
<circle cx={546.5} cy={432.54} r={34} fill="#fff" />
<path
d="M707.25,569c2.73-.68,5.59-1,8.14-2.18a13.29,13.29,0,0,0,7.53-11.87,23,23,0,0,1,3.37,6.66,7.17,7.17,0,0,1,.35,3.94,3.09,3.09,0,0,1-2.82,2.42c2.64.52,5.48,1,7.94-.06s4.08-4.45,2.41-6.56a20.09,20.09,0,0,1,3.74,5.35,6.8,6.8,0,0,1-.28,6.29c-1.51,2.26-4.55,2.9-7.27,2.85q3.59.22,7.2.18a6.92,6.92,0,0,0,3.88-.84c1.11-.76,1.68-2.46.8-3.48a16.16,16.16,0,0,1-2.93,17.57c-2.84,2.95-6.86,4.84-8.86,8.41-1.21,2.15-1.53,4.67-2.28,7a20.23,20.23,0,0,1-4.37,7.55,13.09,13.09,0,0,1-8.35,4.53c-4.47.34-8.6-2.48-11.66-5.76s-5.51-7.16-9-10c-5-4.1-12.26-5.07-16.95-9.37,2.69-5.06,8.69-10.07,13.06-13.76A41,41,0,0,1,707.25,569Z"
transform="translate(-158.75 -171.93)"
fill="#fff"
/>
<circle
cx={392.5}
cy={46.54}
r={46}
fill="url(#9f584a0f-a2fb-4ff6-966c-623fdcbeadf2)"
/>
<circle
cx={836.5}
cy={46.54}
r={46}
fill="url(#ac1b5815-3bd2-4516-a41c-fd8ca4dbf4ce)"
/>
<circle
cx={392.5}
cy={337.54}
r={46}
fill="url(#d0386195-2d92-4b9c-9761-18a93142f759)"
/>
<circle
cx={836.5}
cy={337.54}
r={46}
fill="url(#36b11c04-2bf4-4391-a651-19638634c305)"
/>
<circle cx={392.5} cy={46.54} r={42} fill="#fff" />
<circle cx={392.5} cy={337.54} r={42} fill="#fff" />
<circle cx={836.5} cy={337.54} r={42} fill="#fff" />
<circle cx={836.5} cy={46.54} r={42} fill="#fff" />
<polygon
points="878.53 9.18 863.8 0 835.49 45.15 816.36 33.39 806.84 48.63 834.64 65.45 834.64 65.45 841.56 69.87 878.53 9.18"
fill="url(#e2132acc-4e32-4f9b-96d9-c7e47a2e3c34)"
/>
<polygon
points="877.51 9.03 864.17 0.93 836.18 47 816.56 35.08 808.45 48.42 834.74 64.36 834.74 64.36 841.47 68.35 877.51 9.03"
fill={props.primaryColor}
/>
<polygon
points="878.53 297.18 863.8 288 835.49 333.15 816.36 321.39 806.84 336.63 834.64 353.45 834.64 353.45 841.56 357.87 878.53 297.18"
fill="url(#d2dceb88-0ec5-492e-a90d-9f1121e9f486)"
/>
<polygon
points="877.51 297.03 864.17 288.93 836.18 335 816.56 323.08 808.45 336.42 834.74 352.36 834.74 352.36 841.47 356.35 877.51 297.03"
fill={props.primaryColor}
/>
<polygon
points="432.53 297.18 417.8 288 389.49 333.15 370.36 321.39 360.84 336.63 388.64 353.45 388.64 353.45 395.56 357.87 432.53 297.18"
fill="url(#b36c9c81-0b29-456f-8646-ba332c851aad)"
/>
<polygon
points="431.51 297.03 418.17 288.93 390.18 335 370.56 323.08 362.45 336.42 388.74 352.36 388.74 352.36 395.47 356.35 431.51 297.03"
fill={props.primaryColor}
/>
</svg>
);
UndrawInvite.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawInvite.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawInvite;