react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
332 lines (327 loc) • 11 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawAgreement = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="196ecc45-c3c6-4b7d-8685-374129418fe3"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 885 856.96"
>
<defs>
<linearGradient
id="431b905b-f630-4d26-9705-072736e3fa0a"
x1={613.19}
y1={813.7}
x2={613.19}
y2={105.57}
gradientTransform="translate(-0.86 -10.23)"
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="82c9264e-9b45-4df5-9d25-f7dacbcab158"
x1={613.84}
y1={152.52}
x2={613.84}
y2={92.5}
gradientTransform="translate(-140.84 19.9)"
xlinkHref="#431b905b-f630-4d26-9705-072736e3fa0a"
/>
<linearGradient
id="e7f96ace-9b05-41bf-887d-5e87841d3793"
x1={613.84}
y1={104.78}
x2={613.84}
y2={33.84}
gradientTransform="translate(-136.32 285.71) rotate(-24.52)"
xlinkHref="#431b905b-f630-4d26-9705-072736e3fa0a"
/>
<linearGradient
id="0e5c1f30-7912-44d8-85da-be3b7e04fbbd"
x1={440.4}
y1={329.87}
x2={440.4}
y2={222.94}
gradientTransform="translate(-61.32 78.01)"
xlinkHref="#431b905b-f630-4d26-9705-072736e3fa0a"
/>
<linearGradient
id="f5898732-89b1-47b9-bad4-993f506fb52e"
x1={440.76}
y1={541.79}
x2={440.76}
y2={434.85}
gradientTransform="translate(26.6 58.74)"
xlinkHref="#431b905b-f630-4d26-9705-072736e3fa0a"
/>
<linearGradient
id="f9eac279-a8ac-46d5-97b7-7547b98d8743"
x1={440.4}
y1={302}
x2={440.4}
y2={249.51}
gradientTransform="translate(-293.43 264.79) rotate(-24.52)"
xlinkHref="#431b905b-f630-4d26-9705-072736e3fa0a"
/>
<linearGradient
id="56bc9504-3ea8-4a78-ad29-d599ef16b1a5"
x1={599.62}
y1={607.1}
x2={599.62}
y2={100.78}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#431b905b-f630-4d26-9705-072736e3fa0a"
/>
</defs>
<title>agreement</title>
<g opacity={0.5}>
<rect
x={356.07}
y={95.34}
width={512.51}
height={708.13}
transform="translate(-288.4 273.74) rotate(-24.52)"
fill="url(#431b905b-f630-4d26-9705-072736e3fa0a)"
/>
</g>
<rect
x={361.51}
y={100.79}
width={499.47}
height={692.48}
transform="translate(-287.52 273.08) rotate(-24.52)"
fill="#fff"
/>
<rect
x={349.12}
y={112.4}
width={247.78}
height={60.02}
transform="translate(-173.56 188.23) rotate(-24.52)"
fill="url(#82c9264e-9b45-4df5-9d25-f7dacbcab158)"
/>
<path
d="M436.21,61.74c-17.4,7.94-24.92,28.82-16.79,46.64s28.83,25.83,46.23,17.89,24.92-28.82,16.79-46.64S453.61,53.8,436.21,61.74Zm23.21,50.88a20.47,20.47,0,1,1,9.69-26.91A20.23,20.23,0,0,1,459.42,112.63Z"
transform="translate(-157.12 -20.92)"
fill="url(#e7f96ace-9b05-41bf-887d-5e87841d3793)"
/>
<rect
x={351.19}
y={112.55}
width={242.56}
height={57.38}
transform="translate(-173.12 187.91) rotate(-24.52)"
fill={props.primaryColor}
/>
<path
d="M437.29,64.12a33.91,33.91,0,1,0,44.92,16.78A33.91,33.91,0,0,0,437.29,64.12Zm22.19,48.65a19.56,19.56,0,1,1,9.68-25.92A19.56,19.56,0,0,1,459.48,112.76Z"
transform="translate(-157.12 -20.92)"
fill={props.primaryColor}
/>
<rect
x={325.61}
y={300.95}
width={106.94}
height={106.94}
transform="translate(-270.02 168.37) rotate(-24.52)"
fill="url(#0e5c1f30-7912-44d8-85da-be3b7e04fbbd)"
/>
<rect
x={413.89}
y={493.6}
width={106.94}
height={106.94}
transform="translate(-342.01 222.39) rotate(-24.52)"
fill="url(#f5898732-89b1-47b9-bad4-993f506fb52e)"
/>
<rect
x={329.52}
y={304.86}
width={99.11}
height={99.11}
transform="translate(-270.02 168.37) rotate(-24.52)"
fill="#69f0ae"
/>
<rect
x={416.66}
y={495.88}
width={99.11}
height={99.11}
transform="translate(-341.44 221.76) rotate(-24.52)"
fill={props.primaryColor}
/>
<rect
x={471.46}
y={260.92}
width={135.85}
height={9.48}
transform="translate(-218.73 226.9) rotate(-24.52)"
fill="#e0e0e0"
/>
<rect
x={473.37}
y={255.5}
width={224.31}
height={9.48}
transform="translate(-212.31 245.56) rotate(-24.52)"
fill="#e0e0e0"
/>
<rect
x={479.98}
y={271.71}
width={208.51}
height={9.48}
transform="translate(-219.16 246.49) rotate(-24.52)"
fill="#e0e0e0"
/>
<rect
x={558.6}
y={451.95}
width={135.85}
height={9.48}
transform="translate(-290.15 280.29) rotate(-24.52)"
fill="#e0e0e0"
/>
<rect
x={560.51}
y={446.52}
width={224.31}
height={9.48}
transform="translate(-283.73 298.95) rotate(-24.52)"
fill="#e0e0e0"
/>
<rect
x={567.12}
y={462.74}
width={208.51}
height={9.48}
transform="translate(-290.58 299.88) rotate(-24.52)"
fill="#e0e0e0"
/>
<polygon
points="199.04 337.46 222.26 345 229.9 300.31 241.2 303.4 228.49 358.65 193.47 343.3 199.04 337.46"
fill="url(#f9eac279-a8ac-46d5-97b7-7547b98d8743)"
/>
<polygon
points="202 336.87 222.19 343.42 228.83 304.56 238.65 307.25 227.6 355.29 197.15 341.95 202 336.87"
fill="#fff"
/>
<polygon
points="289.68 529.08 309.87 535.63 316.51 496.77 326.33 499.46 315.28 547.5 284.83 534.16 289.68 529.08"
fill="#fff"
/>
<rect
x={553.74}
y={615.49}
width={316.9}
height={105.63}
transform="translate(-370.25 334.93) rotate(-24.52)"
fill="#e0e0e0"
/>
<path
d="M792.63,631.1c-11.08-3.16-22.42-2.56-25.95,10.11-1.19,4.27-1.33,10.9-5.91,13.1-6.74,3.24-14.87-3.24-20.72-5.88-10.9-4.92-22.09-1.57-28.4,8.77-3.2,5.24-4.57,11.27-5.66,17.24-.47,2.59-.53,5.79-1.62,8.23-2.09,4.67-8.63,4.25-12.92,4.07-.94,0-1.9-.11-2.86-.21a25.33,25.33,0,0,0,4.8-16.13c-.28-9.47-6.43-19.83-17.18-18.67-9.63,1-16.41,10.3-15.33,19.71.92,8,6.13,14.2,12.81,18-3.28,1.45-6.78,2.58-9.88,4.08a41.43,41.43,0,0,0-4.21,2.35c-9.37-4.52-21.68-5.37-30.11-.76-4.08,2.23-1.1,8.86,3,6.61,6.42-3.51,13.5-2.63,20.21-.4l.56.2a18.06,18.06,0,0,0-1.75,2.71c-3.79,7.36,0,19,9.22,19.8,13,1.11,13.61-16.07,6.55-22.91-.3-.29-.6-.57-.92-.84,2.92-1.41,6.08-2.47,8.87-3.66a36.89,36.89,0,0,0,6.9-3.84l.5.13c9.93,2.25,25.43,2.95,29-9.08,3.06-10.44,3.35-32.61,19.85-30.56,6.73.83,12.25,6,18.65,7.87,5.73,1.71,12.36,1.78,17.06-2.44,3.88-3.48,4.75-8.62,5.94-13.42.61-2.48,1.21-5.44,3.23-7.21,3.65-3.19,9.68-1.31,13.75-.15C794.56,639.18,797.14,632.38,792.63,631.1Zm-129,84.59c-2.19,2.17-4.51.45-5.68-1.82-1.42-2.76-.81-5.48,1-7.91a13.74,13.74,0,0,1,.95-1.14C664.23,707.62,667.77,711.63,663.67,715.69Zm7.68-54c4.5-4.18,10.77-3.26,13.45,2.48s1.5,13.84-2.26,18.9a15.26,15.26,0,0,1-1.65,1.86,21.07,21.07,0,0,1-7.13-4.07C668.4,676.06,665.39,667.19,671.35,661.66Z"
transform="translate(-157.12 -20.92)"
fill={props.primaryColor}
/>
<path
d="M852.6,242.63l-80.72,31.47c-15.18-1.13-47.12-5.25-78.82-20.2-35.29-16.64-75.72-16.6-110,.83-79,1.89-122.48-8.23-145.68-17.81l6.12-12.56-81.82-31.9L157.12,100.78V476.54l71.59,31.9,38.4-92.12,84.33,39,16.19-41.14L423,455.27l3.77,3.17-5.19,5.39a27.06,27.06,0,0,0,0,37.21h0a24.64,24.64,0,0,0,35.8,0l-2.84,3a27.06,27.06,0,0,0,0,37.21h0a24.64,24.64,0,0,0,35.8,0l16.4-17.05h0L495.48,535.9a27.06,27.06,0,0,0,0,37.21h0a24.64,24.64,0,0,0,35.8,0l16.19-16.83h0l-6.81,7.08a18.9,18.9,0,0,0,0,26,17.21,17.21,0,0,0,25,0l10.8-11.22c18.55,13.55,33.56,23.44,40.91,26C648,614.76,648,593.49,648,593.49c40.91,21.26,61.37-21.26,61.37-21.26,51.14,21.26,51.14-31.9,51.14-31.9,12.78,8.86,22,4.8,28.44-3,8.77-10.58,9.84-25.51,3.82-37.49l48.88-45.17,21.14,43.22,84.33-39,38.4,85.13,56.55-25.25V146.94Z"
transform="translate(-157.12 -20.92)"
fill="url(#56bc9504-3ea8-4a78-ad29-d599ef16b1a5)"
/>
<polygon
points="681.9 418.48 592.88 497.6 523.65 369.02 681.9 329.46 681.9 418.48"
fill="#be7c5e"
/>
<path
d="M413.72,231.69s28.57,39.56,197.81,29.67l98.91,148.36,66.28,74.57c10.41,11.72,11,29.49.78,41.37-6.21,7.21-15.14,11-27.5,2.75,0,0,0,49.45-49.45,29.67,0,0-19.78,39.56-59.34,19.78,0,0,0,19.78-29.67,9.89S423.61,449.29,423.61,449.29l-69.23-49.45Z"
transform="translate(-157.12 -20.92)"
fill="#fda57d"
/>
<path
d="M769.78,281.15s-42.74,0-85-19.19c-38.43-17.43-83.18-15.21-118.64,7.67-28.9,18.65-53.94,49.53-53.47,100.53,0,0,38.46,39.56,79.12-39.56h29.67s28.57,98.91,108.8,89,98.91-19.78,98.91-19.78Z"
transform="translate(-157.12 -20.92)"
fill="#be7c5e"
/>
<rect
x={456.83}
y={463.57}
width={48.96}
height={76.93}
rx={22.21}
ry={22.21}
transform="translate(338.85 -214.21) rotate(45)"
fill="#be7c5e"
/>
<rect
x={424.96}
y={426.21}
width={48.96}
height={76.93}
rx={22.21}
ry={22.21}
transform="translate(303.09 -202.62) rotate(45)"
fill="#be7c5e"
/>
<rect
x={498.86}
y={487.27}
width={48.96}
height={83.92}
rx={22.21}
ry={22.21}
transform="translate(370.39 -235.97) rotate(45)"
fill="#be7c5e"
/>
<rect
x={540.04}
y={526.26}
width={34.19}
height={55.95}
rx={15.51}
ry={15.51}
transform="translate(397.97 -252.54) rotate(45)"
fill="#be7c5e"
/>
<polygon
points="780.8 438.26 691.79 477.82 602.77 260.23 681.9 230.56 780.8 438.26"
fill="#fff"
/>
<polygon
points="108.25 388.81 197.26 428.37 286.28 210.78 207.15 181.1 108.25 388.81"
fill="#fff"
/>
<polygon
points="9.34 92.09 207.15 181.1 78.58 477.82 9.34 448.15 9.34 92.09"
fill="#333"
/>
<polygon
points="879.71 141.54 681.9 230.56 810.48 527.27 879.71 497.6 879.71 141.54"
fill="#4d8af0"
/>
</svg>
);
UndrawAgreement.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawAgreement.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawAgreement;