react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
441 lines (436 loc) • 13 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawCollaboration = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="54fcc2f7-53e7-45d8-a841-dc7d14505feb"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1038.87 810.47"
>
<defs>
<linearGradient
id="27465f25-9408-49a9-9216-48a6ce9c70a8"
x1={534.92}
y1={810.47}
x2={534.92}
y2={222.47}
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="e91042cb-24ea-45b7-b114-6b1d04bb7f08"
x1={717.42}
y1={294.47}
x2={717.42}
y2={230.47}
xlinkHref="#27465f25-9408-49a9-9216-48a6ce9c70a8"
/>
<linearGradient
id="9cf8e098-6faf-4a73-b831-ba42ba092f0c"
x1={395.42}
y1={397.47}
x2={395.42}
y2={329.47}
xlinkHref="#27465f25-9408-49a9-9216-48a6ce9c70a8"
/>
<linearGradient
id="21bcc3e4-cd05-4d2e-b95d-9c2cbf890a58"
x1={395.42}
y1={535.47}
x2={395.42}
y2={467.47}
xlinkHref="#27465f25-9408-49a9-9216-48a6ce9c70a8"
/>
<linearGradient
id="4d853afe-cdcc-4858-a900-820b5357492d"
x1={395.42}
y1={673.47}
x2={395.42}
y2={605.47}
xlinkHref="#27465f25-9408-49a9-9216-48a6ce9c70a8"
/>
<linearGradient
id="d1e401fd-77b8-4ce0-9bb7-4c75914a74e3"
x1={908.9}
y1={430.51}
x2={908.9}
y2={279}
xlinkHref="#27465f25-9408-49a9-9216-48a6ce9c70a8"
/>
<linearGradient
id="d4f55a51-6681-4e20-af66-41db58e2378f"
x1={540.9}
y1={151.51}
x2={540.9}
y2={0}
xlinkHref="#27465f25-9408-49a9-9216-48a6ce9c70a8"
/>
<linearGradient
id="fbbf67ca-fbff-4142-84f8-518d9367c25b"
x1={179.9}
y1={645.51}
x2={179.9}
y2={494}
xlinkHref="#27465f25-9408-49a9-9216-48a6ce9c70a8"
/>
</defs>
<title>collaboration2</title>
<g opacity={0.5}>
<polygon
points="755.41 810.47 314.42 810.47 314.42 222.47 685.42 222.47 755.41 294.47 755.41 810.47"
fill="url(#27465f25-9408-49a9-9216-48a6ce9c70a8)"
/>
</g>
<polygon
points="752.41 801.47 319.42 801.47 319.42 226.47 685.75 226.47 752.41 291.47 752.41 801.47"
fill="#fff"
/>
<g opacity={0.5}>
<polygon
points="682.41 294.47 682.41 230.47 688.17 230.47 752.41 294.47 682.41 294.47"
fill="url(#e91042cb-24ea-45b7-b114-6b1d04bb7f08)"
/>
</g>
<polygon
points="685.41 291.47 685.41 226.47 752.41 291.47 685.41 291.47"
fill="#fafafa"
/>
<g opacity={0.5}>
<circle
cx={395.42}
cy={363.47}
r={34}
fill="url(#9cf8e098-6faf-4a73-b831-ba42ba092f0c)"
/>
</g>
<circle cx={395.42} cy={363.47} r={32} fill="#69f0ae" />
<g opacity={0.5}>
<circle
cx={395.42}
cy={501.47}
r={34}
fill="url(#21bcc3e4-cd05-4d2e-b95d-9c2cbf890a58)"
/>
</g>
<circle cx={395.42} cy={501.47} r={32} fill="#e0e0e0" />
<g opacity={0.5}>
<circle
cx={395.42}
cy={639.47}
r={34}
fill="url(#4d853afe-cdcc-4858-a900-820b5357492d)"
/>
</g>
<circle cx={395.42} cy={639.47} r={32} fill="#e0e0e0" />
<rect x={474.42} y={351.47} width={86} height={6} fill="#e0e0e0" />
<rect x={474.42} y={360.47} width={142} height={6} fill="#e0e0e0" />
<rect x={474.42} y={369.47} width={132} height={6} fill="#e0e0e0" />
<rect x={474.42} y={489.47} width={86} height={6} fill="#e0e0e0" />
<rect x={474.42} y={498.47} width={142} height={6} fill="#e0e0e0" />
<rect x={474.42} y={507.47} width={132} height={6} fill="#e0e0e0" />
<rect x={474.42} y={627.47} width={86} height={6} fill="#e0e0e0" />
<rect x={474.42} y={636.47} width={142} height={6} fill="#e0e0e0" />
<rect x={474.42} y={645.47} width={132} height={6} fill="#e0e0e0" />
<polygon
points="383.42 361.47 395.42 372.47 412.42 347.47 418.42 352.47 395.42 382.47 378.42 363.47 383.42 361.47"
fill="#fff"
/>
<polygon
points="383.42 498.47 395.42 509.47 412.42 484.47 418.42 489.47 395.42 519.47 378.42 500.47 383.42 498.47"
fill="#fff"
/>
<polygon
points="383.42 635.47 395.42 646.47 412.42 621.47 418.42 626.47 395.42 656.47 378.42 637.47 383.42 635.47"
fill="#fff"
/>
<g opacity={0.5}>
<rect
x={837.88}
y={279}
width={142.04}
height={151.51}
rx={41.07}
ry={41.07}
fill="url(#d1e401fd-77b8-4ce0-9bb7-4c75914a74e3)"
/>
</g>
<rect
x={841.51}
y={282.41}
width={134}
height={142.93}
rx={41.07}
ry={41.07}
fill={props.primaryColor}
/>
<path
d="M996.73,426.77V421.7a32,32,0,1,0-16,0v5.07a31.12,31.12,0,0,0-23,29.94v14h62v-14A31.12,31.12,0,0,0,996.73,426.77Z"
transform="translate(-80.56 -44.76)"
fill="#fff"
/>
<circle cx={908.17} cy={338.95} r={34} fill="#fff" />
<path
d="M1022.64,386.06s-1.91,36.65,13.09,40.65c0,0-31,17-37-20Z"
transform="translate(-80.56 -44.76)"
fill="#fff"
/>
<path
d="M954.82,386.06s1.91,36.65-13.09,40.65c0,0,31,17,37-20Z"
transform="translate(-80.56 -44.76)"
fill="#fff"
/>
<g opacity={0.5}>
<rect
x={469.88}
width={142.04}
height={151.51}
rx={41.07}
ry={41.07}
fill="url(#d4f55a51-6681-4e20-af66-41db58e2378f)"
/>
</g>
<rect
x={473.9}
y={4.29}
width={134}
height={142.93}
rx={41.07}
ry={41.07}
fill={props.primaryColor}
/>
<path
d="M666.5,105.61c-1-8.49-2.5-17-5.75-24.94S652.28,65.44,645,60.92a18,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.24A31.28,31.28,0,0,0,614.09,142v5.33a31.39,31.39,0,0,0-23.45,30.27V192.1h62.53V177.59a31.39,31.39,0,0,0-23.45-30.27V142a31.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.54C668.59,131.87,668.06,118.25,666.5,105.61Z"
transform="translate(-80.56 -44.76)"
fill="#fff"
/>
<g opacity={0.5}>
<rect
x={108.88}
y={494}
width={142.04}
height={151.51}
rx={41.07}
ry={41.07}
fill="url(#fbbf67ca-fbff-4142-84f8-518d9367c25b)"
/>
</g>
<rect
x={112.9}
y={498.29}
width={134}
height={142.93}
rx={41.07}
ry={41.07}
fill={props.primaryColor}
/>
<path
d="M234.45,602.7a23.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(-80.56 -44.76)"
fill="#fff"
stroke="#fff"
strokeMiterlimit={10}
/>
<path
d="M279.78,579.16s16.45,1.43,4.74,25.86"
transform="translate(-80.56 -44.76)"
fill="#fff"
/>
<path
d="M267.73,642.77V637.7a32,32,0,1,0-16,0v5.07a31.12,31.12,0,0,0-23,29.94v14h62v-14A31.12,31.12,0,0,0,267.73,642.77Z"
transform="translate(-80.56 -44.76)"
fill="#fff"
/>
<line
x1={178.92}
y1={451.47}
x2={178.92}
y2={445.47}
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={178.92}
y1={433.47}
x2={178.92}
y2={103.47}
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="12 12"
/>
<polyline
points="178.91 97.47 178.91 91.47 184.91 91.47"
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={196.77}
y1={91.47}
x2={427.99}
y2={91.47}
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="11.86 11.86"
/>
<line
x1={433.92}
y1={91.47}
x2={439.92}
y2={91.47}
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={651.92}
y1={91.47}
x2={657.92}
y2={91.47}
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={669.78}
y1={91.47}
x2={924.98}
y2={91.47}
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="11.87 11.87"
/>
<polyline
points="930.91 91.47 936.91 91.47 936.91 97.47"
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={936.92}
y1={110.2}
x2={936.92}
y2={231.11}
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="12.73 12.73"
/>
<line
x1={936.92}
y1={237.47}
x2={936.92}
y2={243.47}
fill="none"
stroke="#cfd8dc"
strokeMiterlimit={10}
strokeWidth={2}
/>
<rect
x={82.42}
y={587.17}
width={10.12}
height={10.12}
transform="translate(227.27 -9.16) rotate(30)"
fill="#69f0ae"
opacity={0.3}
/>
<rect
x={781.42}
y={89.17}
width={10.12}
height={10.12}
transform="translate(71.92 -425.38) rotate(30)"
fill="#69f0ae"
opacity={0.3}
/>
<rect
x={300.42}
y={734.17}
width={10.12}
height={10.12}
transform="translate(329.98 -98.46) rotate(30)"
fill="#4d8af0"
opacity={0.3}
/>
<rect
x={869.42}
y={244.17}
width={10.12}
height={10.12}
transform="translate(161.21 -448.61) rotate(30)"
fill="#4d8af0"
opacity={0.3}
/>
<circle cx={831.92} cy={667.47} r={6} fill="#69f0ae" opacity={0.3} />
<circle cx={261.92} cy={262.47} r={6} fill="#69f0ae" opacity={0.3} />
<circle cx={873.92} cy={533.47} r={6} fill="#ff5252" opacity={0.3} />
<path
d="M1115.43,89.65h0a2.05,2.05,0,0,0,2,1.42h0a2.05,2.05,0,0,1,1.21,3.71h0a2.05,2.05,0,0,0-.75,2.29h0a2.05,2.05,0,0,1-3.16,2.29h0a2.05,2.05,0,0,0-2.41,0h0a2.05,2.05,0,0,1-3.16-2.29h0a2.05,2.05,0,0,0-.75-2.29h0a2.05,2.05,0,0,1,1.21-3.71h0a2.05,2.05,0,0,0,2-1.42h0A2.05,2.05,0,0,1,1115.43,89.65Z"
transform="translate(-80.56 -44.76)"
fill="#ff5252"
opacity={0.3}
/>
<path
d="M350.43,556.65h0a2.05,2.05,0,0,0,2,1.42h0a2.05,2.05,0,0,1,1.21,3.71h0a2.05,2.05,0,0,0-.75,2.29h0a2.05,2.05,0,0,1-3.16,2.29h0a2.05,2.05,0,0,0-2.41,0h0a2.05,2.05,0,0,1-3.16-2.29h0a2.05,2.05,0,0,0-.75-2.29h0a2.05,2.05,0,0,1,1.21-3.71h0a2.05,2.05,0,0,0,2-1.42h0A2.05,2.05,0,0,1,350.43,556.65Z"
transform="translate(-80.56 -44.76)"
fill="#ff5252"
opacity={0.3}
/>
<path
d="M216.43,120.65h0a2.05,2.05,0,0,0,2,1.42h0a2.05,2.05,0,0,1,1.21,3.71h0a2.05,2.05,0,0,0-.75,2.29h0a2.05,2.05,0,0,1-3.16,2.29h0a2.05,2.05,0,0,0-2.41,0h0a2.05,2.05,0,0,1-3.16-2.29h0a2.05,2.05,0,0,0-.75-2.29h0a2.05,2.05,0,0,1,1.21-3.71h0a2.05,2.05,0,0,0,2-1.42h0A2.05,2.05,0,0,1,216.43,120.65Z"
transform="translate(-80.56 -44.76)"
fill="#ff5252"
opacity={0.3}
/>
<path
d="M511.43,53.65h0a2.05,2.05,0,0,0,2,1.42h0a2.05,2.05,0,0,1,1.21,3.71h0a2.05,2.05,0,0,0-.75,2.29h0a2.05,2.05,0,0,1-3.16,2.29h0a2.05,2.05,0,0,0-2.41,0h0a2.05,2.05,0,0,1-3.16-2.29h0a2.05,2.05,0,0,0-.75-2.29h0a2.05,2.05,0,0,1,1.21-3.71h0a2.05,2.05,0,0,0,2-1.42h0A2.05,2.05,0,0,1,511.43,53.65Z"
transform="translate(-80.56 -44.76)"
fill="#4d8af0"
opacity={0.3}
/>
<path
d="M1068.43,331.65h0a2.05,2.05,0,0,0,2,1.42h0a2.05,2.05,0,0,1,1.21,3.71h0a2.05,2.05,0,0,0-.75,2.29h0a2.05,2.05,0,0,1-3.16,2.29h0a2.05,2.05,0,0,0-2.41,0h0a2.05,2.05,0,0,1-3.16-2.29h0a2.05,2.05,0,0,0-.75-2.29h0a2.05,2.05,0,0,1,1.21-3.71h0a2.05,2.05,0,0,0,2-1.42h0A2.05,2.05,0,0,1,1068.43,331.65Z"
transform="translate(-80.56 -44.76)"
fill="#4d8af0"
opacity={0.3}
/>
</svg>
);
UndrawCollaboration.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawCollaboration.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawCollaboration;