react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
379 lines (374 loc) • 9.65 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawYacht = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="9e94c22b-7172-49a8-8eb3-40cab18a091a"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 913.74 757"
>
<defs>
<linearGradient
id="d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
x1={636.96}
y1={312.89}
x2={636.96}
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="8ff5c8f6-3b49-46e8-a3fa-4e8dd07cbe81"
x1={600}
y1={755.69}
x2={600}
y2={82.21}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="ea370a73-8633-402d-81f8-1dcf1f82bd44"
x1={718.9}
y1={583.54}
x2={718.9}
y2={559.99}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="15ee616f-9afd-4224-ab9d-5eaaa4f1a39b"
x1={749.95}
y1={583.54}
x2={749.95}
y2={559.99}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="57db5216-0d5b-4eda-8ec0-03821896a9f2"
x1={781}
y1={583.54}
x2={781}
y2={559.99}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="9062edce-047a-4c38-922f-2c1643837c74"
x1={427.69}
y1={682.76}
x2={427.69}
y2={671.34}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="a9aa6d79-eb50-4927-82d5-a007c2e3e24f"
x1={189.08}
y1={704.46}
x2={189.08}
y2={693.04}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="068ad811-ca2f-433c-aad4-5691b569b9d5"
x1={404.91}
y1={730.73}
x2={404.91}
y2={719.31}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="1e2cd204-3893-4ed4-8b5f-ca13f7324392"
x1={639.19}
y1={757}
x2={639.19}
y2={745.58}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="f46d66cc-9326-48ec-9c73-380a4dad315b"
x1={860.98}
y1={682.76}
x2={860.98}
y2={671.34}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="abbefab6-2234-46db-8140-5e847da66b5f"
x1={575.74}
y1={704.46}
x2={575.74}
y2={693.04}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="a2f8cf05-4ab1-4c8d-9739-2fb42230b33d"
x1={145.15}
y1={730.73}
x2={145.15}
y2={719.31}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="ae7ce76f-d76e-4d1d-8468-403faa613dbc"
x1={626.71}
y1={730.73}
x2={626.71}
y2={719.31}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
<linearGradient
id="bc015862-a6fd-4981-af42-7fd9dbba1a73"
x1={229.21}
y1={757}
x2={229.21}
y2={745.58}
xlinkHref="#d2993bef-4ee2-4fda-a4cb-18302d50ac5b"
/>
</defs>
<title>travel</title>
<circle
cx={636.96}
cy={156.45}
r={156.45}
fill="url(#d2993bef-4ee2-4fda-a4cb-18302d50ac5b)"
/>
<circle cx={636.96} cy={156.45} r={146.79} fill="#ff5252" />
<polygon
points="287.4 130.09 286.86 20.88 359.67 20.88 449.07 130.09 287.4 130.09"
fill={props.primaryColor}
/>
<path
d="M888.8,255a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"
transform="translate(-143.13 -71.5)"
fill="#fff"
/>
<path
d="M1055.83,430.19c-1.39-19.85-5.31-40-9.65-62.34a13.17,13.17,0,0,0-14.28-10.6l-171.64,7.82-67.43-86.33H753.08L741.21,255h.28l-4.42-8.28-18.24-36.49a27.86,27.86,0,0,0-24.92-15.4H593.54L501.35,82.21H426.28l.55,112.62H410.89a27.86,27.86,0,0,0-25.25,16.07L354,278.73H331.51a30.08,30.08,0,0,0-26.4,15.67l-74.25,136h0l-75.93,7.88a13.16,13.16,0,0,0-11.26,16.79l19,64.55L212,687.79,232,755.69H627.22s222.09.68,318.85-67.9C1011.64,641.31,1065,562.08,1055.83,430.19Z"
transform="translate(-143.13 -71.5)"
fill="url(#8ff5c8f6-3b49-46e8-a3fa-4e8dd07cbe81)"
/>
<path
d="M241.55,745.52H624.86s218.3.66,312.13-65.85H222.21Z"
transform="translate(-143.13 -71.5)"
fill={props.primaryColor}
/>
<path
d="M359.86,283l30.5-65.3a27.86,27.86,0,0,1,25.25-16.07H689A27.86,27.86,0,0,1,713.94,217l37.27,74.54Z"
transform="translate(-143.13 -71.5)"
fill="#fff"
/>
<path
d="M240.48,430.07l71.75-131.43A30.08,30.08,0,0,1,338.63,283H770.8a30.08,30.08,0,0,1,23.7,11.56L900,429.66Z"
transform="translate(-143.13 -71.5)"
fill="#e0e0e0"
/>
<path
d="M174.31,516.6l47.9,163.07H937c63.6-45.08,114.27-121,105.33-248.92Z"
transform="translate(-143.13 -71.5)"
fill="#e0e0e0"
/>
<path
d="M1019.87,359.15,167.32,437.66a13.16,13.16,0,0,0-11.26,16.79l18.25,62.14,868-85.85a508.31,508.31,0,0,0-8.16-61A13.18,13.18,0,0,0,1019.87,359.15Z"
transform="translate(-143.13 -71.5)"
fill="#fff"
/>
<ellipse
cx={718.9}
cy={571.77}
rx={12.85}
ry={11.78}
fill="url(#ea370a73-8633-402d-81f8-1dcf1f82bd44)"
/>
<ellipse
cx={749.95}
cy={571.77}
rx={12.85}
ry={11.78}
fill="url(#15ee616f-9afd-4224-ab9d-5eaaa4f1a39b)"
/>
<ellipse
cx={781}
cy={571.77}
rx={12.85}
ry={11.78}
fill="url(#57db5216-0d5b-4eda-8ec0-03821896a9f2)"
/>
<circle cx={718.9} cy={571.77} r={9.64} fill={props.primaryColor} />
<circle cx={749.95} cy={571.77} r={9.64} fill={props.primaryColor} />
<circle cx={781} cy={571.77} r={9.64} fill={props.primaryColor} />
<rect x={178.18} y={256.97} width={108.14} height={10.71} fill="#fff" />
<rect x={325.94} y={256.97} width={108.14} height={10.71} fill="#fff" />
<rect x={473.7} y={256.97} width={108.14} height={10.71} fill="#fff" />
<polygon
points="592.55 188.45 466.21 188.45 466.21 156.32 575.42 156.32 592.55 188.45"
fill="#69f0ae"
/>
<rect x={287.4} y={111.36} width={88.87} height={9.64} fill="#fff" />
<rect x={287.4} y={96.36} width={88.87} height={9.64} fill="#fff" />
<rect
x={48.63}
y={671.34}
width={758.13}
height={11.42}
fill="url(#9062edce-047a-4c38-922f-2c1643837c74)"
/>
<rect
x={48.63}
y={693.04}
width={280.91}
height={11.42}
fill="url(#a9aa6d79-eb50-4927-82d5-a007c2e3e24f)"
/>
<rect
x={264.46}
y={719.31}
width={280.91}
height={11.42}
fill="url(#068ad811-ca2f-433c-aad4-5691b569b9d5)"
/>
<rect
x={498.73}
y={745.58}
width={280.91}
height={11.42}
fill="url(#1e2cd204-3893-4ed4-8b5f-ca13f7324392)"
/>
<rect
x={836.04}
y={671.34}
width={49.89}
height={11.42}
fill="url(#f46d66cc-9326-48ec-9c73-380a4dad315b)"
/>
<rect
x={550.79}
y={693.04}
width={49.89}
height={11.42}
fill="url(#abbefab6-2234-46db-8140-5e847da66b5f)"
/>
<rect
x={120.21}
y={719.31}
width={49.89}
height={11.42}
fill="url(#a2f8cf05-4ab1-4c8d-9739-2fb42230b33d)"
/>
<rect
x={601.77}
y={719.31}
width={49.89}
height={11.42}
fill="url(#ae7ce76f-d76e-4d1d-8468-403faa613dbc)"
/>
<rect
x={88.76}
y={745.58}
width={280.91}
height={11.42}
fill="url(#bc015862-a6fd-4981-af42-7fd9dbba1a73)"
/>
<rect
x={53.98}
y={674.55}
width={748.43}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
<rect
x={53.98}
y={694.9}
width={277.32}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
<rect
x={267.05}
y={719.52}
width={277.32}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
<rect
x={498.33}
y={744.15}
width={277.32}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
<rect
x={831.32}
y={674.55}
width={49.25}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
<rect
x={549.72}
y={694.9}
width={49.25}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
<rect
x={124.65}
y={719.52}
width={49.25}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
<rect
x={600.05}
y={719.52}
width={49.25}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
<rect
x={93.6}
y={744.15}
width={277.32}
height={10.71}
rx={5}
ry={5}
fill="#2196f3"
/>
</svg>
);
UndrawYacht.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawYacht.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawYacht;