react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
515 lines (510 loc) • 11.3 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawDesignProcess = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="945b7132-8e73-4adf-a4b9-6bcbaa5f7538"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1016.95 779.71"
>
<defs>
<linearGradient
id="f2a8c623-59d2-4818-b55b-e57e9767e514"
x1={196.28}
y1={438.84}
x2={196.28}
y2={60.65}
gradientTransform="translate(-91.51 -60.66)"
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="f68435eb-6090-4c29-82cb-c22589dfd1c9"
x1={600.14}
y1={614.06}
x2={600.14}
y2={235.88}
xlinkHref="#f2a8c623-59d2-4818-b55b-e57e9767e514"
/>
<linearGradient
id="4eed950e-2415-43cc-9759-afeb007b071d"
x1={1003.72}
y1={788.45}
x2={1003.72}
y2={410.27}
xlinkHref="#f2a8c623-59d2-4818-b55b-e57e9767e514"
/>
</defs>
<title>design process</title>
<rect
width={209.52}
height={378.19}
rx={7.96}
ry={7.96}
fill="url(#f2a8c623-59d2-4818-b55b-e57e9767e514)"
/>
<rect
x={2.84}
y={5.11}
width={203.86}
height={367.97}
rx={13.64}
ry={13.64}
fill="#fff"
/>
<path
d="M247.5,75A16.53,16.53,0,0,1,231.21,89H160.8A16.53,16.53,0,0,1,144.51,75h-37.3a7.74,7.74,0,0,0-7.74,7.74v334a7.74,7.74,0,0,0,7.74,7.74H285.36a7.74,7.74,0,0,0,7.74-7.74v-334A7.74,7.74,0,0,0,285.37,75Z"
transform="translate(-91.52 -60.64)"
fill="#fafafa"
/>
<rect
x={82.34}
y={18.74}
width={45.43}
height={2.84}
rx={1.42}
ry={1.42}
fill="#dbdbdb"
/>
<circle cx={137.42} cy={19.88} r={1.7} fill="#dbdbdb" />
<rect
x={403.86}
y={175.23}
width={209.52}
height={378.19}
rx={7.96}
ry={7.96}
fill="url(#f68435eb-6090-4c29-82cb-c22589dfd1c9)"
/>
<rect
x={406.69}
y={180.34}
width={203.86}
height={367.97}
rx={13.64}
ry={13.64}
fill="#fff"
/>
<path
d="M651.36,250.21a16.53,16.53,0,0,1-16.29,14.06H564.66a16.53,16.53,0,0,1-16.29-14.06h-37.3a7.74,7.74,0,0,0-7.74,7.74V592a7.74,7.74,0,0,0,7.74,7.74H689.21A7.74,7.74,0,0,0,697,592V258a7.74,7.74,0,0,0-7.74-7.74Z"
transform="translate(-91.52 -60.64)"
fill="#fafafa"
/>
<rect
x={486.19}
y={193.97}
width={45.43}
height={2.84}
rx={1.42}
ry={1.42}
fill="#dbdbdb"
/>
<circle cx={541.27} cy={195.11} r={1.7} fill="#dbdbdb" />
<g opacity={0.8}>
<polyline
points="495.93 291.91 495.93 297.91 489.93 297.91"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={480.63}
y1={297.91}
x2={448.09}
y2={297.91}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="9.3 9.3"
/>
<polyline
points="443.45 297.91 437.45 297.91 437.45 291.91"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={437.45}
y1={278.37}
x2={437.45}
y2={258.05}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="13.55 13.55"
/>
<polyline
points="437.45 251.28 437.45 245.28 443.45 245.28"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={452.74}
y1={245.28}
x2={485.28}
y2={245.28}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="9.3 9.3"
/>
<polyline
points="489.93 245.28 495.93 245.28 495.93 251.28"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={495.93}
y1={264.82}
x2={495.93}
y2={285.14}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="13.55 13.55"
/>
</g>
<g opacity={0.8}>
<polyline
points="583.01 490.77 583.01 496.77 577.01 496.77"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={567.71}
y1={496.77}
x2={535.17}
y2={496.77}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="9.3 9.3"
/>
<polyline
points="530.52 496.77 524.52 496.77 524.52 490.77"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={524.53}
y1={477.22}
x2={524.53}
y2={456.9}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="13.55 13.55"
/>
<polyline
points="524.52 450.13 524.52 444.13 530.52 444.13"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={539.82}
y1={444.13}
x2={572.36}
y2={444.13}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="9.3 9.3"
/>
<polyline
points="577.01 444.13 583.01 444.13 583.01 450.13"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={583.01}
y1={463.68}
x2={583.01}
y2={483.99}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray="13.55 13.55"
/>
</g>
<g opacity={0.8}>
<line
x1={437.12}
y1={325.53}
x2={583.34}
y2={325.53}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
<line
x1={437.12}
y1={354.78}
x2={583.34}
y2={354.78}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
<line
x1={437.12}
y1={384.02}
x2={583.34}
y2={384.02}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
<line
x1={437.12}
y1={413.26}
x2={583.34}
y2={413.26}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
</g>
<rect
x={807.43}
y={349.63}
width={209.52}
height={378.19}
rx={7.96}
ry={7.96}
fill="url(#4eed950e-2415-43cc-9759-afeb007b071d)"
/>
<rect
x={810.26}
y={354.74}
width={203.86}
height={367.97}
rx={13.64}
ry={13.64}
fill="#fff"
/>
<path
d="M1054.93,424.61a16.53,16.53,0,0,1-16.29,14.06H968.23a16.53,16.53,0,0,1-16.29-14.06h-37.3a7.74,7.74,0,0,0-7.74,7.74v334a7.74,7.74,0,0,0,7.74,7.74h178.15a7.74,7.74,0,0,0,7.74-7.74v-334a7.74,7.74,0,0,0-7.74-7.74Z"
transform="translate(-91.52 -60.64)"
fill="#fafafa"
/>
<rect
x={889.76}
y={368.37}
width={45.43}
height={2.84}
rx={1.42}
ry={1.42}
fill="#dbdbdb"
/>
<circle cx={944.84} cy={369.51} r={1.7} fill="#dbdbdb" />
<rect x={836.47} y={419.68} width={58.49} height={52.64} fill={props.primaryColor} />
<rect x={924.2} y={618.53} width={58.49} height={52.64} fill={props.primaryColor} />
<line
x1={836.47}
y1={502.86}
x2={982.68}
y2={502.86}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={836.47}
y1={532.1}
x2={982.68}
y2={532.1}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={836.47}
y1={561.34}
x2={982.68}
y2={561.34}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={836.47}
y1={590.59}
x2={982.68}
y2={590.59}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={2}
/>
<polyline
points="232.95 40.71 509.95 40.71 509.95 142.71"
fill="none"
stroke="#3ad29f"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
<polyline
points="508.95 590.71 508.95 778.71 912.95 778.71 912.95 746.71"
fill="none"
stroke="#3ad29f"
strokeMiterlimit={10}
strokeWidth={2}
strokeDasharray={12}
/>
<rect
x={205.48}
y={513.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={453.48}
y={58.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={115.48}
y={450.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={196.48}
y={675.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={421.48}
y={711.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={309.48}
y={310.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={723.48}
y={626.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={718.48}
y={261.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={560.48}
y={590.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={862.48}
y={117.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={628.48}
y={99.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
<rect
x={835.48}
y={747.36}
width={9}
height={9}
fill="#f55f44"
opacity={0.5}
/>
</svg>
);
UndrawDesignProcess.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawDesignProcess.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawDesignProcess;