react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
516 lines (511 loc) • 15.7 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawHouses = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="b54d9f7d-7ab4-45bd-9752-a171600aa4db"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 868.66 282.45"
>
<defs>
<linearGradient
id="3e3b4f84-8398-4e97-bfa9-93b2936006f5"
x1={369.42}
y1={281.2}
x2={369.42}
y2={129.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="eba4e103-e776-48b6-9f55-897b2c643a10"
x1={325.25}
y1={122.25}
x2={325.25}
y2={79.83}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="73968a21-755d-4562-8ffb-fae58a7b600b"
x1={260.16}
y1={180.95}
x2={260.16}
y2={130.39}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="14122a6c-7f6c-4dde-aa69-0bfcca24829a"
x1={476.5}
y1={180.95}
x2={476.5}
y2={129.81}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="8f9daf16-6dc3-4ab7-ad04-022195c1fcf8"
x1={369.54}
y1={133.69}
x2={369.54}
y2={67.17}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="43b0b26d-914f-491d-a041-92999dbbe527"
x1={367.97}
y1={279.46}
x2={367.97}
y2={118.77}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="ca618a97-ecd5-4224-86a7-e65b179fc7aa"
x1={65.41}
y1={282.45}
x2={65.41}
y2={168.46}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="d4a136ba-2c16-48ed-b5ab-c1493b7a7acb"
x1={34.3}
y1={165.9}
x2={34.3}
y2={134.79}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="ef61be1e-18fe-4bcb-9275-2f988f2bf512"
x1={65.62}
y1={281.17}
x2={65.62}
y2={163.34}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="1512db09-687e-46a3-b6f1-2462e94a71e8"
x1={66.78}
y1={174.29}
x2={66.78}
y2={125.51}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="6e74d349-ece4-41ce-9852-57f84313790d"
x1={735.26}
y1={281.53}
x2={735.26}
y2={82.38}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="7cd06b92-268d-499d-ae65-d452a7b79361"
x1={698.92}
y1={39.35}
x2={698.92}
y2={4.44}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="77f52eac-aca1-4508-ae87-71aaae06d074"
x1={645.37}
y1={115.85}
x2={645.37}
y2={74.25}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="9b105c8a-2fbe-4f76-8808-d06d81c11f8b"
x1={823.36}
y1={116.81}
x2={823.36}
y2={74.73}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="fcf7c80f-694e-4f22-8819-23d4fd4e8e1d"
x1={735.36}
y1={54.73}
x2={735.36}
y2={0}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
<linearGradient
id="2b4a4a05-21c6-45b7-b09c-f2c76655e0f6"
x1={734.3}
y1={280.1}
x2={734.3}
y2={46.52}
xlinkHref="#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
/>
</defs>
<title>houses3</title>
<g opacity={0.7}>
<polygon
points="516.75 281.2 222.09 281.2 224.13 143.18 308.4 129.23 427.54 129.23 514.71 139.11 516.75 281.2"
fill="url(#3e3b4f84-8398-4e97-bfa9-93b2936006f5)"
/>
</g>
<polygon
points="512.67 279.46 226.17 279.46 228.21 144.92 308.67 130.97 428.99 130.97 510.63 140.85 512.67 279.46"
fill="#eee"
/>
<g opacity={0.7}>
<rect
x={314.5}
y={79.83}
width={21.5}
height={42.43}
fill="url(#eba4e103-e776-48b6-9f55-897b2c643a10)"
/>
</g>
<g opacity={0.7}>
<polygon
points="314.49 176.25 314.49 130.39 221.1 130.39 205.24 176.25 205.24 180.95 315.08 180.95 315.08 176.25 314.49 176.25"
fill="url(#73968a21-755d-4562-8ffb-fae58a7b600b)"
/>
</g>
<polygon
points="314.5 176.3 206.4 176.3 222.09 130.97 314.5 130.97 314.5 176.3"
fill={props.primaryColor}
/>
<polygon
points="314.5 176.3 206.4 176.3 222.09 130.97 314.5 130.97 314.5 176.3"
opacity={0.1}
/>
<rect x={206.4} y={176.3} width={108.68} height={4.65} fill={props.primaryColor} />
<g opacity={0.7}>
<polygon
points="515.66 129.81 422.02 129.81 422.02 176.19 421.43 176.19 421.43 180.95 531.57 180.95 531.57 176.19 515.66 129.81"
fill="url(#14122a6c-7f6c-4dde-aa69-0bfcca24829a)"
/>
</g>
<polygon
points="422.01 176.3 530.11 176.3 514.42 130.97 422.01 130.97 422.01 176.3"
fill={props.primaryColor}
/>
<polygon
points="422.01 176.3 530.11 176.3 514.42 130.97 422.01 130.97 422.01 176.3"
opacity={0.1}
/>
<rect
x={587.1}
y={485.08}
width={108.68}
height={4.65}
transform="translate(1117.21 666.03) rotate(-180)"
fill={props.primaryColor}
/>
<rect
x={235.46}
y={199.26}
width={58.7}
height={36.61}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={231.97} y={233.26} width={65.67} height={6.39} opacity={0.1} />
<rect x={231.97} y={232.68} width={65.67} height={6.39} fill="#535461" />
<g opacity={0.1}>
<rect x={235.46} y={199.26} width={58.7} height={14.53} />
</g>
<rect
x={442.94}
y={199.26}
width={58.7}
height={36.61}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={439.45} y={233.26} width={65.67} height={6.39} opacity={0.1} />
<rect x={439.45} y={232.68} width={65.67} height={6.39} fill="#535461" />
<g opacity={0.1}>
<rect x={442.94} y={199.26} width={58.7} height={14.53} />
</g>
<g opacity={0.7}>
<polygon
points="440.13 133.69 368.44 78.25 299.06 133.65 293.62 126.84 368.36 67.17 445.46 126.8 440.13 133.69"
fill="url(#8f9daf16-6dc3-4ab7-ad04-022195c1fcf8)"
/>
</g>
<rect x={227.61} y={180.95} width={77.3} height={0.87} opacity={0.1} />
<rect x={433.06} y={180.95} width={78.17} height={0.87} opacity={0.1} />
<rect x={315.08} y={80.41} width={20.34} height={41.84} fill="#535461" />
<g opacity={0.7}>
<polygon
points="433.06 279.46 302.88 279.46 302.88 120.22 368.53 118.77 433.06 120.22 433.06 279.46"
fill="url(#43b0b26d-914f-491d-a041-92999dbbe527)"
/>
</g>
<polygon
points="431.6 279.46 304.91 279.46 304.91 120.22 368.26 75.18 431.6 120.22 431.6 279.46"
fill="#fff"
/>
<rect x={352.27} y={225.99} width={31.96} height={53.47} fill="#535461" />
<rect x={335.42} y={178.05} width={65.67} height={6.39} opacity={0.1} />
<rect
x={338.91}
y={144.05}
width={58.7}
height={36.61}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={335.42} y={177.47} width={65.67} height={6.39} fill="#535461" />
<g opacity={0.1}>
<rect x={338.91} y={144.05} width={58.7} height={14.53} />
</g>
<polygon
points="440.13 134.27 368.44 78.83 299.06 134.23 293.62 127.42 368.36 67.75 445.46 127.38 440.13 134.27"
fill={props.primaryColor}
/>
<circle cx={379.59} cy={252.73} r={2.32} fill="#e0e0e0" />
<g opacity={0.7}>
<rect
y={168.46}
width={130.82}
height={113.99}
fill="url(#ca618a97-ecd5-4224-86a7-e65b179fc7aa)"
/>
</g>
<rect x={2.24} y={169.73} width={127.2} height={111.43} fill="#eee" />
<g opacity={0.7}>
<rect
x={26.42}
y={134.79}
width={15.77}
height={31.11}
fill="url(#d4a136ba-2c16-48ed-b5ab-c1493b7a7acb)"
/>
</g>
<rect x={26.85} y={135.22} width={14.91} height={30.68} fill="#535461" />
<g opacity={0.7}>
<polygon
points="113.35 281.17 17.9 281.17 17.9 164.41 66.04 163.34 113.35 164.41 113.35 281.17"
fill="url(#ef61be1e-18fe-4bcb-9275-2f988f2bf512)"
/>
</g>
<polygon
points="112.29 281.17 19.39 281.17 19.39 164.41 65.84 131.38 112.29 164.41 112.29 281.17"
fill="#fff"
/>
<rect x={54.12} y={241.96} width={23.44} height={39.2} fill="#535461" />
<rect
x={44.32}
y={181.88}
width={43.04}
height={26.85}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={41.76} y={206.38} width={48.15} height={4.69} fill="#535461" />
<g opacity={0.1}>
<rect x={44.32} y={181.88} width={43.04} height={10.65} />
</g>
<g opacity={0.7}>
<polygon
points="118.53 174.29 65.97 133.64 15.1 174.26 11.11 169.26 65.91 125.51 122.44 169.23 118.53 174.29"
fill="url(#1512db09-687e-46a3-b6f1-2462e94a71e8)"
/>
</g>
<polygon
points="118.53 174.71 65.97 134.06 15.1 174.68 11.11 169.69 65.91 125.93 122.44 169.66 118.53 174.71"
fill={props.primaryColor}
/>
<circle cx={74.15} cy={261.57} r={1.7} fill="#e0e0e0" />
<g opacity={0.7}>
<polygon
points="856.47 281.53 614.05 281.53 615.72 100.66 685.05 82.38 783.08 82.38 854.8 95.33 856.47 281.53"
fill="url(#6e74d349-ece4-41ce-9852-57f84313790d)"
/>
</g>
<polygon
points="853.12 279.25 617.4 279.25 619.08 102.94 685.28 84.67 784.27 84.67 851.44 97.61 853.12 279.25"
fill="#eee"
/>
<g opacity={0.7}>
<rect
x={690.07}
y={4.44}
width={17.69}
height={34.91}
fill="url(#7cd06b92-268d-499d-ae65-d452a7b79361)"
/>
</g>
<g opacity={0.7}>
<polygon
points="690.07 111.98 690.07 74.25 613.23 74.25 600.18 111.98 600.18 115.85 690.55 115.85 690.55 111.98 690.07 111.98"
fill="url(#77f52eac-aca1-4508-ae87-71aaae06d074)"
/>
</g>
<polygon
points="690.07 112.03 601.14 112.03 614.05 74.73 690.07 74.73 690.07 112.03"
fill={props.primaryColor}
/>
<polygon
points="690.07 112.03 601.14 112.03 614.05 74.73 690.07 74.73 690.07 112.03"
opacity={0.1}
/>
<rect x={601.14} y={112.03} width={89.42} height={3.83} fill={props.primaryColor} />
<g opacity={0.7}>
<polygon
points="855.58 74.73 778.54 74.73 778.54 112.89 778.05 112.89 778.05 116.81 868.66 116.81 868.66 112.89 855.58 74.73"
fill="url(#9b105c8a-2fbe-4f76-8808-d06d81c11f8b)"
/>
</g>
<polygon
points="778.53 112.98 867.47 112.98 854.56 75.69 778.53 75.69 778.53 112.98"
fill={props.primaryColor}
/>
<polygon
points="778.53 112.98 867.47 112.98 854.56 75.69 778.53 75.69 778.53 112.98"
opacity={0.1}
/>
<rect
x={943.72}
y={421.76}
width={89.42}
height={3.83}
transform="translate(1811.19 538.57) rotate(-180)"
fill={props.primaryColor}
/>
<rect
x={625.04}
y={214.11}
width={48.29}
height={30.12}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={622.18} y={242.08} width={54.03} height={5.26} opacity={0.1} />
<rect x={622.18} y={241.61} width={54.03} height={5.26} fill="#535461" />
<g opacity={0.1}>
<rect x={625.04} y={214.11} width={48.29} height={11.95} />
</g>
<rect
x={795.75}
y={214.11}
width={48.29}
height={30.12}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={792.88} y={242.08} width={54.03} height={5.26} opacity={0.1} />
<rect x={792.88} y={241.61} width={54.03} height={5.26} fill="#535461" />
<g opacity={0.1}>
<rect x={795.75} y={214.11} width={48.29} height={11.95} />
</g>
<rect
x={795.75}
y={143.82}
width={48.29}
height={30.12}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={792.88} y={171.8} width={54.03} height={5.26} opacity={0.1} />
<rect x={792.88} y={171.32} width={54.03} height={5.26} fill="#535461" />
<g opacity={0.1}>
<rect x={795.75} y={143.82} width={48.29} height={11.95} />
</g>
<rect
x={626.48}
y={143.82}
width={48.29}
height={30.12}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={623.61} y={171.8} width={54.03} height={5.26} opacity={0.1} />
<rect x={623.61} y={171.32} width={54.03} height={5.26} fill="#535461" />
<g opacity={0.1}>
<rect x={626.48} y={143.82} width={48.29} height={11.95} />
</g>
<g opacity={0.7}>
<polygon
points="793.43 54.73 734.46 9.12 677.37 54.7 672.89 49.1 734.39 0 797.82 49.06 793.43 54.73"
fill="url(#fcf7c80f-694e-4f22-8819-23d4fd4e8e1d)"
/>
</g>
<rect x={618.59} y={115.85} width={63.59} height={0.72} opacity={0.1} />
<rect x={787.62} y={116.81} width={64.31} height={0.72} opacity={0.1} />
<rect x={690.55} y={4.92} width={16.74} height={34.43} fill="#535461" />
<g opacity={0.7}>
<polygon
points="787.86 280.1 680.75 280.1 680.75 48.63 734.77 46.52 787.86 48.63 787.86 280.1"
fill="url(#2b4a4a05-21c6-45b7-b09c-f2c76655e0f6)"
/>
</g>
<polygon
points="786.42 280.1 682.18 280.1 682.18 47.71 734.3 8.51 787.38 49.15 786.42 280.1"
fill="#fff"
/>
<rect x={721.15} y={236.11} width={26.3} height={43.99} fill="#535461" />
<rect x={707.29} y={196.66} width={54.03} height={5.26} opacity={0.1} />
<rect
x={710.16}
y={168.69}
width={48.29}
height={30.12}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={707.29} y={196.18} width={54.03} height={5.26} fill="#535461" />
<g opacity={0.1}>
<rect x={710.16} y={168.69} width={48.29} height={11.95} />
</g>
<rect
x={710.16}
y={109.64}
width={48.29}
height={30.12}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={707.29} y={137.13} width={54.03} height={5.26} fill="#535461" />
<g opacity={0.1}>
<rect x={710.16} y={109.64} width={48.29} height={11.95} />
</g>
<rect
x={710.16}
y={50.58}
width={48.29}
height={30.12}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={707.29} y={78.08} width={54.03} height={5.26} fill="#535461" />
<g opacity={0.1}>
<rect x={710.16} y={50.58} width={48.29} height={11.95} />
</g>
<polygon
points="793.43 56.41 734.46 10.79 677.37 56.37 672.89 50.77 734.39 1.67 797.82 50.73 793.43 56.41"
fill={props.primaryColor}
/>
<circle cx={743.63} cy={258.1} r={1.91} fill="#e0e0e0" />
</svg>
);
UndrawHouses.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawHouses.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawHouses;