react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
384 lines (379 loc) • 14.8 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawContainerShip = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="9cedafd9-494f-4d3e-b6f0-d29f99df71e5"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 932.38 646.22"
>
<defs>
<linearGradient
id="ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
x1={404.69}
y1={367.3}
x2={404.69}
y2={232.32}
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="905e3546-ed1b-433d-8161-823016c62eca"
x1={593.97}
y1={626.69}
x2={593.97}
y2={452.02}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="c6568ee9-d725-436a-80ac-b9f1da172072"
x1={738.07}
y1={414.72}
x2={738.07}
y2={394.25}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="e2e52ce8-d230-49cf-a1f9-70851d83682f"
x1={786.73}
y1={415.26}
x2={786.73}
y2={393.72}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="30d2223a-38ae-4536-a6cf-81f2b2db0f5e"
x1={746.05}
y1={367.4}
x2={746.05}
y2={77.08}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="769a7065-90c1-4b68-abd1-d9a0c3864293"
x1={116.36}
y1={371.39}
x2={116.36}
y2={347.46}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="5ff34262-126e-4c9a-8dcb-72da9c3c94e6"
x1={169}
y1={371.39}
x2={169}
y2={347.46}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="dfcb3764-257b-41eb-92fe-95e1aaed273a"
x1={221.64}
y1={371.39}
x2={221.64}
y2={347.46}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="f73412e2-f8c4-4029-bb06-176fcf8d8151"
x1={274.28}
y1={371.39}
x2={274.28}
y2={347.46}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="ccf50305-9b0c-4973-9dcd-3decef067a76"
x1={398.2}
y1={240.81}
x2={398.2}
y2={193.49}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="bf9978ba-a28c-4509-baf5-e43e75c138fd"
x1={545.2}
y1={177.41}
x2={545.2}
y2={146.89}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="9e3dcd3b-1db7-463e-ae36-6f2b85006585"
x1={816.2}
y1={157.41}
x2={816.2}
y2={126.89}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
<linearGradient
id="ab7e9db4-d2d7-4257-8bf3-845533995c47"
x1={138.38}
y1={143.68}
x2={138.38}
y2={9.68}
xlinkHref="#ae4d782a-9c1e-49c5-9d07-3f728a538f0e"
/>
</defs>
<title>Container ship</title>
<g opacity={0.5}>
<polygon
points="606.95 232.72 606.95 232.32 592.36 232.32 592.36 232.72 578.58 232.72 578.58 232.32 563.99 232.32 563.99 232.72 550.2 232.72 550.2 232.32 535.61 232.32 535.61 232.72 515.75 232.72 495.89 232.72 495.89 232.32 481.3 232.32 481.3 232.72 467.51 232.72 467.51 232.32 452.92 232.32 452.92 232.72 439.14 232.72 439.14 232.32 424.55 232.32 424.55 232.72 404.69 232.72 384.83 232.72 384.83 232.32 370.23 232.32 370.23 232.72 356.45 232.72 356.45 232.32 341.86 232.32 341.86 232.72 328.08 232.72 328.08 232.32 313.49 232.32 313.49 232.72 293.63 232.72 293.63 300.01 292.81 300.01 273.76 300.01 273.76 299.61 259.17 299.61 259.17 300.01 245.39 300.01 245.39 299.61 230.8 299.61 230.8 300.01 217.02 300.01 217.02 299.61 202.43 299.61 202.43 300.01 182.56 300.01 182.56 367.3 292.81 367.3 293.63 367.3 403.88 367.3 403.88 300.01 404.69 300.01 404.69 367.3 515.75 367.3 626.81 367.3 626.81 300.01 626.81 232.72 606.95 232.72"
fill="url(#ae4d782a-9c1e-49c5-9d07-3f728a538f0e)"
/>
</g>
<rect x={295.42} y={233.81} width={109.27} height={66.2} fill="#f55f44" />
<rect x={404.69} y={233.81} width={109.27} height={66.2} fill="#4d8af0" />
<rect x={513.96} y={233.81} width={109.27} height={66.2} fill="#3ad29f" />
<rect x={294.62} y={300.01} width={109.27} height={66.2} fill="#4d8af0" />
<rect x={186.15} y={300.01} width={109.27} height={66.2} fill="#f55f44" />
<rect x={404.69} y={300.01} width={109.27} height={66.2} fill="#3ad29f" />
<rect x={513.96} y={300.01} width={109.27} height={66.2} fill="#fdd835" />
<g opacity={0.1}>
<rect x={314.96} y={233.41} width={14.36} height={66.2} />
<rect x={342.88} y={233.41} width={14.36} height={66.2} />
<rect x={370.79} y={233.41} width={14.36} height={66.2} />
</g>
<g opacity={0.1}>
<rect x={424.23} y={233.41} width={14.36} height={66.2} />
<rect x={452.14} y={233.41} width={14.36} height={66.2} />
<rect x={480.06} y={233.41} width={14.36} height={66.2} />
</g>
<g opacity={0.1}>
<rect x={533.5} y={233.41} width={14.36} height={66.2} />
<rect x={561.41} y={233.41} width={14.36} height={66.2} />
<rect x={589.33} y={233.41} width={14.36} height={66.2} />
</g>
<g opacity={0.1}>
<rect x={314.96} y={299.61} width={14.36} height={66.2} />
<rect x={342.88} y={299.61} width={14.36} height={66.2} />
<rect x={370.79} y={299.61} width={14.36} height={66.2} />
</g>
<g opacity={0.1}>
<rect x={205.69} y={299.61} width={14.36} height={66.2} />
<rect x={233.61} y={299.61} width={14.36} height={66.2} />
<rect x={261.52} y={299.61} width={14.36} height={66.2} />
</g>
<g opacity={0.1}>
<rect x={424.23} y={299.61} width={14.36} height={66.2} />
<rect x={452.14} y={299.61} width={14.36} height={66.2} />
<rect x={480.06} y={299.61} width={14.36} height={66.2} />
</g>
<g opacity={0.1}>
<rect x={533.5} y={299.61} width={14.36} height={66.2} />
<rect x={561.41} y={299.61} width={14.36} height={66.2} />
<rect x={589.33} y={299.61} width={14.36} height={66.2} />
</g>
<g opacity={0.5}>
<path
d="M432.67,452H202.42S182,543.23,286.52,606v20.65h663V609.48s58.79-15.49,29.39-123.9l-484.18,2.58Z"
transform="translate(-133.81 -126.89)"
fill="url(#905e3546-ed1b-433d-8161-823016c62eca)"
/>
</g>
<path
d="M436.41,459.6H211.49s-19.94,84.54,82.15,142.77v19.14H941.28v-16S998.7,591.2,970,490.7L497,493.1Z"
transform="translate(-133.81 -126.89)"
fill={props.primaryColor}
stroke="#6c63ff"
strokeMiterlimit={10}
/>
<g opacity={0.5}>
<rect
x={707.37}
y={394.25}
width={61.41}
height={20.47}
rx={9.78}
ry={9.78}
fill="url(#c6568ee9-d725-436a-80ac-b9f1da172072)"
/>
</g>
<rect
x={709.36}
y={394.92}
width={57.43}
height={19.14}
rx={9.15}
ry={9.15}
fill="#fff"
/>
<g opacity={0.5}>
<rect
x={775.96}
y={393.72}
width={21.53}
height={21.53}
rx={10.29}
ry={10.29}
fill="url(#e2e52ce8-d230-49cf-a1f9-70851d83682f)"
/>
</g>
<rect
x={777.16}
y={394.92}
width={19.14}
height={19.14}
rx={9.15}
ry={9.15}
fill="#fff"
/>
<g opacity={0.5}>
<polygon
points="828.49 280.72 828.49 261.09 776.91 261.09 776.91 162.13 704.2 162.13 704.2 101.62 716.03 101.62 716.03 88.53 704.2 88.53 704.2 77.08 690.67 77.08 690.67 88.53 679.68 88.53 679.68 101.62 690.67 101.62 690.67 162.13 668.69 162.13 668.69 198.12 668.69 227.56 668.69 261.09 668.69 280.72 647.55 280.72 647.55 295.44 668.69 295.44 668.69 298.3 668.69 367.4 828.49 367.4 828.49 298.3 828.49 295.44 844.55 295.44 844.55 280.72 828.49 280.72"
fill="url(#30d2223a-38ae-4536-a6cf-81f2b2db0f5e)"
/>
</g>
<rect x={671.88} y={260.13} width={150.74} height={103.68} fill="#f5f5f5" />
<rect x={671.88} y={163.62} width={102.09} height={96.51} fill="#f5f5f5" />
<rect
x={719.73}
y={205.89}
width={35.09}
height={54.24}
fill={props.primaryColor}
stroke="#6c63ff"
strokeMiterlimit={10}
/>
<rect x={671.88} y={198.71} width={20.74} height={28.71} fill="#fff" />
<rect x={692.61} y={80.67} width={12.76} height={82.95} fill="#e0e0e0" />
<rect x={682.24} y={91.84} width={34.3} height={12.76} fill="#e0e0e0" />
<rect x={651.94} y={279.27} width={185.83} height={14.36} fill="#e0e0e0" />
<circle cx={705.37} cy={318.35} r={7.18} fill="#fff" />
<circle cx={730.9} cy={318.35} r={7.18} fill="#fff" />
<circle cx={756.42} cy={318.35} r={7.18} fill="#fff" />
<circle cx={781.94} cy={318.35} r={7.18} fill="#fff" />
<rect x={159.43} y={475.87} width={647.63} height={19.14} opacity={0.1} />
<path
d="M211.49,463.19H436.41L497,496.68l473-2.39c5.45,19.07,7.79,35,8,48.38.21-14.13-2-31.36-8-52.37L497,492.7l-60.62-33.5H211.49a87.14,87.14,0,0,0-1.55,19.57A81.19,81.19,0,0,1,211.49,463.19Z"
transform="translate(-133.81 -126.89)"
opacity={0.1}
/>
<rect x={671.88} y={293.63} width={150.74} height={2.79} opacity={0.05} />
<g opacity={0.5}>
<circle
cx={116.36}
cy={359.43}
r={11.96}
fill="url(#769a7065-90c1-4b68-abd1-d9a0c3864293)"
/>
</g>
<g opacity={0.5}>
<circle
cx={169}
cy={359.43}
r={11.96}
fill="url(#5ff34262-126e-4c9a-8dcb-72da9c3c94e6)"
/>
</g>
<g opacity={0.5}>
<circle
cx={221.64}
cy={359.43}
r={11.96}
fill="url(#dfcb3764-257b-41eb-92fe-95e1aaed273a)"
/>
</g>
<g opacity={0.5}>
<circle
cx={274.28}
cy={359.43}
r={11.96}
fill="url(#f73412e2-f8c4-4029-bb06-176fcf8d8151)"
/>
</g>
<circle cx={116.36} cy={359.43} r={9.57} fill="#fff" />
<circle cx={169} cy={359.43} r={9.57} fill="#fff" />
<circle cx={221.64} cy={359.43} r={9.57} fill="#fff" />
<circle cx={274.28} cy={359.43} r={9.57} fill="#fff" />
<path
d="M229.43,623.63c7.44-20.08,30.82-30.53,52.21-29.69s41.32,10.5,60.49,20,39,19.28,60.42,20.33c47.52,2.33,87.51-38.13,134.86-42.72,56.29-5.46,106.25,40.38,162.78,42.27,9.94.33,20.08-.77,29.23-4.66,8-3.39,14.91-8.75,22.44-13,38-21.6,85.48-13.44,127.5-1.47S965,642,1007.71,632.8"
transform="translate(-133.81 -126.89)"
fill="#4d8af0"
/>
<path
d="M133.81,662.35c7.44-20.08,30.82-30.53,52.21-29.69s41.32,10.5,60.49,20,39,19.28,60.42,20.33c47.52,2.33,87.51-38.13,134.86-42.72,56.29-5.46,106.25,40.38,162.78,42.27,9.94.33,20.08-.77,29.23-4.66,8-3.39,14.91-8.75,22.44-13,38-21.6,85.48-13.44,127.5-1.47s85.64,27.32,128.35,18.12"
transform="translate(-133.81 -126.89)"
fill="#4d8af0"
/>
<path
d="M235.75,712.13c7.44-20.08,30.82-30.53,52.21-29.69s41.32,10.5,60.49,20,39,19.28,60.42,20.33c47.52,2.33,87.51-38.13,134.86-42.72C600,674.61,650,720.46,706.51,722.34c9.94.33,20.08-.77,29.23-4.66,8-3.39,14.91-8.75,22.44-13,38-21.6,85.48-13.44,127.5-1.47s85.64,27.32,128.35,18.12"
transform="translate(-133.81 -126.89)"
fill="#4d8af0"
/>
<path
d="M287.91,761.13c7.44-20.08,30.82-30.53,52.21-29.69s41.32,10.5,60.49,20,39,19.28,60.42,20.33c47.52,2.33,87.51-38.13,134.86-42.72,56.29-5.46,106.25,40.38,162.78,42.27,9.94.33,20.08-.77,29.23-4.66,8-3.39,14.91-8.75,22.44-13,38-21.6,85.48-13.44,127.5-1.47s85.64,27.32,128.35,18.12"
transform="translate(-133.81 -126.89)"
fill="#4d8af0"
/>
<g opacity={0.5}>
<path
d="M396.76,240.81l-6.89-1.22a44.53,44.53,0,0,1,.83-5.07c1.17-14.78-9.08-30.34-23.49-34.26l1.84-6.77c13.13,3.57,23.25,14.56,27.1,27.36A48.52,48.52,0,0,1,427.8,197.9l1.39,6.88c-15.1,3-27.94,15.89-31.53,30.86A35.47,35.47,0,0,1,396.76,240.81Z"
transform="translate(-133.81 -126.89)"
fill="url(#ccf50305-9b0c-4973-9dcd-3decef067a76)"
/>
</g>
<path
d="M397,237.38l-5.89-1a38.06,38.06,0,0,1,.71-4.33c1-12.63-7.76-25.93-20.08-29.28l1.58-5.79c11.22,3.06,19.88,12.45,23.16,23.38A41.47,41.47,0,0,1,423.5,200.7l1.19,5.88c-12.91,2.6-23.89,13.58-27,26.38A30.32,30.32,0,0,1,397,237.38Z"
transform="translate(-133.81 -126.89)"
fill="#706a6a"
/>
<g opacity={0.5}>
<path
d="M544.27,177.41l-4.45-.79a28.72,28.72,0,0,1,.54-3.27c.75-9.53-5.86-19.57-15.15-22.1l1.19-4.37c8.47,2.31,15,9.39,17.48,17.65a31.3,31.3,0,0,1,20.42-14.8l.9,4.44c-9.74,2-18,10.25-20.34,19.9A22.88,22.88,0,0,1,544.27,177.41Z"
transform="translate(-133.81 -126.89)"
fill="url(#bf9978ba-a28c-4509-baf5-e43e75c138fd)"
/>
</g>
<g opacity={0.5}>
<path
d="M815.27,157.41l-4.45-.79a28.72,28.72,0,0,1,.54-3.27c.75-9.53-5.86-19.57-15.15-22.1l1.19-4.37c8.47,2.31,15,9.39,17.48,17.65a31.3,31.3,0,0,1,20.42-14.8l.9,4.44c-9.74,2-18,10.25-20.34,19.9A22.88,22.88,0,0,1,815.27,157.41Z"
transform="translate(-133.81 -126.89)"
fill="url(#9e3dcd3b-1db7-463e-ae36-6f2b85006585)"
/>
</g>
<path
d="M544.6,172.07l-2.89-.51a18.66,18.66,0,0,1,.35-2.12c.49-6.2-3.81-12.71-9.85-14.36l.77-2.84a16.86,16.86,0,0,1,11.36,11.47,20.34,20.34,0,0,1,13.27-9.62l.58,2.88A17.71,17.71,0,0,0,545,169.9,14.87,14.87,0,0,1,544.6,172.07Z"
transform="translate(-133.81 -126.89)"
fill="#706a6a"
/>
<path
d="M815.6,152.07l-2.89-.51a18.66,18.66,0,0,1,.35-2.12c.49-6.2-3.81-12.71-9.85-14.36l.77-2.84a16.86,16.86,0,0,1,11.36,11.47,20.34,20.34,0,0,1,13.27-9.62l.58,2.88A17.71,17.71,0,0,0,816,149.9,14.87,14.87,0,0,1,815.6,152.07Z"
transform="translate(-133.81 -126.89)"
fill="#706a6a"
/>
<g opacity={0.5}>
<circle
cx={138.38}
cy={76.68}
r={67}
fill="url(#ab7e9db4-d2d7-4257-8bf3-845533995c47)"
/>
</g>
<circle cx={138.38} cy={76.68} r={62} fill="#fdd835" />
</svg>
);
UndrawContainerShip.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawContainerShip.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawContainerShip;