react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
283 lines (278 loc) • 7.71 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawMapLight = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="31b2376c-d9cb-459c-a08c-900021ef8e68"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 887.59 776.14"
>
<defs>
<linearGradient
id="2d643a01-90c6-4282-8c89-060a579808b4"
x1={148.91}
y1={776.14}
x2={148.91}
y2={47.08}
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="a3e0f5af-5f14-4b24-ae95-6e04dd729135"
x1={446.72}
y1={776.14}
x2={446.72}
y2={47.08}
xlinkHref="#2d643a01-90c6-4282-8c89-060a579808b4"
/>
<linearGradient
id="aa8d7746-6edb-4ff6-8601-5cedae83b174"
x1={741.61}
y1={776.14}
x2={741.61}
y2={47.08}
xlinkHref="#2d643a01-90c6-4282-8c89-060a579808b4"
/>
<linearGradient
id="08fa861d-a5a6-45c5-828b-48370c6dd4d7"
x1={889.9}
y1={282.66}
x2={889.9}
y2={61.93}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="#b3b3b3" stopOpacity={0.25} />
<stop offset={0.54} stopColor="#b3b3b3" stopOpacity={0.1} />
<stop offset={1} stopColor="#b3b3b3" stopOpacity={0.05} />
</linearGradient>
<linearGradient
id="c138b5e9-aced-4e12-8d58-cfc81734ef31"
x1={733.7}
y1={87.3}
x2={733.7}
y2={44.48}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.12} />
<stop offset={0.55} stopOpacity={0.09} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="77e2ede8-9f9a-47ed-a740-ad5fa329fb2d"
x1={311.15}
y1={727}
x2={311.15}
y2={504.71}
xlinkHref="#08fa861d-a5a6-45c5-828b-48370c6dd4d7"
/>
<linearGradient
id="ae6f7cb0-09a9-4206-a53c-57ed9ab3e9f7"
x1={154.94}
y1={530.7}
x2={154.94}
y2={487.57}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.01} stopOpacity={0.12} />
<stop offset={0.55} stopOpacity={0.09} />
<stop offset={1} stopOpacity={0.05} />
</linearGradient>
</defs>
<title>map light</title>
<polygon
points="297.81 748.17 0 776.14 0 75.06 297.81 47.08 297.81 748.17"
fill="url(#2d643a01-90c6-4282-8c89-060a579808b4)"
/>
<polygon
points="297.81 748.17 595.62 776.14 595.62 75.06 297.81 47.08 297.81 748.17"
fill="url(#a3e0f5af-5f14-4b24-ae95-6e04dd729135)"
/>
<polygon
points="887.59 748.17 595.62 776.14 595.62 75.06 887.59 47.08 887.59 748.17"
fill="url(#aa8d7746-6edb-4ff6-8601-5cedae83b174)"
/>
<polygon
points="298.87 728.7 9.49 755.59 9.49 81.95 298.87 55.07 298.87 728.7"
fill="#f5f5f5"
/>
<polygon
points="298.87 728.7 588.24 755.59 588.24 81.95 298.87 55.07 298.87 728.7"
fill="#fff"
/>
<polygon
points="877.62 728.7 588.24 755.59 588.24 81.95 877.62 55.07 877.62 728.7"
fill="#f5f5f5"
/>
<polygon
points="298.87 116.94 79.06 124.65 79.06 154.69 79.06 195.81 79.06 225.85 265.66 225.85 265.66 189.26 298.87 188.1 349.47 203.72 349.47 132.56 298.87 116.94"
fill={props.primaryColor}
opacity={0.3}
/>
<polygon
points="298.87 682.85 52.18 706.57 52.18 616.43 298.87 592.71 298.87 682.85"
fill={props.primaryColor}
opacity={0.3}
/>
<rect
x={444.34}
y={613.27}
width={107.53}
height={82.23}
fill={props.primaryColor}
opacity={0.3}
/>
<polygon
points="836.5 657.55 668.89 671.78 668.89 562.67 836.5 548.44 836.5 657.55"
fill={props.primaryColor}
opacity={0.3}
/>
<path
d="M958.28,132.76c0,39.12-68.38,149.9-68.38,149.9s-68.38-110.78-68.38-149.9,30.62-70.83,68.38-70.83S958.28,93.64,958.28,132.76Z"
transform="translate(-156.2 -61.93)"
fill="url(#08fa861d-a5a6-45c5-828b-48370c6dd4d7)"
/>
<ellipse
cx={733.7}
cy={65.89}
rx={20.67}
ry={21.41}
fill="url(#c138b5e9-aced-4e12-8d58-cfc81734ef31)"
/>
<path
d="M953.18,132.89c0,34.95-63.28,133.91-63.28,133.91s-63.28-99-63.28-133.91a63.28,63.28,0,1,1,126.55,0Z"
transform="translate(-156.2 -61.93)"
fill={props.primaryColor}
/>
<circle cx={733.7} cy={66.54} r={19.13} fill="#fff" />
<path
d="M381.56,576c0,39.4-70.41,151-70.41,151s-70.41-111.56-70.41-151,31.52-71.33,70.41-71.33S381.56,536.65,381.56,576Z"
transform="translate(-156.2 -61.93)"
fill="url(#77e2ede8-9f9a-47ed-a740-ad5fa329fb2d)"
/>
<ellipse
cx={154.94}
cy={509.14}
rx={21.29}
ry={21.57}
fill="url(#ae6f7cb0-09a9-4206-a53c-57ed9ab3e9f7)"
/>
<path
d="M374.42,575.65c0,34.95-63.28,133.91-63.28,133.91s-63.28-99-63.28-133.91a63.28,63.28,0,0,1,126.55,0Z"
transform="translate(-156.2 -61.93)"
fill={props.primaryColor}
/>
<circle cx={154.94} cy={509.31} r={19.13} fill="#fff" />
<g opacity={0.4}>
<line
x1={175.52}
y1={649.64}
x2={180.17}
y2={645.85}
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
/>
<line
x1={188.95}
y1={638.69}
x2={289.83}
y2={556.41}
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
strokeDasharray="11.32 11.32"
/>
<polyline
points="294.21 552.83 298.87 549.04 304.73 550.29"
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
/>
<line
x1={316.89}
y1={552.88}
x2={432.4}
y2={577.51}
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
strokeDasharray="12.43 12.43"
/>
<polyline
points="438.48 578.81 444.34 580.06 446.01 574.3"
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
/>
<line
x1={449.4}
y1={562.61}
x2={562.74}
y2={171.05}
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
strokeDasharray="12.17 12.17"
/>
<polyline
points="564.43 165.2 566.1 159.44 571.58 161.89"
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
/>
<line
x1={582.17}
y1={166.62}
x2={703.97}
y2={221.04}
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
strokeDasharray="11.6 11.6"
/>
<line
x1={709.27}
y1={223.41}
x2={714.75}
y2={225.85}
fill="none"
stroke="#64ffda"
strokeMiterlimit={10}
strokeWidth={11}
/>
</g>
</svg>
);
UndrawMapLight.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawMapLight.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawMapLight;