react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
146 lines (141 loc) • 4.53 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawMapDark = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="26582634-69ec-4123-8434-e4d812f57593"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1142.05 959.79"
>
<defs>
<linearGradient
id="1dea3ba9-2b1b-43e5-b070-d051882f128a"
x1={535.45}
y1={779.24}
x2={535.45}
y2={104.91}
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>
<clipPath
id="66648092-6827-47da-be32-a05af72b07ae"
transform="translate(-64.55 -7.92)"
>
<polygon
id="c9ed84a9-8cab-4a44-9ea6-8594f096f2dc"
data-name="<Clipping Path>"
points="889.29 734.56 724.7 734.56 473.64 758.83 220.64 734.56 220.64 139.96 472.6 158.16 729.99 139.96 981.79 174.34 981.79 641.52 889.29 734.56"
fill={props.primaryColor}
/>
</clipPath>
<linearGradient
id="27008784-f9f2-49b3-b3a5-6a105864e61d"
x1={873.19}
y1={742.81}
x2={873.19}
y2={620.08}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.12} />
<stop offset={0.55} stopOpacity={0.09} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="39b1710a-a94e-4a70-838f-f86323e70865"
x1={618.83}
y1={557.53}
x2={618.83}
y2={258.63}
xlinkHref="#27008784-f9f2-49b3-b3a5-6a105864e61d"
/>
<linearGradient
id="4ab34e4a-fb57-4429-888e-19b31ac52831"
x1={554.28}
y1={368.93}
x2={554.28}
y2={310.93}
xlinkHref="#27008784-f9f2-49b3-b3a5-6a105864e61d"
/>
</defs>
<title>map</title>
<polygon
id="a073cd38-4eb0-453d-a1d0-70f9c24b1634"
data-name="<Clipping Path>"
points="829.06 752.8 669.3 752.8 397.18 779.24 122.95 752.8 122.95 104.91 396.04 124.74 675.03 104.91 947.95 142.37 940.95 639.91 829.06 752.8"
fill="url(#1dea3ba9-2b1b-43e5-b070-d051882f128a)"
/>
<polygon
id="59230751-4dc4-41f9-b924-118a87d1b7cc"
data-name="<Clipping Path>"
points="823.86 743.79 667.59 743.79 401.42 769.52 133.19 743.79 133.19 113.41 400.31 132.71 673.19 113.41 940.14 149.86 933.29 633.96 823.86 743.79"
fill="#fff"
/>
<polygon
id="5b2d8654-11e0-49b5-a1f9-dad8b3034394"
data-name="<Clipping Path>"
points="824.74 726.63 660.15 726.63 409.1 750.9 156.09 726.63 156.09 132.03 408.05 150.24 665.44 132.03 917.24 166.42 917.24 633.6 824.74 726.63"
fill={props.primaryColor}
/>
<g clipPath="url(#66648092-6827-47da-be32-a05af72b07ae)">
<polygon
points="1142.05 905.14 564.09 585.08 710.89 97.33 660.93 77.52 589.79 313.89 22.97 0 0 54.65 572.41 371.63 441.73 805.83 491.69 825.64 546.71 642.82 1119.08 959.79 1142.05 905.14"
fill="#fff"
/>
</g>
<polyline
points="408.05 750.9 660 726.63 660 132.03 408.05 150.24"
opacity={0.1}
/>
<polygon
points="813.08 742.81 815.02 620.08 933.29 624.85 813.08 742.81"
fill="url(#27008784-f9f2-49b3-b3a5-6a105864e61d)"
/>
<polygon
points="823.86 742.81 825.62 629.55 933.29 633.96 823.86 742.81"
fill="#fff"
/>
<path
d="M718.46,354.55c0,53-99.63,203-99.63,203s-99.63-150-99.63-203,44.61-95.91,99.63-95.91S718.46,301.58,718.46,354.55Z"
transform="translate(-64.55 -7.92)"
fill="url(#39b1710a-a94e-4a70-838f-f86323e70865)"
/>
<ellipse
cx={554.28}
cy={339.93}
rx={30.12}
ry={29}
fill="url(#4ab34e4a-fb57-4429-888e-19b31ac52831)"
/>
<path
d="M703.35,356.36c0,48-87,184-87,184s-87-136-87-184a87,87,0,1,1,173.93,0Z"
transform="translate(-64.55 -7.92)"
fill="#ff5252"
/>
<circle cx={551.83} cy={342.37} r={26.29} fill="#fff" />
</svg>
);
UndrawMapDark.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawMapDark.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawMapDark;