react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
461 lines (456 loc) • 10.4 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawLiveCollaboration = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="f196eae1-e898-45a8-a656-bd14eee244bb"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 862 703.19"
>
<defs>
<linearGradient
id="6ecfc04c-7de9-42bf-8023-074f3c1ddce3"
x1={232.86}
y1={449.06}
x2={232.86}
y2={19.38}
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="bdc54af5-8b94-492b-98e0-5080dd377cdf"
x1={303.14}
y1={548.35}
x2={303.14}
y2={118.67}
xlinkHref="#6ecfc04c-7de9-42bf-8023-074f3c1ddce3"
/>
<linearGradient
id="8b482bc2-deb5-441e-9998-0daf288500a0"
x1={730.3}
y1={703.19}
x2={730.3}
y2={444.62}
xlinkHref="#6ecfc04c-7de9-42bf-8023-074f3c1ddce3"
/>
<linearGradient
id="bb70749d-344b-49ee-9b57-98dd20ed6f29"
x1={732.71}
y1={258.57}
x2={732.71}
y2={0}
xlinkHref="#6ecfc04c-7de9-42bf-8023-074f3c1ddce3"
/>
</defs>
<title>live collaboration</title>
<g opacity={0.5}>
<rect
y={19.38}
width={465.71}
height={429.68}
rx={4.5}
ry={4.5}
fill="url(#6ecfc04c-7de9-42bf-8023-074f3c1ddce3)"
/>
</g>
<rect
x={5.68}
y={22.71}
width={454.97}
height={419.26}
rx={4.5}
ry={4.5}
fill="#f5f5f5"
/>
<rect
x={40.75}
y={91.77}
width={76.73}
height={69.06}
rx={4.5}
ry={4.5}
fill={props.primaryColor}
/>
<rect
x={140.49}
y={91.77}
width={305.02}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={140.49}
y={114.79}
width={305.02}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={33.07}
y={198.34}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={33.07}
y={221.35}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={33.07}
y={252.05}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={33.07}
y={275.06}
width={237.86}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={33.07}
y={305.68}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={33.07}
y={328.7}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={33.07}
y={359.39}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={33.07}
y={382.41}
width={237.86}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<g opacity={0.5}>
<rect
x={70.29}
y={118.67}
width={465.71}
height={429.68}
rx={4.5}
ry={4.5}
fill="url(#bdc54af5-8b94-492b-98e0-5080dd377cdf)"
/>
</g>
<rect
x={75.97}
y={122}
width={454.97}
height={419.26}
rx={4.5}
ry={4.5}
fill="#fff"
/>
<rect
x={111.03}
y={191.06}
width={76.73}
height={69.06}
rx={4.5}
ry={4.5}
fill={props.primaryColor}
/>
<rect
x={210.78}
y={191.06}
width={305.02}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={210.78}
y={214.08}
width={305.02}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={103.36}
y={297.63}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={103.36}
y={320.65}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={103.36}
y={351.34}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={103.36}
y={374.36}
width={237.86}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={103.36}
y={404.97}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={103.36}
y={427.99}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={103.36}
y={458.68}
width={412.44}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<rect
x={103.36}
y={481.7}
width={237.86}
height={7.67}
rx={3.44}
ry={3.44}
fill="#e0e0e0"
/>
<line
x1={536}
y1={276.74}
x2={540.36}
y2={272.62}
fill="none"
stroke="#535461"
strokeMiterlimit={10}
/>
<line
x1={549.5}
y1={263.97}
x2={709.45}
y2={112.61}
fill="none"
stroke="#535461"
strokeMiterlimit={10}
strokeDasharray="12.58 12.58"
/>
<line
x1={714.02}
y1={108.28}
x2={718.37}
y2={104.16}
fill="none"
stroke="#535461"
strokeMiterlimit={10}
/>
<line
x1={537.63}
y1={427.99}
x2={542.1}
y2={432}
fill="none"
stroke="#535461"
strokeMiterlimit={10}
/>
<line
x1={551.36}
y1={440.31}
x2={713.39}
y2={585.77}
fill="none"
stroke="#535461"
strokeMiterlimit={10}
strokeDasharray="12.44 12.44"
/>
<line
x1={718.02}
y1={589.93}
x2={722.48}
y2={593.93}
fill="none"
stroke="#535461"
strokeMiterlimit={10}
/>
<g opacity={0.5}>
<circle
cx={730.3}
cy={573.91}
r={129.29}
fill="url(#8b482bc2-deb5-441e-9998-0daf288500a0)"
/>
</g>
<circle cx={730.3} cy={573.2} r={126.56} fill="#f5f5f5" />
<path
d="M969.3,683c0,46.61-30.42,98.5-67.93,98.5s-67.93-51.9-67.93-98.5,30.42-70.27,67.93-70.27S969.3,636.38,969.3,683Z"
transform="translate(-169 -98.4)"
fill="#fdd835"
/>
<path
d="M899.66,798.54a126,126,0,0,0,69.57-20.82c-4.66-25.49-22.41-26.94-22.41-26.94H849s-16.75,1.38-22,24.82A126,126,0,0,0,899.66,798.54Z"
transform="translate(-169 -98.4)"
fill={props.primaryColor}
/>
<path
d="M709.61,621.29h39.14a0,0,0,0,1,0,0v33.34a17.54,17.54,0,0,1-17.54,17.54h-4.06a17.54,17.54,0,0,1-17.54-17.54V621.29A0,0,0,0,1,709.61,621.29Z"
opacity={0.1}
/>
<path
d="M713,619.84h32.45a3.35,3.35,0,0,1,3.35,3.35v30a17.54,17.54,0,0,1-17.54,17.54h-4.06a17.54,17.54,0,0,1-17.54-17.54v-30A3.35,3.35,0,0,1,713,619.84Z"
fill="#fdb797"
/>
<path
d="M878.68,734.48a56.33,56.33,0,0,0,39.14.11v-4.81H878.68Z"
transform="translate(-169 -98.4)"
opacity={0.1}
/>
<circle cx={729.33} cy={582.59} r={56.1} fill="#fdb797" />
<ellipse cx={674.38} cy={580.2} rx={5.22} ry={9.79} fill="#fdb797" />
<ellipse cx={783.98} cy={580.2} rx={5.22} ry={9.79} fill="#fdb797" />
<path
d="M848.61,650.56S880.37,694,953.07,679.15c0,0,8.12-9.88-11.65-40.23S866.61,613.51,848.61,650.56Z"
transform="translate(-169 -98.4)"
opacity={0.1}
/>
<path
d="M848.61,649.86s31.76,43.41,104.46,28.59c0,0,8.12-9.88-11.65-40.23S866.61,612.8,848.61,649.86Z"
transform="translate(-169 -98.4)"
fill="#fdd835"
/>
<g opacity={0.5}>
<circle
cx={732.71}
cy={129.29}
r={129.29}
fill="url(#bb70749d-344b-49ee-9b57-98dd20ed6f29)"
/>
</g>
<circle cx={732.97} cy={128.46} r={126.56} fill="#f5f5f5" />
<path
d="M902.07,353.92a126,126,0,0,0,69.57-20.82c-4.66-25.49-22.41-26.94-22.41-26.94H851.37s-16.75,1.38-22,24.82A126,126,0,0,0,902.07,353.92Z"
transform="translate(-169 -98.4)"
fill={props.primaryColor}
/>
<circle cx={731.74} cy={125.79} r={61.09} fill="#333" />
<path
d="M712,176.67h39.14a0,0,0,0,1,0,0V210a17.54,17.54,0,0,1-17.54,17.54h-4.06A17.54,17.54,0,0,1,712,210V176.67a0,0,0,0,1,0,0Z"
opacity={0.1}
/>
<path
d="M715.37,175.22h32.45a3.35,3.35,0,0,1,3.35,3.35v30a17.54,17.54,0,0,1-17.54,17.54h-4.06A17.54,17.54,0,0,1,712,208.57v-30A3.35,3.35,0,0,1,715.37,175.22Z"
fill="#fdb797"
/>
<path
d="M881.1,289.86a56.33,56.33,0,0,0,39.14.11v-4.81H881.1Z"
transform="translate(-169 -98.4)"
opacity={0.1}
/>
<circle cx={731.74} cy={137.97} r={56.1} fill="#fdb797" />
<path
d="M860.78,185.34s23.64,48,90.34,20.12l-15.53-24.35-27.53-9.88Z"
transform="translate(-169 -98.4)"
opacity={0.1}
/>
<path
d="M860.78,184.64s23.64,48,90.34,20.12L935.59,180.4l-27.53-9.88Z"
transform="translate(-169 -98.4)"
fill="#333"
/>
<path
d="M860.57,181.39a32.41,32.41,0,0,1,8-13.07c11-10.91,29.13-13.21,38.41-25.65a7.26,7.26,0,0,1-3.33,10.24c8.88-.06,19.19-.84,24.22-8.16a16.63,16.63,0,0,1-2.8,17.56c7.88.36,16.29,5.71,16.8,13.58.34,5.24-2.95,10.21-7.26,13.22s-9.52,4.39-14.66,5.52C905,197.94,850.79,211.79,860.57,181.39Z"
transform="translate(-169 -98.4)"
fill="#333"
/>
<ellipse cx={675.61} cy={137.92} rx={5.22} ry={9.79} fill="#fdb797" />
<ellipse cx={787.84} cy={137.92} rx={5.22} ry={9.79} fill="#fdb797" />
</svg>
);
UndrawLiveCollaboration.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawLiveCollaboration.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawLiveCollaboration;