react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
200 lines (195 loc) • 6.44 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawPhotos = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="2aaf6dea-f5da-4445-9251-37af7c547efe"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 837.99 773.52"
>
<defs>
<linearGradient
id="99e451bd-df46-4cb9-943f-13250b80c008"
x1={510.79}
y1={662.26}
x2={510.79}
y2={179.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="c308d856-5733-41a8-ba98-29ce125fde66"
x1={648.13}
y1={772.62}
x2={648.13}
y2={93.76}
gradientTransform="translate(1076.27 -207.13) rotate(90)"
xlinkHref="#99e451bd-df46-4cb9-943f-13250b80c008"
/>
<linearGradient
id="74be8b77-8a4d-4b1a-8147-197fdb73194d"
x1={364.83}
y1={773.52}
x2={364.83}
y2={94.66}
xlinkHref="#99e451bd-df46-4cb9-943f-13250b80c008"
/>
<clipPath
id="c6bf9c29-af48-46d0-a225-df9048597bc2"
transform="translate(-147.54 -63.24)"
>
<rect
x={243.97}
y={179.29}
width={533.63}
height={482.97}
fill="url(#99e451bd-df46-4cb9-943f-13250b80c008)"
/>
</clipPath>
<linearGradient
id="02d28320-0d07-41f1-b820-c14ed7e96a2f"
x1={551.85}
y1={711.91}
x2={551.85}
y2={333.23}
xlinkHref="#99e451bd-df46-4cb9-943f-13250b80c008"
/>
<clipPath
id="a46abe2a-1898-452c-b6ed-f00ef7b2f110"
transform="translate(-147.54 -63.24)"
>
<rect
id="f1d5fd88-7559-4d7f-8f81-463e862e0765"
data-name="<Rectangle>"
x={247.91}
y={183.23}
width={526.88}
height={469.46}
fill="#fff"
/>
</clipPath>
</defs>
<title>photos</title>
<rect
x={303.64}
y={143.1}
width={678.86}
height={595.81}
transform="translate(-31.09 952.83) rotate(-81.96)"
fill="url(#c308d856-5733-41a8-ba98-29ce125fde66)"
/>
<rect
x={318.27}
y={146.18}
width={650.71}
height={581.85}
transform="translate(-26.75 950.02) rotate(-81.96)"
fill="#fff"
/>
<rect
id="15fa7734-96da-431a-a67f-b368dfbdb931"
data-name="<Rectangle>"
x={389.72}
y={127.54}
width={526.88}
height={469.46}
transform="translate(-90.44 -151.04) rotate(8.04)"
fill={props.primaryColor}
/>
<rect
id="6968f8e0-9aea-4d3d-90e1-4904e891fc16"
data-name="<Rectangle>"
x={389.72}
y={127.54}
width={526.88}
height={469.46}
transform="translate(-90.44 -151.04) rotate(8.04)"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={5}
/>
<rect
x={66.92}
y={94.66}
width={595.81}
height={678.86}
fill="url(#74be8b77-8a4d-4b1a-8147-197fdb73194d)"
/>
<rect x={73.91} y={104.8} width={581.85} height={650.71} fill="#fff" />
<rect
x={96.43}
y={116.05}
width={533.63}
height={482.97}
fill="url(#99e451bd-df46-4cb9-943f-13250b80c008)"
/>
<g clipPath="url(#c6bf9c29-af48-46d0-a225-df9048597bc2)">
<path
d="M358.85,459c17.44,19.24,31.75,43,55,54.18,33.73,16.24,74.78-.11,102.56-25.42s47.25-58.7,73.5-85.66c75.33-77.38,203.3-89.22,297.3-37,13.42,7.45,26.46,16.25,35.94,28.44,12.33,15.86,17.64,36.09,21.61,55.89a585,585,0,0,1,11.07,134.52c-1,30.69-6.84,65.43-32.12,82.25-8,5.31-17.23,8.27-26.39,11-135.88,40.07-280,37.32-421.39,31.3-105.4-4.49-212-10.85-312.67-43-4.63-1.48-9.53-3.21-12.51-7.1-3.37-4.4-3.46-10.48-3-16,1.45-18.27,7-35.91,11.21-53.74a364.51,364.51,0,0,0,8.3-113.43c-2.81-33.67-21.67-62.13,17.27-71.55C245.59,388.8,316.77,412.55,358.85,459Z"
transform="translate(-147.54 -63.24)"
fill="url(#02d28320-0d07-41f1-b820-c14ed7e96a2f)"
/>
</g>
<rect
id="6b8b7763-08eb-41e9-84db-926332f3d231"
data-name="<Rectangle>"
x={100.37}
y={119.99}
width={526.88}
height={469.46}
fill="#fff"
/>
<g clipPath="url(#a46abe2a-1898-452c-b6ed-f00ef7b2f110)">
<path
d="M361.33,455.09c17.22,18.7,31.34,41.78,54.31,52.66,33.3,15.78,73.83-.1,101.26-24.71s46.65-57.06,72.57-83.26c74.38-75.21,200.73-86.73,293.53-36,13.25,7.25,26.13,15.8,35.49,27.64,12.18,15.41,17.41,35.08,21.33,54.33a560.08,560.08,0,0,1,10.93,130.75c-1,29.83-6.75,63.6-31.72,80-7.88,5.16-17,8-26.05,10.66-134.16,39-276.48,36.28-416.06,30.42C372.87,693.2,267.59,687,168.22,655.79c-4.57-1.44-9.41-3.12-12.35-6.9-3.33-4.28-3.42-10.19-3-15.59,1.44-17.76,6.93-34.9,11.07-52.24a349,349,0,0,0,8.19-110.26c-2.77-32.72-21.39-60.39,17.05-69.55C249.51,386.88,319.79,410,361.33,455.09Z"
transform="translate(-147.54 -63.24)"
fill="#bdbdbd"
/>
</g>
<circle cx={165.66} cy={185.29} r={38.28} fill="#ff5252" />
<rect
x={448.24}
y={435.22}
width={18.01}
height={138.47}
fill={props.primaryColor}
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={5}
/>
<polygon
points="516.5 429.52 499.44 419.02 514.09 421.63 505.8 394.55 485.74 382.2 503.12 385.8 491.43 347.63 471.88 335.59 488.67 338.59 477.41 301.82 457.51 289.57 474.59 292.62 457.25 235.95 444.71 277.58 457.25 273.1 442.53 284.83 433.43 315.08 457.25 309.13 429.19 329.17 419.41 361.65 444.86 355.29 414.88 376.71 407.32 401.83 426.85 396.94 403.84 413.38 390.82 456.61 524.79 456.61 516.5 429.52"
fill={props.primaryColor}
stroke="#6c63ff"
strokeMiterlimit={10}
strokeWidth={5}
/>
<rect x={73.91} y={671.08} width={581.85} height={84.44} fill={props.primaryColor} />
</svg>
);
UndrawPhotos.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawPhotos.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawPhotos;